Optimiser le chemin critique du rendu

Ilya Grigorik
Ilya Grigorik

Pour garantir le premier affichage le plus rapidement possible, nous devons minimiser trois variables:

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

Une ressource critique est une ressource susceptible de bloquer l'affichage initial de la page. Moins il y a de ressources, moins il y a de travail pour le navigateur, le processeur et les autres ressources.

De même, la longueur du chemin critique dépend du graphique des dépendances entre les ressources critiques et leur nombre d'octets: certains téléchargements de ressources ne peuvent être lancés qu'après le traitement d'une ressource précédente, et plus la ressource est importante, 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 (en les éliminant ou en les rendant non critiques) et en réduisant au maximum la taille du transfert en compressant et en optimisant chaque ressource.

Voici la séquence générale d'étapes permettant d'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: supprimez-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 éléments critiques le plus tôt possible afin de réduire la longueur du chemin critique.

Commentaires