Lazy loading et XPath.

Le lazy loading et le SEO

Ce guide part d’un tweet de Jonathan Moore, qui a partagé avec la communauté SEO comment crawler les images en lazy loading grâce aux XPath de Screaming Frog.

Le lazy loading des images

Commençons par comprendre ce qu’est le lazy loading pour apprécier pleinement le travail de Jonathan.

Tu vois quand tu parcours une page web et que de nouvelles images apparaissent au fur et à mesure que tu descends ?

C’est le « lazy loading » : un chargement « à la demande », exécuté seulement quand la navigation de l’utilisateur le requiert. Il sert pour tous les éléments qui pénaliseraient les performances de la page s’ils étaient chargés d’emblée avec le reste dans le thread principal (avec un impact aussi sur les Core Web Vitals).

La vitesse de chargement étant l’un des piliers du classement, cette stratégie qui améliore l’expérience de navigation mérite toute ton attention.

Le lazy loading et Google

Cette stratégie est donc conseillée pour tous les sites afin d’améliorer l’expérience utilisateur. Mais qu’en pense Google ?

Google l’accepte, mais met en garde : il faut être très attentif à l’implémentation pour ne pas empêcher le robot de crawler les ressources chargées en lazy loading, sinon il risque de ne pas les indexer.

En résumé, le moteur approuve cette technique mais demande de s’assurer qu’il peut voir toutes les ressources à évaluer pour l’indexation. Pour bien comprendre ce que demande Google, lis son guide dédié : Make sure Google can see lazy-loaded content.

Chaque développeur doit essentiellement considérer 3 points :

• Charger le contenu quand il est visible dans le viewport : pour que Googlebot crawle toute la page, assure-toi que le lazy loading charge tout le contenu dès qu’il est visible dans le viewport, avec l’API IntersectionObserver et un polyfill.
• En cas de « scroll infini », prévois un chargement paginé en complément.
• Tester le bon fonctionnement du lazy loading : tu peux utiliser en local un script comme Puppeteer, une bibliothèque Node.js, pour vérifier que les captures générées montrent tout le contenu de la page.

Source : Tagliaerbe, Lazy loading (en italien)

Auditer le lazy loading avec Screaming Frog

Configurer la Custom Extraction

Maintenant que les principes du lazy loading des images sont clairs, utilisons la fonction Custom Extraction de Screaming Frog (1Configuration›2Custom›3Custom Extraction) pour auditer l’ensemble des images d’une page et celles chargées à la demande.

Voici les XPath partagés par Jonathan Moore pour la Custom Extraction.

1234

1Nom de l’extracteurIl devient le nom de la colonne dans les résultats.2Expression XPathLa fonction count() qui compte les images.3Function ValueRenvoie le résultat de la fonction, ici un nombre.4AddAjoute un nouvel extracteur.

Pour les copier facilement, les voici en texte :

1) All images
-----------
count(//img)

-----------
2) All lazy-loaded images
-----------
count(//img[contains(@loading,'lazy') or contains(@class,'lazy') or contains(@class,'lazyloaded')])

-----------
3) Images not lazy-loaded
-----------
count(//img[not(contains(@loading,'lazy') or contains(@class,'lazy') or contains(@class,'lazyloaded'))])

-----------
4) Loading lazy attribute
-----------
count(//*[contains(@loading, 'lazy')])

-----------
5) Lazy class
-----------
count(//*[contains(@class, 'lazy')])

-----------
6) Lazyloaded class
-----------
count(//*[contains(@class, 'lazyloaded')])

-----------
7) Data-lazy attribute
-----------
count(//@*[contains(name(),'data-lazy')])

Source : configuration de Jonathan Moore sur GitHub.

Lire les résultats

Avec ces paramètres, tu obtiens les résultats suivants directement dans l’onglet 1Custom Extraction de Screaming Frog, répartis en colonnes et prêts pour tes analyses d’optimisation.

123

1Custom ExtractionL’onglet des résultats.2Images totales et lazyAll Images, Lazy-Loaded Images et Non-Lazy-Loaded Images.3Attributs de lazy loadingQuelle technique est utilisée : loading=lazy, classes lazy, data-lazy.