Critical rendering path – Comment définir le chemin de rendu critique ?

Qu’est-ce que le chemin de rendu critique ?

Le chemin critique de rendu est l’ensemble des étapes réalisées entre le moment où votre navigateur reçoit une réponse HTML d’un serveur, et la peinture de la page web demandée. Dans cet article, je vais décomposer le processus pour qu’il soit un peu plus précis, tout en fournissant quelques conseils pour optimiser chacune des étapes.

Pour que cela se produise, les fichiers HTML, CSS et JavaScript doivent être analysés. Les étapes nécessaires au rendu comprennent : ” construire le modèle d’objet “, ” construire et peindre la mise en page ” et ” ajouter de l’interactivité avec JavaScript “.

Ce processus est essentiel, car il détermine la vitesse de chargement de votre page Web.

Il est communément admis que la vitesse de votre site Web est essentielle lorsqu’un moteur de recherche détermine le classement des SERPs. Plus la vitesse est rapide, plus le classement est élevé, et plus le classement est élevé, plus le trafic est important. La vitesse de chargement du site est également importante lorsqu’un visiteur atteint votre site. Elle peut affecter les taux de conversion et de rebond du site. Le chemin de rendu critique est parfois optimisé pour faire perdre quelques secondes de chargement à votre site. Chaque seconde qui est réduite de la vitesse de votre site est une victoire.

La séquence Critical Rendering Path

Voici la séquence des étapes effectuées par le navigateur pour rendre une page :

  • Tout d’abord, le navigateur télécharge et analyse le code HTML et construit le DOM.
  • Ensuite, il télécharge et traite le balisage CSS et construit le Modèle Objet CSS
  • Il combine les nœuds DOM et CSSOM nécessaires au rendu de la page dans l’arbre de rendu, qui est une structure arborescente de tous les nœuds visibles.
  • Il calcule les dimensions et la position de chaque objet de la page.
  • Enfin, il peint les pixels sur l’écran.

 

Comment optimiser le chemin de rendu critique ?

Pour optimiser le chemin de rendu critique, il faut suivre ces quelques étapes :

  • Analysez votre site Web et trouvez les ressources clés qui sont nécessaires pour l’affichage initial.
  • Puisque la page charge d’abord son contenu au-dessus du pli, vous pouvez supprimer ou reporter les éléments qui ne sont pas nécessaires à cette étape.
  • Réduisez la taille de la page autant que possible en compressant et en optimisant les ressources.
  • Compressez ou optimisez vos images principales.
  • Concentrez-vous uniquement sur quelques images et non sur la totalité de votre site. Ne retenez que les images qui sont essentielles et doivent être visibles dans le contenu hors-texte.
  • Fichiers JavaScript. Travaillez les fichiers JavaScript de la même manière que les images : choisissez d’abord les données qui apparaîtront en haut de la page.
  • Fichiers CSS. Essayez de rendre votre document CSS aussi petit que possible. Optimisez-le pour obtenir un temps de rendu plus rapide.

 

L’optimisation du chemin de rendu critique

Le temps nécessaire pour exécuter l’ensemble du processus peut être variable. Il dépend de nombreux facteurs tels que la taille du document, le nombre de requêtes, les styles appliqués, le périphérique de l’utilisateur, etc.

L’une des recommandations les plus pertinentes de Google est de donner la priorité au contenu visible afin de rendre le Above the Fold aussi rapidement que possible, et fournit deux règles principales à suivre :

  • Structurer le HTML pour charger en premier le contenu critique, au-dessus du pli.
  • Réduire la quantité de données utilisées par les ressources HTML, CSS et JS.

 

Si la quantité de données nécessaires au rendu de l’ATF dépasse la fenêtre de congestion initiale (14,6 ko), elle nécessitera des allers-retours supplémentaires sur le réseau entre le serveur et le navigateur. Sur les réseaux mobiles, avec des latences élevées, cela retarderait considérablement le chargement de la page (pour en savoir plus sur la latence).

Le navigateur construit le DOM de manière incrémentielle, ce qui nous donne la possibilité de réduire le temps nécessaire au rendu de l’ATF en structurant le HTML de manière à charger d’abord le contenu au-dessus du pli et à différer le reste de la page.

Mais l’optimisation ne s’arrête pas à la construction d’une structure DOM efficace. Il s’agit plutôt d’un processus d’amélioration et de mesure qui implique l’ensemble de la séquence Critical Rendering Path.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *