Le chemin critique du rendu, comment ça marche? [Performance web 3/6]

Comprendre et mesurer le chemin critique du rendu une priorité de la performance web

Cet article est basé sur ce guide : https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=en écrit par Ilya Grigorik, également disponible en français.

Dans l'article précédent, nous avons mis en place des solutions (open-source) afin d'améliorer le temps de réponse d'un serveur Web. Nos systèmes de caches sont prêts et nos assets (fichiers JS, CSS ...) sont minifiés & packés. Comment peut-on aller plus loin dans l'optimisation du temps de chargement de nos pages web ?

Connaître le principe du rendu d’une page permet de mieux comprendre le processus du rendu d’un navigateur.
L’étape intermédiaire entre la réception de la réponse du serveur Web et l’affichage de la page sous forme de pixels à l'écran est appelé chemin critique du rendu.
Optimiser le chemin critique du rendu est indispensable pour améliorer la vitesse de chargement des pages.

Rendu d’une page web

Source Schéma : Ilya Grigorik

Avant que le navigateur puisse afficher la page, le balisage HTML est transformé en DOM (Document Object Model, ou modèle d'objet de document) et le balisage CSS est transformé en CSSOM (modèle d’objet CSS) de façon indépendante.

×

Le DOM (modèle d'objet de document)

Le DOM représente le contenu de la page (texte, image, média, formulaires...) sous forme d'arborescence.
Chaque fois que le navigateur traite le balisage HTML renvoyé par le serveur Web, il doit suivre les étapes ci-dessous :

1. Convertir les octets en caractères
2. Identifier les jetons
3. Convertir les jetons en objets/nœuds avec leurs propriétés et règles
4. Créer l'arborescence du DOM (relations entre les balises + relation parent-enfant)

 Après la construction du DOM, nous avons les informations sur le contenu de la page, néanmoins nous n’avons aucune information sur l'aspect que doivent avoir les éléments lorsqu'ils sont affichés.

Le CSSOM (modèle d'objet CSS)

Pendant la construction du DOM, le navigateur rencontre des balises faisant référence à une feuille de style CSS, le plus souvent externe.
Cette ressource étant nécessaire pour afficher la page, on envoie donc une demande pour cet asset.

Lors de l'interprétation des feuilles de style, le navigateur va construire une autre arborescence qui intègre les informations sur les styles de la page (disposition, apparence...).
Cette arborescence est appelée le modèle objet CSS (ou CSSOM pour CSS Object Model).

Pour que le navigateur puisse construire le CSSOM, il doit effectuer les mêmes étapes que celles mises en place pour créer le DOM : Octets CSS > caractères > jetons > nœuds > CSSOM

Construction, mise en page et peinture de l'arborescence du rendu

Il s’agit maintenant de combiner le DOM et le CSSOM pour créer une arborescence d’affichage qui sera utilisée pour calculer la mise en page de chaque élément.
Cette arborescence du rendu est ce qui permet au navigateur de transformer le contenu de la réponse en pixels à l'écran.

Récapitulatif des 3 grandes étapes du rendu d’une page web :

1. Le parsing : on construit de l’arborescence du rendu (fusion du DOM et du CSSOM).
2. Le layout : le navigateur calcul la disposition de chaque élément.
3. Le paint : on dessine les pixels qui constituent la page.

Ordre du rendu

À chaque requête, avant de faire le rendu, le navigateur :

• construit le DOM (comme vu au début de l'article)
• construit le CSSOM (cf ci-dessus)
• exécute le JS (s'il rencontre un script)
• reconstruit le DOM (si JS synchrone, car ce dernier peut effectuer des changements sur le contenu de la page) 

Ces étapes constituent le chemin critique du rendu

Source schéma : https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

×

Ces étapes permettent d'en extraire les règles suivantes :

• La génération du CSSOM bloque le rendu (tout le CSS doit être téléchargé et interprété).
• L'exécution du JS est bloqué par le CSS (s’il n’est pas async) car le JS a besoin du CSSOM.
• Le JS inline bloque la construction de la page.
• Les images ne bloquent pas le rendu (Elles bloquent le Time To Interactive, c'est-à-dire le moment où l'utilisateur peut, par exemple, cliquer sur des liens, des boutons...).

Métriques importantes

3 métriques permettent d’analyser le chemin critique du rendu d’une page web :

1. Le nombre de ressources critiques (nombre de HTML, CSS, JS présent sur une page)
2. La longueur du chemin critique du rendu (ce nombre, représenté en nombre de ressources, constituent le nombre de boucles pour récupérer toutes les ressources critiques de la page, sachant que certaines ressources seront demandées en parallèle).
3. Le poids du chemin critique du rendu (en octets)

Par exemple, sur le schéma ci-dessus :

• Le nombre de ressources critiques est de 3 (le fichier HTML, le fichier JS et le fichier CSS).
• La longueur du chemin critique est de 2 (car le JS et le CSS sont demandées en parallèle).
• Le poids total du chemin critique du rendu est de 11Ko.

Maintenant que nous avons une méthode pour mesurer le rendu d'une page, nous savons maintenant que pour optimiser le temps de chargement de nos pages, nous devons réduire ces valeurs.

La mise en cache, le packing et la minification abordés dans l'article précédent (Améliorez vos performances web 2/5) contribuent à réduire ces métriques :

• Les systèmes de cache permettent de réduire le temps que met le serveur à servir les ressources d’un site web => on réduit (indirectement) la longueur du chemin critique.
• Le packing et la minification des assets réduit la longueur et le poids des ressources critiques.

Dans notre prochain article nous mettrons en place des méthodes pour réduire systématiquement ces métriques grâce notamment auPattern PRPL...