Comment utiliser le chargement paresseux pour obtenir un résultat de vitesse mobile parfait

Votre site réussit-il le test de vitesse de Google pour mobile ? Non? Vous voudrez peut-être regarder des images de chargement paresseux.

Les performances du site Web sont essentielles. Si votre blog ou votre site Web est lent à charger, c'est terrible pour l'expérience utilisateur.

Personne n'attendra cinq ou dix secondes pour que votre site se charge. La vitesse d'Internet ou la vitesse de téléchargement doit être rapide. Un site Web lent augmentera votre taux de rebond et réduira votre taux de conversion.

Lorsque vous effectuez un test de vitesse de site Web pour votre site, la vitesse de votre bureau est généralement correcte. Mais comment se comportent vos pages pour un test de vitesse mobile ?

Préparez-vous pour les utilisateurs mobiles

La plupart des programmes de blogs et de sites Web sont raisonnablement bien conçus pour être visualisés sur un ordinateur.

Ils utilisent un design réactif pour proposer une version mobile.

Bien qu'il s'agisse d'une solution pratique, elle présente un inconvénient important.

Si votre site est réactif, il fonctionnera sur les appareils mobiles.

Mais les tailles de fichier de vos images sont pour le bureau, donc la vitesse de votre site mobile est beaucoup plus lente.

Si vous faites un test Google Pagespeed Insights, votre résultat peut être raisonnable et dans le vert pour le bureau, mais il ressemble à ceci pour votre version mobile.

Lorsque vous considérez que la moitié, voire plus, des visiteurs de votre site Web utilisent des appareils mobiles, vous devez vraiment améliorer le temps de chargement de votre page et la vitesse de votre mobile.

Google s'apprête à utiliser son index mobile-first comme facteur de classement.

Il existe de nombreux services gratuits de test de vitesse de site Web que vous pouvez utiliser pour surveiller les performances.

Cependant, toutes les applications de test de vitesse ne mesurent pas la vitesse des sites mobiles. Ne soyez donc pas rassuré par de bons résultats pour la vitesse des pages de votre site desktop.

WebpageTest vous permet de sélectionner différentes versions mobiles, c'est donc une alternative à Google.

Assurez-vous toujours que vous pouvez vérifier votre version mobile car les appareils se connectent avec une vitesse de connexion Internet beaucoup plus lente.

Si vos résultats ne sont pas satisfaisants, vous avez du travail à faire.

Comment améliorez-vous vos performances mobiles ?

De nombreux facteurs contribuent à ralentir la vitesse du site sur ordinateur et sur mobile.

Les fichiers Javascript et CSS peuvent se charger trop tôt et bloquer le rendu. Si vous utilisez WordPress, vous pouvez résoudre ce problème facilement en utilisant un plugin de mise en cache.

Vous pouvez avoir un problème avec votre hébergeur qui fait que votre TTFB (Time To First Byte) est un peu supérieur à une demi-seconde.

Cependant, la plupart des hôtes ne sont au plus que 10 à 20 % au-dessus de cette durée, ce qui n'est pas un gros problème.

Le plus gros problème est presque toujours les images et les iframes. Lorsque vous ajoutez une image à une publication, elle n'est pas compressée, dimensionnée ou formatée pour mobile.

Vous pouvez utiliser un plugin pour vous aider. Smush est un plugin populaire pour compresser les images lorsque vous les téléchargez. Le résultat améliorera un peu votre version desktop, mais pas votre version mobile.

Pour améliorer le temps de chargement des pages sur mobile, vous devez diffuser des images beaucoup plus petites. Mais cela implique beaucoup de travail.

Jusqu'à récemment, la meilleure solution était d'avoir une version mobile distincte de votre site ou d'utiliser des pages AMP. Dans tous les cas, toutes les images du site existant ont dû être remplacées par des images Next-Gen.

Le travail impliqué dans l'une ou l'autre solution peut prendre des semaines ou des mois, selon la taille de votre site.

Pour la plupart des propriétaires de sites, si vous ne connaissez pas une API d'observateur d'intersection ou un img src, un attribut data src, une classe paresseuse, des balises img ou une classe img, vous ne créerez pas de nouveau site mobile.

Avouons-le. Tout cela est trop difficile et chronophage.

Plus de lecture: Comment arrêter le formulaire de contact et le spam de commentaires

Application du comportement de chargement paresseux

Heureusement, il existe un moyen simple de corriger le temps de chargement de votre page mobile. La réponse est de faire en sorte que toutes vos images soient chargées paresseusement.

Le chargement différé retarde la livraison des images jusqu'à ce que le lecteur en ait besoin. Lorsqu'un lecteur fait défiler une page Web, les images en dessous de ce qui est visible sont retenues.

Ce faisant, le temps de chargement initial d'une page est considérablement réduit par rapport au temps de chargement rapide. Il existe de nombreux plugins et solutions pour ajouter du chargement paresseux à votre blog ou site Web.

Exécution de tests de charge différée

Au cours des dernières semaines, j'ai testé en version bêta une nouvelle façon de faire vibrer un site mobile.

Vous avez peut-être entendu parler des réseaux de diffusion de contenu, du chargement paresseux et des images hors écran différées.

