Corriger le contenu au chargement différé

Le report du chargement de contenu non critique ou non visible au premier abord, également appelé "chargement différé", est une technique courante destinée à optimiser l'expérience utilisateur. Pour en savoir plus, consultez le guide des images et des vidéos au chargement différé disponible sur le site Web Fundamentals. Toutefois, si cette technique est mal appliquée, elle risque d'empêcher indirectement Google de voir un contenu. Cet article explique comment s'assurer que Google peut explorer et indexer le contenu au chargement différé.

Charger le contenu lorsqu'il est visible dans la fenêtre d'affichage

Pour être sûr que Google voit tout le contenu de votre page, vérifiez que la mise en place du chargement différé entraîne bien le chargement de l'ensemble du contenu pertinent chaque fois qu'il est visible dans la fenêtre d'affichage. Voici quelques exemples d'approches que vous pouvez adopter :

Assurez-vous de tester votre implémentation.

Configurer le chargement paginé pour le défilement infini

Si vous mettez en place le défilement infini, veillez à configurer le chargement paginé. Ce dernier est important pour les utilisateurs, car il leur permet de partager et de parcourir tout votre contenu. Le chargement paginé permet également à Google d’afficher un lien vers un point spécifique du contenu, plutôt qu'en haut d’une page à défilement infini.

Pour mettre en place le chargement paginé, fournissez un lien unique vers chaque section que les utilisateurs peuvent partager et charger directement. Nous vous recommandons d'utiliser l'API History pour mettre à jour l'URL lorsque le contenu est chargé de manière dynamique.

Tester

Une fois que vous avez configuré le chargement paginé, assurez-vous qu'il fonctionne correctement. Pour ce faire, utilisez un script Puppeteer pour tester localement cette configuration. Puppeteer est une bibliothèque Node.js permettant de contrôler le fonctionnement sans passer par Chrome. Pour exécuter le script, vous aurez besoin de Node.js. Utilisez les commandes suivantes pour extraire le script et l'exécuter : 

git clone 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 générées afin de vous assurer qu'elles comportent tout le contenu qui doit être visible et indexé par Google.

Vous pouvez également utiliser l'outil d'inspection d'URL de la Search Console pour déterminer si toutes les images ont été chargées. Vérifiez bien la capture d'écran et le rendu du code HTML.