Dans un épisode récent du podcast Search Off The Record, il a été révélé que le système de rendu de Google fait désormais semblant d'être « inactif » pour déclencher certains événements JavaScript et améliorer le rendu des pages Web.
- Le robot d'exploration Web de Google simule l'inactivité pour déclencher du JavaScript.
- Googlebot utilise l'astuce "Idle" pour améliorer le rendu des pages Web.
- La gestion des erreurs est cruciale pour éviter les problèmes de chargement.
- Les professionnels du référencement doivent surveiller le rendu et collaborer avec les développeurs.
Le podcast présente Zoe Clifford de l'équipe de rendu de Google, qui a expliqué comment les robots d'exploration Web de l'entreprise traitent les sites basés sur JavaScript.
Cette révélation est éclairante pour les développeurs Web qui utilisent de telles méthodes pour différer le chargement du contenu.
L'astuce « Idle » de Google
Googlebot simule des états « inactifs » pendant le rendu, ce qui déclenche des événements JavaScript comme requestIdleCallback.
Les développeurs utilisent cette fonction pour différer le chargement du contenu moins critique jusqu'à ce que le navigateur soit libre d'autres tâches.
Avant ce changement, le processus de rendu de Google était si efficace que le navigateur était toujours actif, ce qui empêchait certains sites Web de charger du contenu important.
Clifford a expliqué :
« Il y avait un certain site Web de vidéos populaire que je ne nommerai pas… qui différait le chargement de tout contenu de page jusqu'à ce que requestIdleCallback soit déclenché. »
Étant donné que le navigateur n'était jamais inactif, cet événement ne se déclenchait pas, empêchant une grande partie de la page de se charger correctement.
Simulation de temps d'inactivité pour améliorer le rendu
Google a mis en place un système dans lequel le navigateur fait semblant d'être inactif périodiquement, même lorsqu'il est occupé à afficher des pages.
Ce réglage garantit que les rappels inactifs sont déclenchés correctement, permettant aux pages de charger entièrement leur contenu pour l'indexation.
Importance de la gestion des erreurs
Clifford a souligné l’importance pour les développeurs de mettre en œuvre une gestion élégante des erreurs dans leur code JavaScript.
Les erreurs non gérées peuvent entraîner des pages vierges, des redirections ou du contenu manquant, ce qui a un impact négatif sur l'indexation.
Elle a conseillé :
« S’il y a une erreur, j’essaie simplement de la gérer le plus élégamment possible… le développement Web est un domaine difficile. »
Qu'est-ce que cela signifie?
Conséquences pour les développeurs Web
- Gestion des erreurs avec élégance:La mise en œuvre d'une gestion des erreurs élégante garantit que les pages se chargent comme prévu, même si certains éléments de code échouent.
- Utilisation prudente des rappels inactifs:Bien que Google se soit adapté pour gérer les rappels inactifs, méfiez-vous de trop vous fier à ces fonctions.
Conséquences pour les professionnels du référencement
- Surveillance et tests: Implémentez une surveillance et des tests réguliers du site Web pour identifier les problèmes de rendu susceptibles d’avoir un impact sur la visibilité de la recherche.
- Collaboration entre développeurs:Collaborez avec votre équipe de développement pour créer des sites Web conviviaux et optimisés pour les moteurs de recherche.
- Apprentissage continu:Restez informé des derniers développements et des meilleures pratiques dans la manière dont les moteurs de recherche gèrent JavaScript, affichent les pages Web et évaluent le contenu.
Voir également: Google affiche toutes les pages pour la recherche, y compris les sites utilisant beaucoup de JavaScript
Autres sujets liés au rendu abordés
La discussion a également abordé d’autres sujets liés au rendu, tels que les défis posés par la détection de l’agent utilisateur et la gestion des redirections JavaScript.
L'ensemble du podcast fournit des informations précieuses sur le rendu Web et les étapes suivies par Google pour évaluer les pages avec précision.
Voir également: Google affiche toutes les pages pour la recherche, y compris les sites utilisant beaucoup de JavaScript
Image en vedette : fizkes/Shutterstock
FAQ
Qu'est-ce que le lazy loading ?
Le lazy loading est une technique de programmation qui consiste à différer le chargement de certains éléments (comme des images ou des vidéos) jusqu'à ce qu'ils soient nécessaires. Cela permet d'optimiser la vitesse de chargement d'une page et ainsi améliorer l'expérience utilisateur. Le contenu non essentiel est chargé uniquement lorsque l'utilisateur l'active, par exemple en faisant défiler la page ou en cliquant sur un bouton.
Cette méthode évite de surcharger la mémoire et réduit les temps de chargement inutiles, notamment sur les appareils mobiles avec une connexion internet plus faible.
Qu'est-ce que le lazy_load ?
Le lazy_load est une méthode de chargement progressif d'un site web ou d'une application. Cela signifie que les éléments tels que les images, vidéos ou blocs de contenu ne sont pas tous chargés en même temps, mais uniquement lorsqu'ils sont nécessaires à l'utilisateur.
Cette technique permet d'améliorer le temps de chargement et la fluidité du site pour une meilleure expérience utilisateur. Elle est souvent utilisée pour optimiser les performances sur les appareils mobiles avec des connexions internet moins rapides.
Comment activer le lazy-loading ?
3. Ensuite, il suffit généralement d'ajouter un code dans le fichier functions.php de son thème ou de configurer les paramètres de son plugin afin d'activer le lazy-loading. 4. Il est également important de procéder à des tests pour s'assurer que le lazy-loading fonctionne correctement sur toutes les pages et tous les éléments du site.
Comment importer le module lazy_loader en tant que 'lazy' ?
3. Il est également possible de renommer le module au moment de l'importation en utilisant "as" suivi du nom souhaité, par exemple
: "import from lazy_loader import LazyLoader as ll". 4. Une fois importé et renommé, on peut accéder à toutes les fonctions et classes du module à travers son nouveau nom défini lors de l'importation (dans cet exemple, ll).Comment mettre en place le lazy loading ?
Pour mettre en place le lazy loading, il faut d'abord identifier les éléments à charger de manière différée. Ensuite, il est nécessaire de mettre en place un mécanisme de détection du scroll pour activer le chargement progressif des contenus.
Il est également important d'optimiser la taille et le poids des images pour réduire les temps de chargement. Enfin, il peut être utile d'utiliser des bibliothèques ou plugins spécifiques pour faciliter la mise en place du lazy loading sur son site ou application web.
