Le poids moyen des pages web est de 3719 kB avec des images et des vidéos représentant près de 78% du poids total selon les HTTP Archive. C’est beaucoup d’octets à télécharger et à afficher pour le navigateur d’un visiteur de site Web, et les tendances indiquent toutes des pages Web plus lourdes et une utilisation accrue d’images à l’avenir. WordPress est à l’avant-garde lorsqu’il s’agit de partager des médias et d’intégrer des fichiers multimédias dans la conception du site. Avec WordPress, il est facile d’intégrer des images et des vidéos dans des articles, des pages et même dans l’arrière-plan du thème.

Avec la sortie de WordPress 5.5, le lazy loading fait partie de la version de base et rend la mise en œuvre de cette technique très facile.

Cependant, toutes ces ressources lourdes font du téléchargement d’une page Web une expérience coûteuse pour les utilisateurs qui doivent attendre que de gros fichiers soient téléchargés – y compris des fichiers qui ne sont pas visibles au départ – avant de visualiser une page Web. C’est ici que le Lazy Load WordPress entre en jeu.

Qu’est-ce que le Lazy Load et comment fonctionne-t-il ?

Le Lazy Load est une technique d’optimisation qui charge le contenu visible mais retarde le téléchargement et l’affichage du contenu qui apparaît sous la ligne de flottaison.  C’est juste le genre de chose qui excite Google, et c’est une technique que vous devriez considérer si vos articles et pages incluent beaucoup de vidéos et d’images en haute résolution.

Le Lazy Load fonctionne comme ça :

  • Le navigateur construit la page web DOM sans télécharger les images et précharger les vidéos.
  • JavaScript est utilisé pour déterminer les images à télécharger et les vidéos à précharger en fonction du contenu qui est initialement visible lorsque la page se charge. Ces images et vidéos sont téléchargées et préchargées comme il convient.
  • Le téléchargement et l’affichage de vidéos supplémentaires sont retardés jusqu’à ce qu’un visiteur du site fasse défiler la page et qu’un contenu supplémentaire soit affiché.

Le résultat final est que les images ne sont pas téléchargées et les vidéos chargées jusqu’à ce qu’elles soient réellement nécessaires. Cela peut fournir une augmentation significative des performances pour les sites qui incluent beaucoup d’images en haute résolution et des vidéos intégrées.

Le Lazy Load sur WordPress

Comme avec tant d’autres problèmes de performance de site Web, quand il s’agit du chargement en Lazy Load pour WordPress, il y a un plugin quevous pouvez utiliser pour résoudre le problème. En fait, il existe de nombreux plugins gratuits disponibles dans le répertoire de plugins WordPress qui peuvent être utilisés pour charger en Lazy Load des images et des vidéos. Après avoir considéré quelques dizaines de plugins et en avoir testé plusieurs, nous avons identifié cinq plugins qui produisent une amélioration mesurable des performances du site web. Si vous êtes prêt à mettre en œuvre un Lazy Load, commencez par considérer ces cinq options.

Les images et les vidéos ralentissent-elles vraiment les sites Web ?

Tout d’abord, avant de télécharger des images sur WordPress, assurez-vous de les optimiser.

Nous avons besoin d’un score de base afin de voir l’impact de l’ajout d’images et de vidéos. Il ne sert à rien de régler un problème s’il n’y a pas de problème au départ. Pour tester les choses, j’ai mis en place une installation WordPress standard sur un compte d’hébergement Kinsta. TwentySixteen est le thème actif et aucun plugin d’optimisation ou technique comme la mise en cache n’a été implémenté.

Voici comment Pingdom évalue la vitesse du site avant d’ajouter des photos ou des vidéos.

Test de vitesse sans images ou vidéos
Test de vitesse sans images ou vidéos

Comme vous pouvez le constater, la page est très légère avec un peu moins de 155 ko et est chargée en moins d’une demi-seconde. Difficile de trouver des fautes avec ces scores. Que se passe-t-il si nous chargeons une page avec de gros fichiers image et des vidéos YouTube intégrées ?

