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é.
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.
🕵️♂️ Psst, hey, you... wanna get a glimpse on the first version of the lazy-loading SEO docs we've been brewing? Here yo gou: https://t.co/bhy1E4MYxB— Martin Splitt @ 🇺🇸 #SF (@g33konaut) 5 novembre 2018
📢🔜 There's more to follow! 😎
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.
