Sommaire
Qu’est-ce que le rendu ?
Le rendu est le processus par lequel Googlebot récupère vos pages, exécute votre code et évalue votre contenu pour comprendre la mise en page ou la structure de votre site.
Toutes les informations recueillies par Google au cours du processus de rendu sont ensuite utilisées pour classer la qualité et la valeur du contenu de votre site par rapport à d’autres sites et à ce que les internautes recherchent avec Google Search.
Chaque page Web possède deux états :
- Le HTML initial.
- Le HTML rendu.
Un site Web peut être très différent entre ces deux états.
Le HTML initial apparaît en premier. Il s’agit de la réponse du serveur. Il contient du HTML et des liens vers des ressources telles que JavaScript, CSS et des images qui sont nécessaires pour construire la page.
Le HTML rendu est plus largement connu sous le nom de DOM, une abréviation de Document Object Model. Chaque page Web possède un DOM. Il représente le HTML initial plus toutes les modifications apportées par le JavaScript auquel le HTML a fait appel.
Connaître la différence entre HTML et DOM est la clé pour résoudre les problèmes de référencement JS
Lorsque le contenu change entre le HTML initial et le DOM, c’est le JavaScript côté client qui change de page.
Ces changements indiquent que JavaScript est exécuté dans le navigateur de l’utilisateur. Lorsque JavaScript est exécuté dans le navigateur de l’utilisateur, nous l’appelons Client-Side Rendering (CSR).
Google ne peut indexer ce qu’il ne peut restituer
Pour être classé, nous devons être indexés. Pour être indexé, nous devons être rendus.
Si le contenu ne peut pas être rendu, il ne contribue pas à la compréhension ou à l’amélioration de votre site par Google.
Comment rendre le rendu plus efficace et moins pénible ?
- Soyez conscient de la façon dont vous diffusez le contenu
Plus vous utilisez de ressources côté client, plus il y a d’endroits où les choses peuvent mal tourner.
- Sautez la file d’attente de rendu et livrez le contenu critique dans la réponse du serveur.
JavaScript doit s’exécuter quelque part. La plupart du temps, c’est soit sur votre serveur, soit dans le navigateur de l’utilisateur.
Lorsque nous exécutons JavaScript côté serveur, nous sommes en mesure d’envoyer le résultat (le contenu rendu) à l’utilisateur dans le HTML initial.
- N’envoyez que les scripts dont vous avez besoin
En 2021, les coûts dominants des scripts sont désormais le téléchargement et le temps d’exécution du CPU.
Chaque script appelé doit être téléchargé, analysé, compilé et exécuté – qu’il contribue ou non au contenu de la page.
Google Chrome dispose d’une fonctionnalité intégrée pour vous aider à voir quelle part de votre code est utilisée.
- Donnez la priorité à l’expérience humaine plutôt qu’aux fonctions brillantes
Votre boîte de réception est probablement pleine d’offres pour essayer de nouveaux outils alimentés par l’IA avec des mesures exclusives qui classent la visibilité de votre site dans les licornes.
Si vous mesurez déjà les performances à l’aide de 15 autres pixels de suivi, un nouveau cube de narval n’est peut-être pas nécessaire.
- Images et scripts paresseux sans bloquer le rendu
Une image vaut mille mots.
Mais le problème est que 1 000 mots représentent environ 2 Ko et les images (bien plus demandées) représentent moyenne 900kbs de requêtes.
- Gardez les paquets de script petits
Si votre script fait plus de 50-100 Ko, divisez-le en plusieurs petits paquets distincts.
Plusieurs petits paquets sont plus efficaces qu’un seul gros paquet de script.
- Cache, Cache, Cache
Cette étape supplémentaire peut être facilement évitée en mettant les ressources en cache aussi longtemps que possible.
Si vous divisez votre JS en petits paquets dédiés à une fonction spécifique, il sera plus facile de les mettre en cache pendant de longues périodes.
- Les performances et le rendu sont directement liés
Google utilise Chromium pour le rendu pour un certain nombre de raisons. L’une d’entre elles est qu’il peut capturer les temps critiques – du temps au premier octet (TTFB) au temps d’interaction (TTI).
Les données qu’il saisit lors du chargement de votre page permettent d’obtenir des informations sur la convivialité de votre conception pour les mobiles et sur sa rapidité. Ces deux éléments sont des facteurs de classement.
- Rappelez-vous qu’aucun élément de technologie n’est intrinsèquement bon ou mauvais.
JavaScript est un outil et son application est efficace pour créer de riches expériences interactives et personnalisées.
