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.

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 peut avoir un impact profond sur la vitesse du site si vous utilisez beaucoup d'images. 🚀 Cliquez pour Tweet

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

Quatre plugins qui accélèrent considérablement la livraison de cette page web sont BJ Lazy Load, Lazy Load XT, 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.

1. BJ Lazy Load

BJ Lazy Load est un plugin très populaire. Il est actif sur plus de 70 000 sites Web WordPress et obtient une note de 4,1 étoiles sur 5 grâce à un total de plus de 60 critiques.

Plugin bj lazy load wordpress

Plugin BJ Lazy Load

L’installation et la configuration se font sans effort. Il suffit de trouver le plugin à l’aide du programme d’installation du plugin WordPress intégré, de l’installer et de l’activer. Lors de l’activation, un nouvel élément de menu est ajouté sous Réglages > BJ Lazy Load. Toutes les options de Lazy Load sont sélectionnées par défaut, et vous devrez probablement laisser les paramètres par défaut, sauf si vous rencontrez des problèmes sur le front-end de votre site après avoir activé le plugin.

Une option fournie par ce plugin et pas par les deux autres est la possibilité d’ajouter une URL pour une image à utiliser comme espace réservé pour les images et vidéos chargées en Lazy Load jusqu’à ce que les ressources image et vidéo réelles soient téléchargées. Bien sûr, si vous utilisez cette option, vous devrez utiliser un très petit fichier et non une image en haute résolution.

Pour un impact le plus léger possible et des résultats homogènes, je vous recommande de créer une image en couleur solide de la même couleur que l’arrière-plan de votre site et de l’enregistrer au format png.

Vous pouvez également spécifier une classe HTML qui sera exclue du Lazy Load. Vous pouvez ensuite appliquer cette classe à toutes les images ou vidéos que vous souhaitez exclure du Lazy Load. Enfin, vous pouvez spécifier la proximité d’une image ou d’une vidéo par rapport à la fenêtre d’affichage avant qu’elle ne soit téléchargée et affichée.

Voyons à quelle vitesse notre page se charge avec BJ Lazy Load mis en place.

Test de vitesse avec le plugin BJ Lazy Load

Test de vitesse avec le plugin BJ Lazy Load

C’est juste simple et rapide. Le site a été testé une demi-douzaine de fois à plusieurs reprises au cours de la journée, et les temps de chargement se situaient constamment entre 300 et 400 millisecondes.

Ce résultat fulgurant et rapide n’est pas une anomalie.

Alors que la page se charge incroyablement rapidement avec ce plugin installé, la taille de la page a en fait augmenté. Qu’est-ce que c’est que ça ? En théorie, avec le Lazy Load activé, la taille de la page devrait diminuer puisque toutes les images ne sont pas téléchargées avec le chargement initial de la page.

Après une enquête sur la situation, voici ce que j’ai trouvé.

Comment WordPress sert les images ?

Le comportement par défaut de WordPress est de présenter une gamme de tailles de fichiers au navigateur en utilisant l’attribut srcsetde l’élément img utilisé pour intégrer l’image. Le navigateur parcourt la liste des tailles disponibles et charge la plus petite version de l’image qui occupera l’espace disponible.

Cela signifie que si vous téléchargez un fichier image de très grande taille, WordPress proposera automatiquement plusieurs versions plus petites de cette image aux visiteurs de votre site Web. Le navigateur de votre visiteur saisira la plus petite image appropriée en fonction du nombre de pixels disponibles pour l’occupation de l’image.

Comment BJ Lazy Load modifie-t-il le comportement de WordPress ?

BJ Lazy Load remplace le comportement par défaut de WordPress. L’attribut srcset est remplacé par un attribut data-lazy-srcset qui fonctionne conjointement avec le script du plugin. Cependant, le résultat final est qu’au lieu de télécharger une version de taille réduite de l’image, l’image en pleine résolution finit par être téléchargée et affichée.

Ce n’est pas idéal, mais tant que vous optimisez les fichiers images avant de les télécharger sur WordPress – ce que je n’ai pas fait – alors vous ne verrez pas le même problème.

Chargement de pages avec BJ Lazy Load

Chargement de pages avec BJ Lazy Load

Le test visuel – simplement en chargeant le site et en regardant ce qui se passe – démontre que si vous utilisez BJ Lazy Load et que votre site a une couleur de fond non blanche, vous aurez besoin d’ajouter une sorte d’image d’espace réservé. Le comportement par défaut sans image de caractère générique est d’afficher un gif de caractère générique blanc à la place de l’image.

2. Lazy Load XT

Lazy Load XT a bien fonctionné dans nos tests et est un autre bon plugin de chargement en Lazy Load WordPress à considérer. Avec plus de 4000 installations actives, ce plugin n’est pas aussi populaire que BJ Lazy Load. Cependant, il a attiré mon attention avec sa note impressionnante de 4,9 sur 5 étoiles. Une seule des 22 critiques publiées est inférieure à 5 étoiles.

