Optimiser le chemin critique du rendu consiste à prioriser l'affichage du contenu lié à l'action actuelle de l'utilisateur.
Offrir une expérience Web rapide demande beaucoup de travail de la part du navigateur. En tant que développeurs Web, nous n'avons pas accès à la majeure partie de ce travail: nous écrivons le balisage et une belle page s'affiche à l'écran. Mais comment exactement le navigateur passe-t-il de notre code HTML, CSS et JavaScript à l'affichage des pixels à l'écran ?
L'optimisation des performances consiste à comprendre ce qui se passe dans ces étapes intermédiaires entre la réception des octets HTML, CSS et JavaScript, et le traitement nécessaire pour les transformer en pixels affichés. Il s'agit du chemin critique du rendu.
En optimisant le chemin critique du rendu, nous pouvons considérablement réduire le délai de premier affichage de nos pages. En outre, comprendre le chemin critique du rendu permet également de créer des applications interactives performantes. Le processus de mise à jour interactive est le même, il s'effectue en boucle et idéalement à 60 images par seconde. Mais tout d'abord, voyons comment le navigateur affiche une page simple.
Ressources supplémentaires
- Construire le modèle d'objet
- Construction, mise en page et peinture de l'arborescence de rendu
- CSS bloquant l'affichage
- Ajouter de l'interactivité avec JavaScript
- Mesurer le chemin d'affichage essentiel
- Analyse des performances du chemin de rendu critique
- Optimiser le chemin d'affichage essentiel
- Règles et recommandations PageSpeed