Si ce n'est pas le cas, ce sont des éléments qui ne servent d'images que lorsqu'une page est chargée et qu'un utilisateur fait défiler la page. Vous avez peut-être vu cela en action sur des sites tels que Medium.

Lorsque vous visitez un site pour la première fois, une image apparaît floue pendant une fraction de seconde. Elles sont appelées images d'espace réservé.

Ensuite, l'image apparaît clairement en un instant.

C'est le chargement paresseux en action. Lorsqu'un utilisateur fait défiler la page, les images ne sont pas chargées tant qu'elles ne sont pas nécessaires.

Cela permet à une page de fonctionner très rapidement, en particulier sur les appareils mobiles. Un chargeur paresseux peut être appliqué à n'importe quel nombre d'images sur des pages Web.

Mais il manque encore un élément à cette solution. Les images ne sont pas au format Next-Gen.

Heureusement, il existe maintenant une solution, vous n'avez donc pas à remplacer toutes vos images. Optimole est un plugin WordPress qui fait beaucoup de gros travaux.

Non seulement il charge les images paresseusement, mais il remplace également vos images par une nouvelle URL d'image qui fournit des images de nouvelle génération.

En plus de cela, il redimensionne les images à la volée.

Mettre Optimole à l'épreuve

J'ai fait beaucoup de tests, et chaque fois que j'ai vérifié une page, elle a obtenu un score très élevé lors d'un test de vitesse mobile Google.

L'un de mes tests portait sur une page Web pleine largeur contenant dix grandes images non compressées et non dimensionnées.

En d'autres termes, j'ai juste giflé une pile de grandes images sur une page et je l'ai publiée. (Les images étaient une gracieuseté de Pixabay, elles n'avaient donc pas besoin d'attribution Creative Commons.)

La page était si grande que je ne pouvais pas vous montrer d'image. Alors, je vais vous le montrer dans une vidéo.

Lorsque j'ai testé la page sur Google, c'était le résultat.

Pas surprenant, compte tenu de la taille de toutes les images.

Ensuite, j'ai activé Optimole. Vous pouvez voir les paramètres que j'ai utilisés ci-dessous. C'est tout ce que vous avez à faire.

Alors quel a été le résultat ?

Pour le bureau, un score parfait.

Pour le mobile, un score quasi parfait.

Sur GTmetrix, le score est à nouveau proche de la perfection.

N'oubliez pas qu'il s'agit de résultats réels pour une page remplie d'énormes images en haute résolution.

L'installation du plugin et l'obtention d'une clé API n'ont pris que quelques minutes, et seulement quelques secondes ensuite pour activer les paramètres.

Ainsi, en moins de cinq minutes, j'avais une page et un site mobiles presque parfaits.

En savoir plus sur Optimole

Pour voir le plugin en action dans le monde réel, visitez le site Web CodeinWP. Il fonctionne sur Optimole, vous pouvez donc effectuer des tests sur la vitesse de son site.

Vous pouvez vérifier votre site en vous rendant sur le site Optimole.

Cliquez sur le bouton Vérifier mon site et entrez l'URL de votre site. Vous verrez une liste de toutes vos images et les économies qui peuvent être réalisées sur votre site Web.

Si vous avez un petit site, une version gratuite du plugin est disponible. Mais si vous avez un grand site, vous voudrez peut-être envisager une option premium.

Il vous a fallu plus de temps pour lire cet article qu'il n'en faudra pour que votre site Web fonctionne très rapidement pour vos visiteurs mobiles. Alors qu'est-ce que tu attends?

Plus d'alternatives de chargement paresseux

Si vous ne souhaitez pas configurer la livraison CDN des images Nextgen, vous pouvez utiliser de nombreuses options gratuites.

WordPress intègre désormais le chargement paresseux par défaut. Cependant, vous avez peu de contrôle sur son fonctionnement. Il est généralement préférable d'utiliser un plugin pour affiner les performances.

Smush est un plugin WordPress populaire et gratuit pour réduire les images lorsque vous les chargez dans votre médiathèque.

Mais il a une option pour activer le chargement paresseux. Je l'ai essayé sur quelques-uns de mes sites et cela fonctionne parfaitement. Activez simplement l'option et vous avez terminé.

A3 Lazy Load est un autre plugin gratuit. Je l'utilise depuis longtemps sur plusieurs de mes sites, dont celui-ci.

Ce que j'aime, c'est que je peux affiner beaucoup d'options. Il a la possibilité d'exclure les widgets, ce qui résout certains problèmes de saut avec certains thèmes.

BJ Lazy Load existe depuis longtemps. Il compte plus de 90 000 utilisateurs. Cependant, il n'a pas été mis à jour depuis un moment.

Lazy Load est un plugin gratuit avec 60 000 installations. Il s'agit d'un composant gratuit de WP Rocket, qui est une solution tout-en-un pour l'optimisation de la vitesse du site.

Un dernier plugin est Lazy Load for Videos. C'est un bon outil à utiliser si vous avez beaucoup de vidéos Youtube sur votre site.

Quel choix ! Maintenant, vous n'avez aucune raison d'avoir un site Web mobile lent.

Remarque : je n'ai aucune affiliation avec ce produit. Mon avis Optimole est basé sur mes expériences en tant qu'utilisateur.

Plus de lecture : Vérificateurs de sites Web gratuits et outils de référencement