Le lazy loading, du français « chargement paresseux » est une méthode qui sépare les éléments à charger dans une page web. Une différence est faite entre ceux à afficher dès l’ouverture de la page et ceux à charger au fur et à mesure du scroll de l’utilisateur. Cette optimisation permet de réduire le temps de chargement d’une page.
Dans sa globalité, la page web se charge en fonction de la visibilité de ses éléments sur l’écran de l’internaute. C’est aussi ce qu’on appelle un chargement différé des images, des vidéos et autres ressources visuelles.
Il est clair que charger des éléments que l’utilisateur ne voit pas est inutile en plus de pénaliser la vitesse de chargement de la page. En conséquence, le lazy loading a sur le SEO un impact positif puisqu’il fluidifie l’expérience utilisateur, ce qui est valorisé par Google.
En bref, le lazy loading est une méthode à adopter pour sa création de site et c’est ce que nous faisons dans notre agence web située à Toulouse. Découvrez tous les détails du lazy loading dans la suite de cet article !
Lazy load et son impact pour le SEO
Il est donc bénéfique d’utiliser du lazy load en SEO. Mais d’abord, il convient de différencier le temps de chargement d’une page par rapport à son temps d’affichage.
Le temps de chargement est une mesure technique alors que le temps d’affichage influence l’expérience utilisateur. Pour le référencement, c’est le temps de chargement qui compte. Plus il est court, plus votre référencement est de meilleure qualité. C’est pourquoi charger progressivement une page grâce au lazy loading est bénéfique en SEO. Plus la vitesse de chargement de votre site est optimisée et meilleur est son référencement.
Il existe néanmoins des limites au lazy loading vis-à-vis de l’amélioration de votre référencement : les robots qui crawlent votre site ont besoin de connaître l’existence de tous les éléments (par exemple, l’application du lazy load peut se faire sur des images pour améliorer votre SEO), notamment les contenus visuels.
Le lazy loading a donc besoin d’être parfaitement paramétré pour éviter de masquer des parties de votre site aux yeux des robots. En plus de cela, il peut porter atteinte à la stabilité de l’affichage de vos pages, ce qui pénalise l’expérience utilisateur. Quand cela arrive, Google fait descendre le référencement du site. Les enjeux sont encore plus importants avec du lazy load sur mobile.
En effet, cela influence le CLS (Cumulative Layout Shift) qui mesure la stabilité d’un site web et est un core web vital (un des 3 aspects d’un site qui détermine la qualité de l’expérience utilisateur). C’est pourquoi il est nécessaire de tester votre lazy loading pour vérifier si Google est capable de crawler tout votre contenu et aussi voir si cela amène à une instabilité ; il existe des sites comme Shopify Analizer App pour vérifier si l’implémentation sur Prestashop de votre lazy load est bien faite (ou sur autre CMS).
Une méthode qui permet au crawl de tout parcourir correctement est la pagination. En effet, Google valorise votre référencement si votre URL change en fonction du scroll de l’utilisateur, le tout sans actualiser la page pour un résultat invisible aux yeux de l’internaute.
En bref, le lazy loading a sur le SEO un grand impact sur l’expérience utilisateur et votre référencement. C’est pourquoi il est recommandé de confier cette tâche à un professionnel. Dans ce cadre, Velcome SEO peut vous être d’une grande aide.
En complément, vous pouvez développer vos compétences sur le référencement et apprendre à faire un site référencé grâce au blog Velcome SEO.
Le lazy load sur les CMS : wordpress, shopify, prestashop, webflow
C’est au niveau du code que se fait le lazy load, via les CMS comme Wordpress, Shopify, Prestashop… Pour rappel, le CMS, ou « Content Management System » en anglais, est un logiciel dédié à la création de site.
Pour utiliser correctement cette méthode dans un CSM, il faut, pour le lazy load, installer un plugin adapté (le plugin est un ensemble de fichiers qui ajoute des fonctionnalités à un logiciel).
Par exemple, le plugin de lazy load sur Prestashop permet d’utiliser le lazy load sur ce logiciel. Cependant, il faut savoir que le plugin pour le lazy load sur Wordpress et Webflow est maintenant obsolète puisque le lazy load est désormais natif sur ces deux logiciels.
La place du lazy load devient donc de plus en plus importante avec l’attention accordée à ce sujet par les différents CMS. Cependant, notez bien que si vous voulez utiliser le lazy loading sur Shopify ou Prestashop, l’installation d’un plugin est obligatoire et la plupart de ces plugins sont payants.
C’est sur les images que le lazy load est le plus efficace, mais aussi sur les autres contenus visuels comme les vidéos. Comme ces éléments sont les plus lourds et longs à charger à l’ouverture d’une page web, l’usage du lazy load pour ces contenus est véritablement salutaire.
Mais avant d’implémenter le lazy loading des images sur Shopify ou sur un autre CMS, il faut choisir les bonnes images pour assurer au lazy loading une solide stabilité.
Voici différents types d’image les plus adaptés pour un lazy load de qualité : les images (implémentées sur Wordpress par exemple) dans un carrousel. En effet, seule une image est visible à la fois lorsqu’elle est comprise dans un carrousel, ce qui est parfait pour appliquer sur Webflow ou autre CMS un lazy load sur ces images.
Ensuite, vous avez les images présentes dans un menu ou un onglet car elles sont souvent invisibles avant de cliquer dessus. Cela concerne aussi les résultats de recherches en E-commerce : il y a tellement de résultats que la majorité n’est pas visible dès l’affichage de la page : un lazy load est donc indispensable pour ce genre de page web.
Google et le lazy loading
Google a voulu rendre le lazy loading plus simple et facile d’accès : depuis la version Google Chrome 76, l’attribut « loading » dans les balises HTML « img » ou « iframe » rend le lazy loading facile pour Google Chrome car il est capable de l’interpréter grâce à un lazy loading natif.
Les navigateurs comme Google Chrome ont voulu simplifier ceci car ils ont vu que le lazy loading devenait un élément assez important et utilisé par les développeurs. C’est grâce à des balises comme « eager » et « auto » que le lazy load fonctionne sur Google Chrome.
L’implémentation du lazy load s’avère efficace voire même essentielle lors de la création de votre site. L’utilisation de ce dernier demande une solide expérience, aussi vous pouvez faire appel à des agences web comme Velcome SEO ou consulter notre blog SEO pour vous aider dans cette tâche !
