Chargement paresseux et XPath

Analyse du chargement paresseux avec xpath par Screaming Frog

Analyse du chargement paresseux

Cet aperçu commence par un tweet de Jonattan Moore qui partage avec la communauté Seo comment scanner des images dans Lazy Loading en utilisant XPath de Screaming Frog.

Lazy loading analisi con screaming frog

Chargement paresseux des images

Commençons par comprendre ce qu’est le Lazy Loading afin d’apprécier pleinement le travail de Jonathan.

Vous savez, lorsque vous naviguez sur une page web et que de nouvelles images apparaissent au fur et à mesure que vous défilez vers le bas ?

Cette fonctionnalité est appelée “Lazy Loading” et correspond à un chargement “à la demande” qui n’a lieu que lorsque la navigation de l’utilisateur le demande. Elle est utilisée pour tous les éléments qui affecteraient les performances de la page s’ils étaient traités en premier lieu avec le reste des éléments dans le fil d’exécution principal (cela affecterait également le Core Web Vitals).

La vitesse de chargement étant l’un des piliers du classement dans les moteurs de recherche, cette stratégie qui offre une meilleure expérience à l’utilisateur doit être absolument prise en considération.

Lazy Loading et Google

Cette stratégie est donc conseillée pour tous les sites web afin d’améliorer l’expérience utilisateur des internautes, mais que pense Leader Maximo Google de cette mise en œuvre ?

Google est d’accord avec cette mesure, mais recommande d’être très prudent dans la mise en œuvre afin de ne pas empêcher le robot d’explorer les ressources chargées via le “Lazy Loading”, faute de quoi il pourrait ne pas les indexer.

En résumé, le moteur de recherche approuve cette technique mais demande à s’assurer qu’il peut voir toutes les ressources à évaluer dans l’indexation. Pour mieux comprendre ce que demande Google, je vous invite à lire son guide dédié : Assurez-vous que Google peut voir le contenu chargé paresseusement.

Les aspects que tout développeur doit prendre en compte sont essentiellement au nombre de trois :

  • Charger le contenu lorsqu’il est visible dans la fenêtre de visualisation: pour permettre à Google Bot d’effectuer un balayage complet de la page, assurez-vous que le chargement paresseux charge tout le contenu lorsqu’il est visible dans la fenêtre de visualisation à l’aide de l’API IntersectionObserver et d’un polyfill.
  • Dans le cas d’un“défilement infini“, prendre en charge le chargement “paginé”.
  • Testez le bon fonctionnement du Lazy Loading: vous pouvez utiliser un script tel que Puppeteer, une bibliothèque Node.js directement en local pour vérifier que les captures d’écran générées par le script montrent bien tout le contenu de la page.

*Source : https://blog.tagliaerbe.com/lazy-loading/

Audit du chargement paresseux

Une fois que nous avons compris les lignes générales relatives au Lazy Loading des images, nous profitons de la fonction Custom Extraction de Screaming Frog pour faire un audit de l’ensemble des images d’une page et de celles qui ne sont chargées que par le biais du chargement à la demande.

Pour en savoir plus sur la fonction d’extraction personnalisée de Seo Spider, cliquez ici.

Vous trouverez ci-dessous les chemins XPath partagés par Jonathan Moore pour l’extraction personnalisée.

Pour faciliter leur utilisation, je les présente sous forme de texte :

Copy to Clipboard

En utilisant ces paramètres, vous pouvez obtenir les résultats suivants directement dans l’onglet “Custom Extraction” de Screaming Frog, divisés par colonnes et disponibles pour vos analyses d’optimisation.

Seo Spider Tab