L'API Fetch Priority indique la priorité relative des ressources par rapport au navigateur. Elle peut optimiser le chargement et améliorer les métriques Core Web Vitals.
Lorsqu'un navigateur analyse une page Web et commence à découvrir et à télécharger des ressources telles que des images, des scripts ou des fichiers CSS, il leur attribue une priority
de récupération afin de pouvoir les télécharger dans l'ordre optimal. La priorité d'une ressource dépend généralement de sa nature et de son emplacement dans le document. Par exemple, les images dans le champ de vision peuvent avoir une priorité High
, et la priorité du CSS bloquant le rendu chargé en amont à l'aide de <link>
dans le <head>
peut être Very High
. Les navigateurs sont plutôt bons pour attribuer des priorités qui fonctionnent bien, mais qui ne sont pas toujours optimales.
Cette page décrit l'API Fetch Priority et l'attribut HTML fetchpriority
, qui vous permet d'indiquer la priorité relative d'une ressource (high
ou low
). La priorité de récupération peut vous aider à optimiser les métriques Core Web Vitals.
Résumé
Voici quelques domaines clés dans lesquels la priorité de récupération peut être utile:
- En augmentant la priorité de l'image LCP en spécifiant
fetchpriority="high"
sur l'élément image, le LCP s'exécute plus tôt. - Augmentation de la priorité des scripts
async
, en utilisant une sémantique plus efficace que le hack le plus courant actuellement (insertion d'un<link rel="preload">
pour le scriptasync
). - Réduction de la priorité des scripts de fin de corps pour permettre un meilleur séquençage avec les images.
Historiquement, les développeurs n'avaient qu'une influence limitée sur la priorité des ressources à l'aide de preload et de preconnect. Le préchargement vous permet d'indiquer au navigateur les ressources critiques que vous souhaitez charger à l'avance, avant qu'il les détecte naturellement. Cela est particulièrement utile pour les ressources plus difficiles à découvrir, telles que les polices incluses dans des feuilles de style, les images de fond ou les ressources chargées à partir d'un script. La préconnexion permet de préparer les connexions aux serveurs multi-origines et d'améliorer des métriques telles que le délai avant le premier octet. Elle est utile lorsque vous connaissez une origine, mais pas nécessairement l'URL exacte d'une ressource dont vous aurez besoin.
La priorité de récupération complète ces indices de ressources. Il s'agit d'un signal basé sur le balisage, disponible via l'attribut fetchpriority
, que les développeurs peuvent utiliser pour indiquer la priorité relative d'une ressource particulière. Vous pouvez également utiliser ces suggestions via JavaScript et l'API Fetch avec la propriété priority
pour influencer la priorité des extractions de ressources effectuées pour les données. La priorité d'extraction peut aussi compléter le préchargement. Prenez une image Largest Contentful Paint, qui, lorsqu'elle est préchargée, aura toujours une priorité faible. Si elle est repoussée par d'autres ressources de faible priorité, l'utilisation de l'option "Extraire la priorité" peut aider à accélérer le chargement de l'image.
Priorité des ressources
La séquence de téléchargement des ressources dépend de la priorité attribuée par le navigateur à chaque ressource de la page. Les facteurs qui peuvent affecter la logique de calcul de priorité sont les suivants:
- Type de ressource (CSS, polices, scripts, images ou ressources tierces, par exemple).
- Emplacement ou ordre des ressources dans le document.
- Indique si les attributs
async
oudefer
sont utilisés dans des scripts.
Le tableau suivant montre comment Chrome hiérarchise et séquence la plupart des ressources :
Charger en phase de blocage de mise en page | Charger un élément à la fois lors de la phase de blocage de mise en page | ||||
---|---|---|---|---|---|
Priorité Blink |
VeryHigh | Haute | Format moyen | Faible | VeryLow |
Priorité dans les outils de développement |
Le plus élevé | Haute | Format moyen | Faible | La plus basse |
Ressource principale | |||||
CSS (début**) | CSS (tard**) | CSS (médias non concordants***) | |||
Script (prématuré** ou non à partir du scanner de préchargement) | Script (tardif**) | Script (asynchrone) | |||
Police | Police (rel=preload) | ||||
Importer | |||||
Image (dans la fenêtre d'affichage) | Image (cinq premières images > 10 000 px2) | Image | |||
Multimédia (vidéo/audio) | |||||
Préchargement | |||||
XSL | |||||
XHR (synchronisation) | XHR/fetch* (asynchrone) |
Le navigateur télécharge les ressources avec la même priorité de calcul, dans l'ordre dans lequel elles sont découvertes. Vous pouvez vérifier la priorité attribuée aux différentes ressources lors du chargement d'une page dans l'onglet Network (Réseau) des outils pour les développeurs Chrome. (Assurez-vous d'inclure la colonne Priorité en cliquant avec le bouton droit sur les en-têtes de la table et en cochant cette option).
Lorsque les priorités changent, vous pouvez voir la priorité initiale et finale dans le paramètre Lignes de requêtes volumineuses ou dans une info-bulle.
Quand utiliser la priorité de récupération ?
Maintenant que vous comprenez la logique de priorisation du navigateur, vous pouvez modifier l'ordre de téléchargement de votre page pour optimiser ses performances et ses Core Web Vitals. Voici quelques exemples de modifications que vous pouvez apporter pour influencer la priorité des téléchargements de ressources :
- Placez les tags de ressources tels que
<script>
et<link>
dans l'ordre dans lequel vous souhaitez que le navigateur les télécharge. Les ressources ayant la même priorité sont généralement chargées dans l'ordre dans lequel elles sont découvertes. - Utilisez l'indice de ressource
preload
pour télécharger les ressources nécessaires à un stade précoce, en particulier celles que le navigateur ne parvient pas à détecter suffisamment tôt. - Utilisez
async
oudefer
pour télécharger des scripts sans bloquer d'autres ressources. - Chargez de manière différée le contenu en dessous de la ligne de flottaison afin que le navigateur puisse utiliser la bande passante disponible pour les ressources au-dessus de la ligne de flottaison plus critiques.
Ces techniques aident à contrôler le calcul de priorité du navigateur, améliorant ainsi les performances et le rapport Core Web Vitals. Par exemple, lorsqu'une image de fond critique est préchargée, elle peut être détectée beaucoup plus tôt, ce qui améliore le LCP (Largest Contentful Paint).
Il est possible que ces poignées ne suffisent pas toujours à hiérarchiser de manière optimale les ressources pour votre application. Voici quelques-uns des scénarios dans lesquels la priorité de récupération peut être utile:
- Vous avez plusieurs images au-dessus de la ligne de flottaison, mais elles ne doivent pas toutes avoir la même priorité. Par exemple, dans un carrousel d'images, seule la première image visible doit avoir une priorité plus élevée. Les autres, qui sont généralement hors écran au départ, peuvent être définies avec une priorité inférieure.
- Les images dans le viewport commencent généralement avec une priorité
Low
. Une fois la mise en page terminée, Chrome découvre qu'ils se trouvent dans la fenêtre d'affichage et augmente leur priorité. Cela ajoute généralement un délai important au chargement des images critiques, telles que les images héros. Si vous indiquez la priorité d'exploration dans le balisage, l'image peut commencer à une prioritéHigh
et se charger beaucoup plus tôt. Pour tenter d'automatiser cette opération, Chrome a défini la priorité des cinq premières images plus grandes surMedium
, ce qui peut s'avérer utile, mais unefetchpriority="high"
explicite serait encore mieux adaptée.
Le préchargement est toujours nécessaire pour la découverte anticipée des images du plus grand élément visible incluses en tant qu'arrière-plans CSS. Pour améliorer la priorité de vos images de fond, incluezfetchpriority='high'
dans le préchargement. - Déclarer des scripts comme
async
oudefer
indique au navigateur de les charger de manière asynchrone. Toutefois, comme indiqué dans le tableau des priorités, une priorité "Faible" est également attribuée à ces scripts. Vous pouvez augmenter leur priorité tout en garantissant le téléchargement asynchrone, en particulier pour les scripts essentiels à l'expérience utilisateur. - Si vous utilisez l'API JavaScript
fetch()
pour extraire des ressources ou des données de manière asynchrone, le navigateur lui attribue la prioritéHigh
. Vous pouvez choisir d'exécuter certaines de vos récupérations avec une priorité plus faible, en particulier si vous mélangez des appels d'API en arrière-plan avec des appels d'API qui répondent à l'entrée utilisateur. Marquez les appels d'API en arrière-plan comme prioritairesLow
et les appels d'API interactifs comme prioritairesHigh
. - Le navigateur attribue une priorité
High
au CSS et aux polices, mais certaines de ces ressources peuvent être plus importantes que d'autres. Vous pouvez utiliser la priorité d'extraction pour réduire la priorité des ressources non critiques (notez que les premiers CSS bloquent l'affichage et doivent donc généralement être une prioritéHigh
).
Attribut fetchpriority
Utilisez l'attribut HTML fetchpriority
pour spécifier la priorité de téléchargement des types de ressources tels que les CSS, les polices, les scripts et les images lorsqu'ils sont téléchargés à l'aide de balises link
, img
ou script
. Il peut prendre les valeurs suivantes :
high
: la ressource est prioritaire et vous souhaitez que le navigateur la priorise plus que d'habitude, à condition que ses propres heuristiques ne l'empêchent pas.low
: la ressource est moins prioritaire, et vous souhaitez que le navigateur la dépriorise, encore une fois si ses heuristiques le permettent.auto
: valeur par défaut permettant au navigateur de choisir la priorité appropriée.
Voici quelques exemples d'utilisation de l'attribut fetchpriority
dans le balisage, ainsi que de la propriété priority
équivalente au script.
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
Effets de la priorité du navigateur et de fetchpriority
Vous pouvez appliquer l'attribut fetchpriority
à différentes ressources, comme indiqué dans le tableau suivant, afin d'augmenter ou de réduire leur priorité calculée. fetchpriority="auto"
(◉) dans chaque ligne indique la priorité par défaut pour ce type de ressource. (également disponible sous forme de document Google Docs).
Charger en phase de blocage de mise en page | Charger un élément à la fois lors de la phase de blocage de mise en page | ||||
---|---|---|---|---|---|
Priorité Clignotement |
VeryHigh | Haute | Format moyen | Faible | VeryLow |
Priorité dans les outils de développement |
Le plus élevé | Haute | Format moyen | Faible | La plus basse |
Ressource principale | ◉ | ||||
CSS (début**) | ⬆◉ | ⬇ | |||
CSS (tard**) | ⬆ | ◉ | ⬇ | ||
CSS (médias non concordants***) | ⬆*** | ◉⬇ | |||
Script (tôt** ou non issu du scanner de préchargement) | ⬆◉ | ⬇ | |||
Script (tard**) | ⬆ | ◉ | ⬇ | ||
Script (async/defer) | ⬆ | ◉⬇ | |||
Police | ◉ | ||||
Police (rel=preload) | ⬆◉ | ⬇ | |||
Importer | ◉ | ||||
Image (dans la fenêtre d'affichage, après la mise en page) | ⬆◉ | ⬇ | |||
Image (cinq premières images > 10 000 px2) | ⬆ | ◉ | ⬇ | ||
Image | ⬆ | ◉⬇ | |||
Multimédia (vidéo/audio) | ◉ | ||||
XHR (synchronisation) – obsolète | ◉ | ||||
XHR/fetch* (asynchrone) | ⬆◉ | ⬇ | |||
Préchargement | ◉ | ||||
XSL | ◉ |
fetchpriority
définit une priorité relative, ce qui signifie qu'elle augmente ou réduit la priorité par défaut d'une valeur appropriée, au lieu de définir explicitement la priorité sur High
ou Low
. Cela entraîne souvent une priorité High
ou Low
, mais pas toujours. Par exemple, le CSS critique avec fetchpriority="high"
conserve la priorité "Très élevée"/"Élevée", et l'utilisation de fetchpriority="low"
sur ces éléments conserve la priorité "Élevée". Aucun de ces cas n'implique de définir explicitement la priorité sur High
ou Low
.
Cas d'utilisation
Utilisez l'attribut fetchpriority
lorsque vous souhaitez fournir au navigateur une indication supplémentaire sur la priorité à utiliser pour extraire une ressource.
Augmenter la priorité de l'image LCP
Vous pouvez spécifier fetchpriority="high"
pour augmenter la priorité du LCP ou d'autres images critiques.
<img src="lcp-image.jpg" fetchpriority="high">
La comparaison suivante montre la page Google Flights avec une image de fond LCP chargée avec et sans priorité de récupération. Lorsque la priorité est définie sur "Élevée", le LCP passe de 2,6 s à 1,9 s.
Réduire la priorité des images au-dessus de la ligne de flottaison
Utilisez fetchpriority="low"
pour réduire la priorité des images au-dessus de la ligne de flottaison qui ne sont pas immédiatement importantes, par exemple les images hors écran dans un carrousel d'images.
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
Bien que les images 2 à 4 se trouvent en dehors du viewport, elles peuvent être considérées comme "assez proches" pour être boostées à high
et chargées même si un attribut load=lazy
est ajouté. Par conséquent, fetchpriority="low"
est la solution correcte.
Dans une expérience précédente avec l'application Oodle, nous l'avons utilisée pour diminuer la priorité des images qui ne s'affichent pas au chargement. Le temps de chargement des pages a été réduit de deux secondes.
Diminuer la priorité des ressources préchargées
Pour empêcher les ressources préchargées d'entrer en concurrence avec d'autres ressources critiques, vous pouvez réduire leur priorité. Utilisez cette technique avec des images, des scripts et du CSS.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">
<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
Redéfinir la priorité des scripts
Les scripts que votre page doit être interactif doivent se charger rapidement, mais ne doivent pas bloquer d'autres ressources plus critiques qui bloquent l'affichage. Vous pouvez les marquer comme async
avec une priorité élevée.
<script src="async_but_important.js" async fetchpriority="high"></script>
Vous ne pouvez pas marquer un script comme async
s'il repose sur des états DOM spécifiques. Toutefois, s'ils s'exécutent plus tard sur la page, vous pouvez les charger avec une priorité inférieure :
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
L'analyseur sera toujours bloqué lorsqu'il atteindra ce script, mais le contenu précédent sera prioritaire.
Si le DOM finalisé est nécessaire, vous pouvez également utiliser l'attribut defer
(qui s'exécute, dans l'ordre, après DOMContentLoaded) ou même async
en bas de la page.
Diminuer la priorité des récupérations de données non critiques
Le navigateur exécute fetch
avec une priorité élevée. Si plusieurs récupérations peuvent être déclenchées simultanément, vous pouvez utiliser la priorité par défaut élevée pour les récupérations de données les plus importantes et réduire la priorité des données moins critiques.
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
Notes d'implémentation de la priorité de récupération
La priorité d'exploration peut améliorer les performances dans des cas d'utilisation spécifiques. Toutefois, vous devez tenir compte de certains points concernant l'utilisation de la priorité d'exploration:
- L'attribut
fetchpriority
est une indication et non une directive. Le navigateur essaie de respecter les préférences du développeur, mais il peut également appliquer ses préférences de priorité des ressources pour résoudre les conflits. Ne confondez pas la récupération de la priorité et le préchargement:
- Le préchargement est une récupération obligatoire, et non une indication.
- Le préchargement permet au navigateur de découvrir une ressource plus tôt, mais il la récupère toujours avec la priorité par défaut. À l'inverse, la priorité de récupération n'améliore pas la visibilité, mais elle vous permet d'augmenter ou de diminuer la priorité de récupération.
- Il est souvent plus facile d'observer et de mesurer les effets d'un préchargement que ceux d'un changement de priorité.
La priorité de récupération peut compléter les préchargements en augmentant la précision de la hiérarchisation. Si vous avez déjà spécifié un préchargement comme l'un des premiers éléments du fichier
<head>
pour une image LCP, une priorité d'explorationhigh
risque de ne pas améliorer de manière significative le LCP. Toutefois, si le préchargement se produit après le chargement d'autres ressources, une priorité de récupérationhigh
peut améliorer davantage le LCP. Si une image critique est une image de fond CSS, préchargez-la avecfetchpriority = "high"
.Les améliorations du temps de chargement issues de la hiérarchisation sont plus pertinentes dans les environnements où davantage de ressources entrent en concurrence pour la bande passante réseau disponible. Cela est courant pour les connexions HTTP/1.x où les téléchargements parallèles ne sont pas possibles, ou pour les connexions HTTP/2 ou HTTP/3 à faible bande passante. Dans ces cas, la hiérarchisation peut aider à résoudre les goulots d'étranglement.
Les CDN n'implémentent pas la hiérarchisation HTTP/2 de manière uniforme, et il en va de même pour HTTP/3. Même si le navigateur communique la priorité à partir de la priorité de récupération, le CDN peut ne pas réorganiser les ressources dans l'ordre spécifié. Cela rend le test de la priorité de récupération difficile. Les priorités sont appliquées à la fois en interne dans le navigateur et avec des protocoles compatibles avec la hiérarchisation (HTTP/2 et HTTP/3). Il est toujours utile d'utiliser la priorité de récupération uniquement pour la hiérarchisation interne du navigateur, indépendamment de la prise en charge du CDN ou de l'origine, car les priorités changent souvent lorsque le navigateur demande des ressources. Par exemple, les ressources à faible priorité, telles que les images, sont souvent empêchées d'être demandées pendant que le navigateur traite les éléments
<head>
critiques.Vous ne pourrez peut-être pas introduire la priorité d'exploration comme bonne pratique dans votre conception initiale. Plus tard dans votre cycle de développement, vous pouvez attribuer les priorités à différentes ressources de la page. Si elles ne correspondent pas à vos attentes, vous pouvez introduire une priorité d'extraction pour une optimisation plus poussée.
Les développeurs doivent utiliser le préchargement dans l'objectif visé : précharger les ressources non détectées par l'analyseur (polices, importations, images LCP de fond). L'emplacement de l'indice preload
affecte le moment où la ressource est préchargée.
La priorité de récupération indique comment la ressource doit être récupérée.
Conseils d'utilisation des préchargements
Tenez compte des points suivants lorsque vous utilisez des préchargements:
- Lorsqu'un préchargement est inclus dans les en-têtes HTTP, il est placé avant tout le reste dans l'ordre de chargement.
- En règle générale, les préchargements se chargent dans l'ordre dans lequel l'analyseur y accède pour tout élément ayant une priorité
Medium
ou supérieure. Faites attention si vous incluez des préchargements au début de votre code HTML. - Le préchargement de polices fonctionne probablement mieux vers la fin de la section "head" ou au début de la section "body".
- Les préchargements d'importation (
import()
oumodulepreload
dynamiques) doivent s'exécuter après la balise de script qui nécessite l'importation. Assurez-vous donc que le script est chargé ou analysé en premier afin qu'il puisse être évalué pendant le chargement de ses dépendances. - Les préchargements d'images ont une priorité
Low
ouMedium
par défaut. Organisez-les par rapport aux scripts asynchrones et aux autres balises de priorité faible ou la plus faible.
Historique
La priorité de récupération a été testée pour la première fois dans Chrome en tant que phase d'évaluation de l'origine en 2018, puis à nouveau en 2021 à l'aide de l'attribut importance
. À l'époque, il s'appelait Priority Hints (Indices de priorité). L'interface est depuis passée à fetchpriority
pour HTML et priority
pour l'API Fetch de JavaScript dans le cadre du processus de normalisation Web. Pour éviter toute confusion, nous appelons désormais cette API Fetch Priority (Priorité d'extraction de l'API).
Conclusion
Les développeurs sont susceptibles d'être intéressés par la priorité d'extraction, avec les corrections apportées au comportement de préchargement et l'accent mis récemment sur les métriques Core Web Vitals et le LCP. Ils disposent désormais de boutons supplémentaires pour définir leur séquence de chargement préférée.