Le lazy loading vous intéresse pour optimiser l’expérience utilisateur de votre site mais vous ne savez pas comment bien le configurer pour le SEO ? Voici tout ce que vous devez savoir et faire.
Le lazy loading vous intéresse pour optimiser l’expérience utilisateur de votre site mais vous ne savez pas comment bien le configurer pour le SEO ? Voici tout ce que vous devez savoir et faire.
Le lazy loading, pratique qui permet de différer le chargement de ressources web statiques pour gagner en temps de chargement, peut avoir un impact négatif sur le référencement s’il n’est pas correctement mis en place. Afin d’orienter les webmasters, référenceurs et développeurs, Google vient de publier un guide en Anglais revenant sur les bonnes pratiques. En voici un résumé.
Sommaire :
Le lazy loading (le « chargement paresseux » en Français) est une pratique désormais très courante en optimisation de l’UX (expérience utilisateur). Elle consiste à différer du chargement initial, le chargement des contenus et ressources non visibles au premier abord par l’internaute.
Concrètement, cette technique est principalement utilisée pour différer le chargement des images et vidéos qui sont situées sous la ligne de flottaison.
Cette pratique permet à l’internaute de charger, à son arrivée sur le site, uniquement les éléments indispensables à l’affichage du début de la page, ce qui accélère drastiquement le temps de chargement de la page web et donc améliore nettement l’expérience utilisateur. Lorsqu’il scroll le site, les ressources sont ensuite chargées automatiquement à mesure qu’il défile et parcours le site vers le bas.
Quand on sait que 57% des internautes quittent un site s’il met plus de 3 secondes à se charger, on comprend très vite pourquoi cette optimisation permettant la réduction du temps de chargement est mise en place sur toujours plus de sites.
Mais voilà, pour Google, il peut y avoir un hic.
En effet, si le lazy loading est mal mis en place et configuré, cette technique peut avoir un impact néfaste sur le référencement naturel (SEO) du site en question.
Le report du chargement des contenus non critiques ou non visibles au premier abord par l’internaute peut avoir un effet néfaste sur le référencement si :
En d’autres termes, si des éléments critiques sont intégrés dans un lazy loading qui ne laisse pas Google parcourir les éléments qui sont masquées, le moteur de recherche peut indirectement pénaliser le site dans les résultats de recherche car il ne disposera pas de toutes les cartes en mains pour évaluer la page et le site.
Vous l’aurez compris, Google vient officiellement de dévoiler un nouveau guide dédié à la mise en place et la bonne configuration du lazy loading afin que Google puisse toujours bien crawler l’intégralité du site, ses medias et le contenu de ses pages.
Pour le moment encore peu détaillé, ce dernier guide revient sur 3 points importants :
Inutile de charger le contenu qui n’est pas visible par l’internaute au premier abord. Google recommande de charger les ressources lourdes à charger uniquement lorsqu’elles sont proches d’être visibles par l’internaute.
Il est possible de configurer le lazy loading pour que les images commencent à se charger quelques dizaines de pixels avant que l’internaute n’arrive sur ces dernières pour que l’expérience utilisateur soit totalement fluide.
Le chargement paginé est important pour les utilisateurs car il leur permet de partager, de s’engager et/ou de parcourir l’intégralité de votre contenu (ou de vos produits pour un e-commerce). Pour Google, le lazy loading paginé lui permet de découvrir les liens spécifiques vers toutes les pages de votre site ainsi que tous les médias et le contenu associés.
Plutôt que de limiter Google aux seuls éléments chargés en haut de la page, cette méthode lui permet de tout découvrir et parcourir (crawler).
Pour que votre lazy loading soit efficace en SEO, vous l’aurez compris, vous allez devoir configurer une pagination pour toutes vos pages concernées par le lazy loading (c’est particulièrement intéressant pour les catégories de produits en e-commerce) par exemple. Une fois la pagination configurée, vous devrez rendre crawlable (par Google au minimum) les liens des pages de pagination.
Google recommande l’utilisation de l’API History pour la mise à jour automatique de l’URL lorsque l’internaute défile suffisamment la page pour arriver aux pages de pagination.
Concrètement, Google recommande que l’URL change à mesure que l’internaute scroll votre contenu paginé et lazy loadé (ceci ne nécessite pas un rechargement de la page à chaque fois, c’est (et doit être) transparent pour l’internaute).
Après avoir configuré votre lazy loading, vous devez absolument vous assurer que Google pourra bien parcourir l’intégralité des pages et médias de votre site.
Pour ce faire, utilisez le script Puppeteer pour tester localement sur votre serveur de preprod votre implémentation. Le script Puppeteer est une bibliothèque Node.js permettant de contrôler le fonctionnement sans passer par Chrome. Pour exécuter le script, vous aurez absolument besoin de Node.js.
Utilisez les commandes suivantes pour extraire le script et l’exécuter :
git checkout https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h
Une fois les commandes réalisées sur le serveur de preprod avec le lazy loading de configuré.
Un screenshot de la page sera automatiquement généré et il ne restera plus qu’à le parcourir pour vérifier que les éléments importants ne sont pas masqués par la configuration du lazy loading (rapprochez-vous de votre admin système, d’un développeur et d’un expert SEO pour cela).
Si le résultat est satisfaisant, bravo, vous en avez terminé avec la configuration de votre lazy loading SEO friendly.
Voilà.
Publié le 06 Novembre dernier, cette nouvelle documentation de Google sur le lazy loading est une première ébauche qui sera bientôt plus détaillée (si l’on en croit le tweet de l’un des développeurs de Google ayant travaillé sur le sujet).
Si vous êtes développeurs et recherchez un guide complet et technique pour mettre en place le lazy loading des images et des vidéos sur un site internet, il vous suffit de consulter ce guide très complet rédigé par les développeurs de Google :
Ce guide vous propose un certain nombre d’extrait de code et lignes de commande pour configurer le tout sur n’importe quel site et serveur.
Ce dernier guide très technique s’adresse avant tout aux développeurs.
Fondateur de LEPTIDIGITAL et consultant SEO senior (à mes heures perdues), je suis un grand passionné de marketing digital et de SEO. Avant d’être indépendant à 100 %, j’ai travaillé en tant qu’SEO manager et responsable e-commerce pour différentes sociétés (Altice Media, Infopro Digital, Voyage Privé, Groupe ERAM). (Sur le plan perso, je suis un grand curieux hyperactif aussi passionné par l’IA, la photographie et les voyages !). PS : Si vous souhaitez me contactez, privilégiez LinkedIn ou Instagram. Pour me contacter : [email protected]