Chemin de rendu critique

Le chemin de rendu critique correspond à la séquence d'étapes qu'un navigateur doit effectuer entre la réception d'une page et son affichage à l'écran. Il comprend l'analyse du balisage pour obtenir la structure du document, l'analyse des feuilles de style pour obtenir une structure de style, la combinaison des deux dans un arbre de rendu, le calcul de la mise en page et l'affichage du résultat. Comprendre ce chemin permet de comprendre pourquoi certaines ressources retardent l'affichage initial du contenu, tandis que d'autres non.

Les feuilles de style bloquent le rendu par conception ; il s’agit d’un comportement délibéré et non d’un défaut. Un navigateur qui afficherait le contenu avant que les styles ne soient disponibles afficherait un contenu sans style, puis procéderait à un réagencement, ce qui est pire qu’un bref délai. Concrètement, chaque feuille de style référencée dans l’en-tête du document doit être téléchargée et traitée avant que quoi que ce soit ne s’affiche. Ainsi, le nombre, la taille et la vitesse de chargement des feuilles de style déterminent directement le moment où la page devient visible.

Les scripts bloquent l'analyseur syntaxique, sauf indication contraire, ce qui constitue l'autre source majeure de délai. Un script synchrone rencontré lors de l'analyse interrompt la construction du document jusqu'à son téléchargement et son exécution, car il peut le modifier. Marquer les scripts comme différés permet à l'analyse de se poursuivre et de les exécuter une fois le document terminé ; les marquer comme asynchrones permet leur exécution dès leur arrivée. Choisir l'attribut approprié pour chaque script est l'une des améliorations les plus économiques.

Raccourcir le chemin d'exécution implique de réduire à la fois le nombre d'allers-retours et le travail requis à chaque étape. L'intégration directe des styles nécessaires à la fenêtre d'affichage initiale supprime complètement une requête bloquante, le reste étant chargé sans blocage. Le report des scripts non requis pour le premier rendu, la minimisation et la compression des ressources, ainsi que la suppression des redirections qui ajoutent des allers-retours complets avant même le début du traitement, contribuent à réduire le temps écoulé avant le premier affichage.

Les indications de ressources permettent au navigateur de démarrer le traitement plus tôt que ne le permettrait la découverte automatique. Le préchargement signale qu'une ressource découverte tardivement dans le document, comme une police référencée dans une feuille de style ou une image d'en-tête appliquée via CSS, sera nécessaire ; le téléchargement commence donc immédiatement. La préconnexion établit des connexions aux serveurs tiers à l'avance, éliminant ainsi la surcharge liée à la connexion et à la négociation au moment critique. Utilisées judicieusement, ces techniques sont utiles ; utilisées sans discernement, elles consomment de la bande passante et aggravent la situation.

Les polices méritent une attention particulière car elles sont intégrées au processus de chargement et sont découvertes tardivement. Le téléchargement d'une police web référencée dans une feuille de style ne peut commencer qu'une fois cette feuille de style traitée, et selon la stratégie d'affichage, le texte peut rester invisible jusqu'à son arrivée. Précharger les polices utilisées au-dessus de la ligne de flottaison, choisir une stratégie d'affichage qui affiche immédiatement le texte de remplacement et adapter les paramètres de ce texte pour réduire le recalcul de la mise en page permettent de résoudre ce problème.

Le rendu côté client allonge considérablement le processus, d'où la nécessité de mesures d'atténuation spécifiques. Lorsque le document initial est vide et que tout doit être construit par JavaScript, le processus inclut le téléchargement, l'analyse et l'exécution du bundle, puis la récupération des données, avant tout affichage. Le rendu côté serveur ou la génération statique renvoie un contenu exploitable au chemin initial ; il s'agit d'une solution structurelle plutôt que d'une optimisation.

Étant donné que le chemin d'accès est déterminé par la manière dont la page est construite et diffusée, les améliorations nécessitent généralement des modifications de modèle et de compilation plutôt que de configuration. En pratique, cette analyse se situe au sein de performances web Le travail, la mise en œuvre est assurée par le développement de produitset lorsque la méthode de rendu d'un site constitue la contrainte sous-jacente, la discussion devient une question architecturale sur la manière dont les pages sont produites plutôt qu'un exercice de réglage.