Plugin lazy load xt wordpress

Plugin Lazy Load XT

Après l’activation, le plugin est configuré en naviguant dans le menu Réglages > Lazy Load XT. Vous remarquerez rapidement que ce plugin ne fait pas que charger en Lazy Load des images et des vidéos. Vous pouvez également utiliser ce plugin pour minifier les fichiers JS et CSS, charger les bibliothèques JavaScript et CSS en utilisant le CDN Cloudflare, et déplacer les scripts vers le pied de page du site.

Il existe de nombreuses options supplémentaires que vous pouvez utiliser pour affiner les performances du site. Cependant, comme nous ne faisons que tester le Lazy Load à ce stade, j’ai laissé les paramètres par défaut seuls, je n’ai pas joué avec la minification ou le déplacement de CSS et JavaScript, j’ai effacé le cache du serveur, et lancé la page de test dans Pingdom.

Test de vitesse avec Lazy Load XT

Test de vitesse avec Lazy Load XT

La page est toujours à 2 Mo et le temps de chargement de la page n’est pas aussi rapide qu’avec BJ Lazy Load, mais nous avons quand même réussi à réduire de 50% le temps de chargement de la page par rapport au temps nécessaire pour charger la page sans Lazy Load.

Un rapide coup d’oeil à l’arborescence des fichiers dans les résultats des tests montre que la même chose se passe avec Lazy Load XT activé que nous avons vu avec BJ Lazy Load. Plutôt que de charger une version optimisée de l’image, avec le plugin activé, la version pleine résolution de l’image est téléchargée et affichée.

Bien que le plugin n’ait pas produit la même augmentation de vitesse que BJ Lazy Load, le test visuel va en faveur de Lazy Load XT. Contrairement à BJ Lazy Load, le caractère de remplissage utilisé par Lazy Load XT est transparent. Par conséquent, il n’y a pas de boîtes blanches vides inesthétiques lorsque les images et les vidéos sont chargées et vous n’avez pas à vous soucier de la création et du téléchargement d’une image générique.

3. 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.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
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. BJ Lazy Load et Lazy Load XT ont produit une taille de page de 2,0 Mo. 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.

BJ Lazy Load et Lazy Load XT annulent tous deux ce comportement et finissent par fournir une image pleine résolution. Cependant, 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 fourni.

Curieusement, malgré la différence de taille de page, le site se charge plus rapidement avec BJ Lazy Load activé qu’avec a3 Lazy Load activé. Le site a été testé plusieurs fois avec chaque plugin installé pour s’assurer que les résultats affichés ici n’étaient pas incorrects. La différence se résume au nombre de requêtes HTTP nécessaires pour charger la page. En un coup d’œil, il semble que BJ Lazy Load nécessite plus de requêtes. Cependant, si nous jetons un coup d’oeil à l’arbre des fichiers, nous voyons ce qui se passe réellement.

URLs des données de Lazy Load

URLs des données de Lazy Load

Le fichier du site avec BJ Lazy Load activé inclut une vingtaine de requêtes qui commencent par data:image/gif. Ce sont des données URI plutôt que des requêtes HTTP. En effet, ils disent au navigateur de créer un gif localement plutôt que de demander ce gif à un serveur. En conséquence, BJ Lazy Load n’a vraiment besoin que de 17 requêtes HTTP pour construire la page contre les 27 requises par a3 Lazy Load. Cela explique pourquoi la page se charge à la vitesse de l’éclair.

Lazy Load XT emploie une tactique similaire, mais nécessite encore quelques requêtes de plus que BJ Lazy Load, ce qui explique pourquoi il ne produit pas les mêmes résultats.

4. Lazy Load

Et une 4è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.

5. 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é et recommandations

Où cela nous mène-t-il ? Ces quatre options ont toutes les quatre permis d’améliorer la vitesse de chargement des pages grâce au Lazy Load des images et des vidéos. Le choix du meilleur plugin dépend de vos préférences personnelles et de la façon dont vous préparez les images avant de les télécharger sur votre site Web WordPress.

  • Si vous n’optimisez pas les images avant de les télécharger sur votre site Web WordPress – et vous devriez vraiment le faire – alors optez pour a3 Lazy Load afin de bénéficier de l’optimisation des images intégrée à WordPress.
  • Si vous optimisez les images avant de les télécharger et que vous voulez la livraison la plus rapide possible avec le moins d’effort possible, vous ne pouvez pas vous tromper avec BJ Lazy Load. Lazy Load est une autre bonne option.
  • Si vous optimisez les images avant de les télécharger et que vous voulez des options de configuration supplémentaires qui vous permettront de modifier la façon dont les ressources CSS et JavaScript sont fournies et gérées, optez pour Lazy Load XT.

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.

54
Partages