Optimiser le chemin critique du rendu

Ilya Grigorik
Ilya Grigorik

Publié le 31 mars 2014

Pour que le premier affichage soit effectué le plus rapidement possible, nous devons minimiser au minimum 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 supprimer ou les rendre non critiques) et nous assurer de réduire la taille de 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 caractérisez votre chemin critique: nombre de ressources, octets, longueur.
  2. Réduisez le nombre de ressources critiques: éliminez-les, différez leur téléchargement, marquez-les comme asynchrones et prenez en compte d'autres considérations importantes.
  3. Optimisez le nombre d'octets critiques pour réduire le temps 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