Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Chemin critique du rendu

L'optimisation du chemin critique du rendu est essentielle pour améliorer les performances de nos pages : notre objectif est de donner la priorité et d'afficher le contenu associé à la première action que l'utilisateur souhaite effectuer sur une page.

Pour offrir une expérience rapide sur Internet, le navigateur doit fournir un travail important. La majeure partie de ce travail nous est cachée, à nous les développeurs Web : nous écrivons le balisage, et une jolie page s'affiche à l'écran. Mais comment le navigateur fait-il exactement pour afficher des pixels à l'écran à partir de notre code HTML, CSS et JavaScript ?

Pour optimiser les performances, il est essentiel de comprendre ce qui se passe au cours de 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. C'est ce que l'on appelle le chemin critique du rendu.

affichage progressif de la page

En optimisant le chemin critique du rendu, nous pouvons améliorer de façon significative le temps nécessaire pour afficher nos pages pour la première fois. En outre, le fait de comprendre le chemin critique du rendu permet d'avoir de bonnes bases pour créer des applications interactives qui offrent de bonnes performances. En fait, le processus de traitement des mises à jours interactives est identique, mais il s'effectue en boucle et sans interruption, et idéalement à 60 images par seconde ! Mais n'allons pas trop vite. Observons d'abord rapidement le processus d'affichage complet d'une page simple par le navigateur.

Critical Rendering Path

You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

You’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible. You’ll learn how to dive into recommendations from PageSpeed Insights and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve immediate performance boosts!

This is a free course offered through Udacity

Take Course