Les conseils de Google pour bien implémenter le Lazy loading - Arobasenet.com


Les conseils de Google pour bien implémenter le Lazy loading

Google a créé un document qui offre des conseils aux référenceurs SEO sur l'implémentation du Lazy loading ou chargement paresseux pour les images et la vidéo.

Les conseils de Google pour bien implémenter le Lazy loading



Le chargement différé fait référence à la technique du report du chargement du contenu non critique ou non visible.

Le Lazy loading est considéré comme une bonne pratique qui permet d'améliorer la vitesse de chargement de la page. Cependant, s’il n'est pas mis en œuvre correctement, il pourrait masquer le contenu important de la vue de Google.

C'est pourquoi Google a créé un document d'aide sur le Lazy loading qui explique comment s'assurer qu'il peut analyser et indexer le contenu à chargement différé.

Google a créé un document d'aide sur le Lazy loading qui explique comment s'assurer qu'il peut analyser et indexer le contenu à chargement différé.


Ce document est juste un aperçu de la première version et il y aura éventuellement plus de détails ajoutés ultérieurement.





S'assurer que Google peut voir le contenu en Lazy loading


Voici les conseils de Google pour implémenter le Lazy loading :

Chargez le contenu lorsqu'il est visible dans la fenêtre d'affichage à l'aide de l'API IntersectionObserver et d'un Polyfill.

Cela permettra à Google de voir tout le contenu sur la page.

Recommandations pour le Scroll (défilement) infini


  • Supportez le chargement de la pagination lors de l'utilisation d'une expérience de défilement infini.

  • Le chargement paginé peut être pris en charge en fournissant un lien unique à chaque section que les utilisateurs peuvent partager et charger directement.

  • Google recommande spécifiquement l'utilisation de l'API History pour mettre à jour l'URL lorsque le contenu est chargé dynamiquement.


Tester le chargement différé


Après avoir configuré votre implémentation, vous devez vous assurer qu'elle fonctionne correctement.

Une façon de le faire est d'utiliser un Puppeteer Script pour tester localement votre mise en œuvre.

Puppeteer est une bibliothèque “node.js” pour le contrôle Headless Chrome (navigateur sans tête, et donc sans interface graphique).

Pour exécuter le script, vous aurez besoin de télécharger 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 

Après avoir exécuté le script, examinez manuellement les captures d'écran des images qu'il a créées pour vous assurer qu'elles contiennent tout le contenu important que vous attendez d'être visible et indexé par Googlebot.

Reconnaissons que tout cela est bien trop technique pour le commun des référenceurs SEO, à moins d’être développeurs dans l’âme.