Le Lazy Load, qu’on pourrait traduire par « chargement fainéant » en français, correspond au chargement différé de certaines images. Elles sont généralement en dessous du premier écran chargé.
Ce n’est pas une nouveauté, Google recherche la performance. Ainsi, il est de plus en plus rigide sur les temps de chargement et la lourdeur des fichiers chargés. Alors qu’est-ce que le Lazy Load, à quoi ça sert et surtout y a-t-il une plus-value à en faire ?
Lazy Load : comment ça marche
Le Lazy Load doit donc permettre de signaler au navigateur si la photo doit être chargée ou non de manière immédiate à l’affichage de la page. Les deux attributs qu’on pourra mettre seront lazy ou eager. À quoi servent-ils ? Très simple :
- lazy : Chargement différé, l’image ne s’affichera que lorsqu’elle apparaît à l’écran.
- eager : Chargement critique, l’image s’affichera au chargement de la page web entière.
Cette fonctionnalité permet donc de décider pour chaque image si elle doit être affichée ou non de manière critique. Pratique, puisque cela permet d’éviter un temps de chargement trop élevé, et ainsi réduire le First Contentful Paint, à savoir une version de la page lorsqu’elle est chargée avec les éléments principaux. En effet, lorsqu’on charge une page, une file d’attente est créée et les éléments critiques sont chargés en premier. Le but étant de ne pas avoir une file d’attente critique trop importante.
De la même manière, l’objectif est de disposer d’une version la plus légère du Largest Contentful Paint (premier bloc de contenu qu’on voit sans faire défiler la page).
Comment l’intégrer le Lazy Load à son site ?
Lorsque vous mettez en ligne une image pour un article de blog, ou sur une page, vous pouvez remplir différents champs importants en SEO. Sur WordPress, vous pouvez :
- Décrire l’image dans le champ « Texte alternatif »
- Rédiger une légende dans le champ « Légende »
Cependant, actuellement, WordPress ne propose pas de champs Lazy Load. De notre côté, nous avons intégré un champ sur-mesure dans WordPress pour pouvoir gérer cela :
Si vous ne disposez pas d’une fonctionnalité sur-mesure, il existe des modules de Lazy Load pour toutes les solutions web :
- Sur WordPress, vous pourrez retrouver WP Rocket, JetPack ou encore WP Fastest Cache.
- Sur Prestashop, vous aurez des modules développés et disponibles sur la marketplace Prestashop Addons tels que celui-ci.
- Si vous êtes sur une solution sur-mesure conçue avec un framework comme VueJS ou ReactJS, vous devrez faire développer la fonctionnalité sur-mesure.
Le chargement différé est-il vraiment utile ?
En définitive, oui, le Lazy Load est utile et pertinent. Cela permet d’optimiser le moindre octet disponible, et ça, ça plaît à Google. Ainsi, en appliquant la politique de chargement différé de certaines images, vous mettez davantage de chances de votre côté pour que Google note vos pages convenablement.
Bien évidemment, il faut prendre en compte bien d’autres paramètres outre celui-ci. Pour cela, nous pouvons vous accompagner sur l’optimisation de votre site web en matière de SEO. N’hésitez pas à contacter notre agence située à Lyon 8 pour en savoir plus !