Test de vitesse sans plugin de Lazy Load
Test de vitesse sans plugin de Lazy Load

La taille de la page est passée à 1,7 Mo et le temps de chargement de la page a presque triplé avec un peu moins de 1,3 seconde. TwentySixteen est un thème bien écrit, donc même avec une demi-douzaine d’images et des vidéos YouTube ajoutées, ce site est toujours assez léger et se charge rapidement. Cependant, nous pouvons voir que l’ajout d’images et de vidéos a rendu la taille de la page beaucoup plus grande et ralenti considérablement la vitesse de chargement de la page.

Amélioration de la vitesse de chargement des pages grâce à des plugins de Lazy Load

Deux plugins qui accélèrent considérablement la livraison de cette page web sont a3 Lazy Load, et Lazy Load. Voyons comment chacun d’eux s’est comporté à tour de rôle. Plusieurs plugins supplémentaires ont également été testés mais n’ont pas permis d’améliorer de façon mesurable les performances du site. Lorsque vous essayez des plugins de Lazy Load, assurez-vous de faire un test avant et après pour vous assurer qu’ils produisent les résultats que vous recherchez.

a3 Lazy Load

a3 Lazy Load est une autre option de Lazy Load populaire de WordPress dans le référentiel. Ce plugin est actif sur plus de 50 000 sites WordPress et a obtenu une très bonne note de 4,7 sur 5 étoiles et a reçu près de 40 commentaires d’utilisateurs.

Plugin a3 lazy load wordpress
Plugin A3 Lazy Load

L’activation du plugin ajoute un menu Paramètres sous Réglages > a3 Lazy Load. Pour les tests, j’ai laissé les paramètres par défaut à une exception près. J’ai utilisé l’option Chargement de la couleur d’arrière-plan pour faire correspondre la couleur du caractère générique à la couleur de l’arrière-plan de la page Web. Avec ce changement et les paramètres par défaut appliqués, le site a très bien fonctionné.

Test de vitesse avec le plugin A3 Lazy Load
Test de vitesse avec le plugin A3 Lazy Load

On revient à un temps de chargement de page inférieur à une demi-seconde. C’est remarquable si l’on considère le nombre d’images et de vidéos incluses sur cette page web.

Comparaison des résultats des essais

Vous remarquerez sans aucun doute que la taille de la page et le nombre de requêtes ont considérablement diminué. Qu’est-ce qui crée cette différence dramatique ? Pingdom fournit un instantané de la taille du contenu, et une comparaison rapide fournit la réponse. Tout d’abord, voici à quoi ressemble l’instantané de la taille du contenu avec a3 Lazy Load activé.

Taille du contenu avec le plugin A3 Lazy Load
Taille du contenu avec le plugin A3 Lazy Load

L’empreinte de l’image est minuscule, un peu plus de 150 ko. Voici à quoi ressemble la capture d’écran du contenu avec une charge utile totale de 2,0 Mo.

Taille du contenu avec le plugin Lazy Load XT
Taille du contenu avec le plugin Lazy Load XT

Les scripts, le HTML, le CSS et autres tailles de contenu sont presque identiques. Cependant, la taille de l’image est de 1,86 Mo – essentiellement la taille de la version pleine résolution de la toute première image de la page – plutôt que seulement 150 Ko. Alors, que se passe-t-il ?

Comme je l’ai mentionné précédemment, WordPress fournit automatiquement une variété de tailles d’image et le navigateur sélectionne et affiche la version la plus petite possible en fonction de la taille à laquelle l’image sera affichée à l’écran. A3 Lazy Load laisse le comportement par défaut de WordPress intact et le résultat est qu’un fichier image beaucoup plus petit est livré.

Lazy Load

Et une 2ème option est Lazy Load, qui est un plugin gratuit créé par l’équipe de WP Rocket. Il est actuellement actif sur plus de 10.000 installations avec une note de 4 sur 5 étoiles. Si vous êtes à la recherche d’une simple option de Lazy Load WordPress avec une bonne vitesse, c’est un excellent choix.

