Aller directement au contenu principal
Boris Schapira

Priorités des chargements JavaScript dans Chrome

Je relis et conseille souvent cet article d’Addy Osmani de février 2019 mais mes interlocuteurs et interlocutrices ne sont pas forcément anglophones. J’ai donc décidé de le traduire.

Retrouvez l’original sur le blog d’Addy Osmani : JavaScript Loading Priorities in Chrome.

La façon dont les navigateurs ordonnancent et exécutent les scripts peut avoir un impact sur les performances des pages web. Si des techniques comme <script defer>, <link rel=preload> (et d’autres) influencent le chargement des scripts, il peut également être utile de savoir comment les navigateurs les interprètent. Grâce à Kouhei Ueno, nous disposons maintenant d’un résumé actualisé de la manière dont les scripts sont ordonnancés dans Chrome.

Priorité de chargement (network/Blink) Priorité d’exécution Comment l’utiliser ?
<script> dans <head> Moyenne/Haute Très Haute -
Interrompt l’analyse
  • Scripts ayant une incidence sur le rendu du First Meaningful Paint (FMP) / First Contentful Paint (FCP) content
  • Scripts devant être exécutés avant d’autres scripts

    Exemples :
    • Runtime de Framework (s’il n’y a pas de rendu statique)
    • Polyfills
    • Tests A/B qui modifient la structure du DOM de l’ensemble de la page
astuce <link rel=preload> +
<script async>
ou
<script type=module async> 		Moyenne/Haute Haute -
Interrompt l’analyse
  • Scripts qui produisent un contenu critique (requis pour le FMP)
    • Mais ne devraient pas affecter la mise en page au-dessus de la ligne de flottaison
    • Scripts qui déclenchent des requêtes réseau pour injecter dynamiquement du contenu
    • Scripts devant être exécutés dès que leurs dépendances sont téléchargées, utilisez <script async type=module>

      Exemples :
      • Dessiner quelque chose dans un <canvas>
<script async> La plus basse/Basse Haute -
Interrompt l’analyse

Faites attention lorsque vous utilisez <script async>. De nos jours, il est souvent utilisé pour indiquer des scripts non-critiques mais ce n’est pas cohérent car même si le script est chargé en basse priorité, il est exécuté en haute priorité.

NdBoris : la attributes ne sont pas cumulatifs. Un script <script async defer> sera perçu par le navigateur comme un <script async> partout où async est supporté (c’est-à-dire… quasiment partout). La navigateur ne supportant pas async le considéreront comme un <script defer>.
<script defer> La plus basse/Basse Très basse -
S’exécute après les <script>s en fin de <body>
  • Scripts qui génèrent du contenu non-critique
  • Scripts qui fournissent des fonctionnalités critiques que >50% de sessions de pages utiliseront

    Exemples :
<script> en fin de <body> Moyenne/Haute Basse -
Attend la fin de l’analyse 		Attention, quand vous utilisez <script> à la fin de <body> et que vous pensez définir une priorité basse. Ces scripts sont ordonnancés avec une priorité Moyenne/Haute.
<script defer> en fin de <body> La plus basse/Basse -
fin de queue 		Très basse -
S’exécute après les <script>s en fin de <body>
  • Scripts offrant des fonctionnalités interactives utilisées occasionnellement

    Exemples :
    • Chargement des "Articles connexes"
    • Fonctionnalité "Votre avis nous intéresse"
<link rel=prefetch> + <script> lors d’une navigation vers la page suivante Inactive / La plus basse Dépend du moment et de la manière dont le script est consommé. Des scripts très susceptibles d’apporter des fonctionnalités importantes à une page visitée ultérieurement.

Exemples :
  • Bundle JavaScript d’une future route

Note : Les priorités de chargement ne sont pas nécessairement cohérentes d’un navigateur à l’autre. Utilisez donc ces connaissances à bon escient et mesurez-les en cas de doute. Dans l’idéal, cherchez à offrir une expérience de qualité au plus grand nombre d’utilisateurs possible.

Si vous êtes un développeur ou une développeuse web et que vous vous demandez où vous pouvez voir la « Priorité de chargement », Chrome DevTools a une colonne « Priorité » optionnelle disponible dans le panneau Réseau. Cliquez avec le bouton droit de la souris sur les en-têtes de colonne et vous pourrez l’activer :

Une capture des outils DevTools ouverts sur Walmart.com, onglet Réseau. On y voit un script de polyfill et un script de header en priorité haute, et un script de footer en priorité basse.

Cette synthèse des priorités ci-dessus est toujours valable en février 2019. Je souhaiterais personnellement avoir une meilleure compréhension des priorités de chargement dans d’autres navigateurs également. J’espère que cet aperçu sera utile à quelqu’un d’autre !

Merci à Kouhei, Dom Faralino, Pat Meenan, Kenji Baheux et Yoav Weiss pour leurs contributions permettant de mieux expliquer la pile réseau de Chrome.

En savoir plus

[Note de Boris] Et j’ajoute mes propres articles, en français :