Qu'est-ce que le chemin critique de rendu des pages web?

Il s'agit d'une séquence d'étapes que le navigateur effectue pour afficher le contenu de la page à l'écran, en commençant par la récupération du document HTML. Cela inclut :

1. Construction du DOM (Document Object Model) : Analyse du code HTML et création d'un arbre d'objets représentant la structure du document.
2. Construction du CSSOM (CSS Object Model) : Analyse des fichiers CSS et des styles en ligne pour créer un arbre d'objets représentant les styles des éléments.
3. Construction de l'arbre de rendu : Fusion du DOM et du CSSOM. Un arbre ne contenant que les éléments à rendre avec leurs styles appliqués est créé.
4. Layout (ou Reflow) : Définition des dimensions géométriques et de la position de chaque élément sur la page.
5. Paint (ou Repaint) : Remplissage des pixels à l'écran basé sur l'arbre de rendu et les données de layout.

L'optimisation du chemin critique de rendu vise à ce que le navigateur affiche le premier contenu significatif (First Meaningful Paint) ou l'interactivité (Time to Interactive) aussi rapidement que possible. Cela est réalisé en minimisant les ressources bloquantes (JS et CSS), en optimisant la taille des ressources et leur chargement au bon moment.