Publié le 31 mars 2014
L'optimisation du chemin de rendu critique consiste à donner la priorité à l'affichage du contenu lié à l'action utilisateur en cours.
Offrir une expérience Web rapide nécessite beaucoup de travail de la part du navigateur. La plupart de ce travail nous est masqué en tant que développeurs Web : nous écrivons le balisage, et une page agréable à l'œil s'affiche à l'écran. Mais comment le navigateur passe-t-il de la consommation de notre code HTML, CSS et JavaScript à l'affichage de pixels à l'écran ?
Pour optimiser les performances, vous devez comprendre ce qui se passe des étapes intermédiaires entre la réception des octets HTML, CSS et JavaScript, et le traitement requis pour les convertir en pixels de rendu. chemin critique du rendu.
En optimisant le chemin de rendu critique, nous pouvons considérablement améliorer le temps de premier rendu de nos pages. De plus, comprendre le chemin de rendu critique sert également de base pour créer des applications interactives performantes. Le processus de mise à jour interactive est le même, mais il est effectué en boucle continue et idéalement à 60 images par seconde. Tout d'abord, voyons comment le navigateur affiche une page simple.
Ressources supplémentaires
- Créer le modèle d'objets
- Construction, mise en page et peinture d'un arbre de rendu
- CSS bloquant l'affichage
- Ajouter de l'interactivité avec JavaScript
- Mesurer le chemin critique du rendu
- Analyser les performances des chemins de rendu critiques
- Optimiser le chemin d'affichage essentiel
- Règles et recommandations PageSpeed