par Qu’est-ce que le lazy loading ?
Le lazy-loading (ou chargement paresseux en français) est une technique de développement pour les sites internet qui consiste à charger des éléments d’une page au fur et à mesure du défilement de la page par l’internaute. Il s’agit essentiellement des images mais cela peut aussi concerner des vidéos.
Dans le cas d’un site constitué essentiellement d’images (comme les sites de social-wall, les sites d’inspiration visuelles, ou encore une catégorie de produits sur un site e-commerce), le temps de chargement peut donc être très bénéfique pour l’utilisateur final.
Pourquoi le lazy loading est important pour le SEO de votre site ?
Si le lazy-loading a été créé au départ pour améliorer l’expérience utilisateur sur un site internet, il peut également être bénéfique pour le référencement naturel de votre site.
Un chargement plus rapide d’une page améliore son indexation
Par un brevet déposé en 2010, Google a affirmé que le chargement d’une page web était bien un critère de positionnement dans ses résultats naturels de recherche, bien qu’il soit impossible de savoir quelle importance le moteur accordé à ce critère. Cela s’est à nouveau confirmé et précisé avec la mise à jour « Mobile Speed Update » qui consiste depuis le mois de juillet 2018 à défavoriser les sites web mobile trop lents à charger.
Et comme le lazy-loading améliore le temps de chargement d’une page, cela en fait un atout pour une optimisation SEO !
Un gain de temps pour GoogleBot…
Comme le dit le proverbe, « le temps, c’est de l’argent », et GoogleBot n’a pas de temps à perdre, il a des millions de sites et de pages a visiter, traiter, et indexer ! L’effet collatéral du chargement rapide d’une page est que vous augmentez le « budget crawl » de votre site, c’est à dire le nombre de pages que GoogleBot va explorer lorsqu’il visite votre site web. On peut dire merci au double effet Kiss Cool !
…Mais aussi pour l’utilisateur !
Et oui, et l’internaute dans tout ça ? Et bien le lazy-loading ne pourra que lui être bénéfique pour l’UX, car sa page web se chargera plus vite, et il aura donc moins tendance à quitter votre site. Par cet effet, vous diminuez votre « bounce rate » (ou taux de rebond) et diminuez les chances que l’internaute revienne sur sa recherche pour cliquer sur un autre résultat naturel. Il faut cependant préciser que le taux de rebond n’est pas à ce jour un critère de positionnement.
Comment mettre en place le lazy-loading sur votre site aujourd’hui ?
La mise en place technique du lazy-loading sur votre site peut se faire de plusieurs façons mais doit respecter quelques principes pour que cela soit bénéfique pour le référencement naturel de votre site.
Vous avez dit JavaScript ?
Historiquement, la mise en place du lazy-loading nécessitait du code JavaScript, rendant l’intégration complexe pour les sites n’utilisant pas de CMS populaire comme WordPress ou Prestashop pour un site e-commerce. Dans le cas où cette technique est utilisée, les images risquent malheureusement de ne pas être indéxables par les robots de Google, avec tous les effets SEO que cela entraîne. Heureusement, dans un Hangout du 24 août 2018, John Mueller (un des consultants Google les plus écouté et populaire) indiquait qu’il suffisait tout simplement d’entourer chaque image concernée par une balise <noscript> pour rendre possible l’indexation de celles-ci. Cela ne concerne évidemment pas d’autres éléments comme les iframe chargés en lazy-loading.
Lazy Loading pour WordPress
Si votre site tourne sous WordPress, il vous suffit d’installer une extension telles que Smush qui va compresser vos images et activer le lazy loading automatiquement sur toutes vos images. Pratique !
Vous avez dit lazy-loading natif ?
Au mois d’avril 2019, Addy Osmani (ingénieur chez Google) a présenté sur son blog le concept de lazy-loading natif. Mais quel est le principe du lazy-loading natif ? Et bien il s’agit tout simplement de reporter la fonctionnalité de chargement à retardement dans le navigateur, c’est à dire presque sans code. Cela est rendu possible grâce à l’ajout d’un attribut « loading » sur les balises concernées (images, iframes…) auquel on peut attribuer la valeur « lazy ». Cette fonctionnalité est d’ores et déjà prise en compte par les navigateurs Google Chrome et Mozilla Firefox. En revanche, cette méthode n’est pas compatible avec AMP, qui est le standard que Google essaye d’imposer pour le chargement plus rapide des sites web.
