Optimiser le chemin critique du rendu

Ilya Grigorik
Ilya Grigorik

Publié le 31 mars 2014

Pour obtenir le délai d'affichage le plus court possible, nous devons minimiser trois variables :

  • Nombre de ressources critiques.
  • Longueur du chemin critique.
  • Nombre d'octets critiques.

Une ressource critique est une ressource qui peut bloquer le rendu initial de la page. Moins il y a de ces ressources, moins le navigateur, le processeur et les autres ressources ont de travail.

De même, la longueur du chemin critique dépend du graphique des dépendances entre les ressources critiques et leur taille en octets : certains téléchargements de ressources ne peuvent être lancés qu'après le traitement d'une ressource précédente. Plus la ressource est volumineuse, plus le téléchargement nécessite d'allers-retours.

Enfin, moins le navigateur doit télécharger d'octets critiques, plus vite il peut traiter le contenu et l'afficher à l'écran. Pour réduire le nombre d'octets, nous pouvons réduire le nombre de ressources (les éliminer ou les rendre non critiques) et veiller à réduire la taille du transfert en compressant et en optimisant chaque ressource.

Voici la séquence générale d'étapes à suivre pour optimiser le chemin critique du rendu:

  1. Analysez et définissez votre chemin critique: nombre de ressources, octets et longueur.
  2. Réduisez le nombre de ressources critiques : éliminez-les, différez leur téléchargement, marquez-les comme asynchrones, etc.
  3. Optimisez le nombre d'octets critiques pour réduire la durée de téléchargement (nombre d'allers-retours).
  4. Optimisez l'ordre de chargement des ressources critiques restantes : téléchargez tous les composants critiques le plus tôt possible pour raccourcir la longueur du chemin critique.

Commentaires