Plugin Lazy Load par WP Rocket
Plugin Lazy Load par WP Rocket

Ce plugin fonctionne sur les vignettes, toutes les images d’un article ou d’un widget texte, les avatars et les smileys. Le gros avantage de ce plugin est qu’il n’y a pas de bibliothèque JavaScript telle que jQuery utilisée et que le script pèse moins de 10 Ko. Il n’y a pas d’options à configurer, installez simplement le plugin et le Lazy Load fonctionnera simplement.

Lazy loading natif

Au cours des dernières années, il y a eu une poussée pour intégrer la fonctionnalité de chargement paresseux directement dans les navigateurs web. À l’heure actuelle, le lazy loading natif est disponible dans les navigateurs basés sur Chromium comme Chrome et Brave, ainsi que dans Firefox.

Le lazy loading natif est très utile pour les performances du site car il ne repose pas sur du code Javascript en ligne ou des scripts externes. Pour ajouter le lazy loading natif à votre site, il suffit d’ajouter un attribut loading=lazy aux images et aux iframes que vous souhaitez charger en lazy load.

Plugin Google Native Lazyload.
Plugin Google Native Lazyload.

Google a développé le plugin Native Lazyload pour faciliter ce processus. Après avoir activé le plugin, WordPress insèrera automatiquement l’attribut de loading dans vos balises img et iframe.

 

Lazy Load for Videos

Si vous êtes simplement préoccupé par le Lazy Load des vidéos, nous vous recommandons également de consulter le plugin Lazy Load for Videos. Bien que certains des plugins ci-dessus le fassent également, il s’agit d’une excellente solution pour le contenu vidéo seulement.

Plugin Lazy Load for Videos
PluginLazy Load for Videos

Impact du Lazy Load sur le SEO

Quel que soit le plugin que vous utilisez pour le Lazy Load de WordPress, il est important de ne pas nuire à votre référencement. Il y a deux choses que vous devez vérifier deux fois :

  1. Assurez-vous que Google peut toujours parcourir vos images chargées en Lazy Load. Vous pouvez facilement le vérifier à l’aide de l’outil « Fetch as Google » sous la section crawl dans la Google Search Console. Si vous pouvez toujours voir vos images dans le code source, il est fort probable que tout va bien.
  2. Assurez-vous que vous utilisez toujours du texte alternatif sur vos images car c’est important pour les classements de recherche d’images Google.

Résumé

Avec la généralisation du lazy loading dans les navigateurs, nous recommandons l’utilisation d’un plugin comme le Native Lazy Load de Google pour définir une base de lazy loading pour votre site.

Avec la prise en charge de Chrome et de Firefox, et plus tard de Safari, le lazy loading natif du navigateur devrait suffire pour charger vos images et vos iframes en lazy load. Cela dit, si vous recherchez une option basée sur JavaScript qui cible également les navigateurs plus anciens, A3 Lazy Load est une excellente option.

Le Lazy Load n’est qu’une des techniques que vous pouvez utiliser pour optimiser votre site Web WordPress. Cependant, il a le potentiel d’avoir un impact profond sur la vitesse du site si vous utilisez beaucoup d’images et de vidéos. Néanmoins, une fois que vous avez implémenté le Lazy Load, il existe plusieurs techniques supplémentaires que vous pouvez envisager et mettre en œuvre pour offrir les performances les plus rapides possibles du site Web. Avons-nous manqué d’autres bonnes solutions de Lazy Load pour WordPress ? Si oui, faites-le nous savoir ci-dessous.

Jon Penland

Jon est le directeur de l'exploitation chez Kinsta et est impliqué quotidiennement avec les équipes de promotion, de service à la clientèle et de support technique de Kinsta. Jon est un père de famille. Quand il ne pianote pas fébrilement sur les touches de son ordinateur portable, il est généralement en train d'aider l'un de ses enfants à corriger un vélo ou de configurer Netflix pour un enfant d'âge préscolaire impatient.