L'API Fetch Priority indique la priorité relative des ressources pour le navigateur. Elles peuvent optimiser le chargement et améliorer les 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 CSS, il lui attribue un priority d'extraction afin d'essayer de télécharger les ressources dans un ordre optimal. Ces priorités peuvent dépendre du type de ressource et de son emplacement dans le document. Par exemple, les images dans la fenêtre d'affichage peuvent avoir une priorité High, tandis que la priorité du code CSS à chargement anticipé via des <link>s dans <head> peut être Very High. Les navigateurs sont très efficaces pour attribuer des priorités qui fonctionnent bien, mais ne sont pas forcément optimales dans tous les cas.
Dans cet article, nous allons vous présenter l'API Fetch Priority et l'attribut HTML fetchpriority, qui vous permet de donner des indications sur la priorité relative d'une ressource (high ou low). La priorité de récupération peut vous aider à optimiser les Core Web Vitals.
Résumé
Voici quelques domaines clés dans lesquels la priorité de récupération peut vous aider:
- Augmentez la priorité de l'image LCP en spécifiant
fetchpriority="high"sur l'élément d'image, ce qui accélère le LCP. - Augmentez la priorité des scripts
asyncen utilisant une meilleure sémantique qu'avec le hack couramment utilisé actuel (insertion d'un<link rel="preload">pour le scriptasync). - Diminuez la priorité des scripts tardifs pour améliorer le séquençage des images.
Par le passé, les développeurs ont eu une influence limitée, mais limitée, sur la priorité des ressources en utilisant le préchargement et la préconnexion. La priorité de récupération complète ces conseils sur les ressources, mais il est essentiel de comprendre où chacun se situe. Le préchargement vous permet d'indiquer au navigateur les ressources critiques que vous souhaitez charger tôt avant qu'elles ne soient découvertes naturellement. Cette fonctionnalité est particulièrement utile pour les ressources difficiles à trouver, telles que les polices incluses dans les 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 Time-to-first-byte. 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 est 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 récupérations de ressources effectuées pour les données. La priorité de récupération peut également compléter le préchargement. Prendre 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 la priorité d'extraction peut vous aider à accélérer le chargement de l'image.
La priorité de récupération est disponible dans Chrome 101 ou version ultérieure.
Priorité des ressources
L'ordre de téléchargement des ressources dépend de la priorité attribuée au navigateur pour chaque ressource de la page. Différents facteurs peuvent affecter la logique de calcul des priorités. Par exemple,
- Les CSS, polices, scripts, images et ressources tierces sont associés à des priorités différentes.
- L'emplacement ou l'ordre dans lequel vous référencez des ressources dans le document affecte également leur priorité.
- L'indice de ressource
preloadpermet au navigateur de détecter une ressource plus rapidement et donc de la charger avant que le document ne la charge, et affecte la priorité. - Modifications des priorités de calcul pour les scripts
asyncoudefer.
Le tableau suivant prend en compte ces facteurs pour déterminer comment la plupart des ressources sont actuellement classées par ordre de priorité et dans l'ordre dans Chrome.
| Charger en phase de blocage de mise en page | Charger un à un lors de la phase de blocage de la mise en page | ||||
|---|---|---|---|---|---|
| Priorité de clignotement |
VeryHigh | Haute | Format moyen | Min | VeryLow |
| Outils de développement Priorité |
Meilleure | Haute | Format moyen | Min | Les plus faibles |
| Ressource principale | |||||
| CSS (début**) | CSS (retard**) | CSS (incohérence de contenu multimédia***) | |||
| Script (tôt** ou non après le préchargement) | Script (retard**) | Script (asynchrone) | |||
| Font | Police (rel=preload) | ||||
| Import | |||||
| Image (dans la fenêtre d'affichage) | Image (5 premières images > 10 000 px2) | Image | |||
| Multimédia | |||||
| document SVG | |||||
| Préchargement | |||||
| XSL | |||||
| XHR (synchronisation) | XHR/fetch* (asynchrone) | ||||
Le navigateur télécharge les ressources avec la même priorité calculée dans l'ordre de leur découverte. Vous pouvez vérifier la priorité attribuée à différentes ressources lors du chargement d'une page dans l'onglet Réseau des outils pour les développeurs Chrome. (Assurez-vous d'inclure la colonne "Priorité" en effectuant un clic droit sur les en-têtes du tableau.)
type = "font" sur la page d'informations des actualités de la BBC
Lorsque les priorités changent, vous pouvez utiliser le paramètre Big request rows pour afficher les priorités initiale et finale. Il en va de même dans une info-bulle, quel que soit le paramètre Lignes de requêtes volumineuses.
Quand auriez-vous besoin de la priorité de récupération ?
En connaissant la logique de priorisation du navigateur, vous disposez de quelques commandes pour modifier l'ordre des téléchargements. Vous pouvez
- Placez les tags de ressources tels que
<script>et<link>selon l'ordre dans lequel vous souhaitez les télécharger. Les ressources ayant la même priorité sont généralement chargées dans l'ordre de leur découverte. - Utilisez l'indice de ressource
preloadpour télécharger les ressources nécessaires plus tôt, en particulier celles que le navigateur ne peut pas détecter facilement. - Utilisez
asyncoudeferpour télécharger des scripts sans bloquer les autres ressources. - Chargez le contenu dans la partie en dessous de la ligne de flottaison de manière différée afin que le navigateur puisse utiliser la bande passante disponible pour les ressources plus critiques situées au-dessus de la ligne de flottaison.
Ces techniques permettent de contrôler les calculs de priorité du navigateur, et donc d'améliorer les performances et le rapport Core Web Vitals. Par exemple, lorsqu'une image de fond critique est préchargée, elle peut être découverte beaucoup plus tôt, ce qui améliore le LCP (Largest Contentful Paint).
Parfois, ces identifiants ne suffisent pas à prioriser les ressources de manière optimale pour votre application. Voici quelques scénarios dans lesquels la priorité de récupération peut s'avérer utile:
- Vous avez plusieurs images au-dessus de la ligne de flottaison, mais il n'est pas nécessaire qu'elles aient toutes la même priorité. Par exemple, dans un carrousel d'images, seule la première image visible nécessite une priorité plus élevée que les autres.
- Les images principales dans la fenêtre d'affichage commencent généralement à une priorité "Faible" (notez qu'un changement dans Chrome 117 définit les cinq premières images de grande taille sur "Moyenne", mais cela peut inclure ou non votre image héros). Une fois la mise en page terminée, Chrome détecte qu'ils se trouvent dans la fenêtre d'affichage et augmente leur priorité. En général, cela retarde considérablement le chargement de l'image. Définir la priorité de récupération dans le balisage permet à l'image de commencer avec une priorité "Élevée" et de se charger beaucoup plus tôt.
Notez que le préchargement est toujours requis pour la découverte anticipée d'images LCP incluses en tant qu'arrière-plans CSS. Il peut être combiné à la priorité de récupération en incluantfetchpriority='high'dans le préchargement. Sinon, il commencera toujours avec une priorité "Faible" ou "Moyenne" pour les images. - Déclarer des scripts comme
asyncoudeferindique au navigateur de les charger de manière asynchrone. Toutefois, comme indiqué dans le tableau précédent, ces scripts se voient également attribuer une priorité "Faible". Vous pouvez augmenter leur priorité tout en assurant un téléchargement asynchrone, en particulier pour les scripts essentiels à l'expérience utilisateur. - Vous pouvez utiliser l'API JavaScript
fetch()pour récupérer des ressources ou des données de manière asynchrone. Le navigateur attribue une priorité "Élevée" à la récupération. Dans certains cas, vous ne souhaitez pas que toutes vos extractions soient exécutées avec une priorité "Élevée" et préférez utiliser une priorité différente. Cela peut être utile lorsque vous exécutez des appels d'API en arrière-plan et que vous les combinez à des appels d'API qui répondent aux entrées utilisateur, comme avec la saisie semi-automatique. Les appels d'API en arrière-plan peuvent être associés à une priorité "Faible" et les appels d'API interactifs à une priorité "Élevée". - Le navigateur attribue une priorité "Élevée" aux CSS et aux polices, mais toutes ces ressources peuvent ne pas avoir la même importance ou ne pas être requises pour le LCP. Vous pouvez utiliser la priorité de récupération pour réduire la priorité de certaines de ces ressources.
Attribut fetchpriority
Vous pouvez indiquer une priorité de récupération à l'aide de l'attribut HTML fetchpriority. Vous pouvez utiliser l'attribut avec les balises link, img et script. Cet attribut vous permet de spécifier la priorité des types de ressources (CSS, polices, scripts et images, par exemple) lorsqu'ils sont téléchargés à l'aide des balises compatibles.
L'attribut fetchpriority accepte l'une des trois valeurs suivantes:
high: vous considérez que la ressource a une priorité élevée et vous souhaitez que le navigateur la donne en priorité tant que les méthodes heuristiques du navigateur n'empêchent pas cela.low: vous considérez que la ressource n'a pas de priorité et souhaitez que le navigateur redéfinisse sa priorité si ses heuristiques le permettent.auto: il s'agit de la valeur par défaut si vous n'avez pas de préférence et laissez le navigateur décider de la priorité appropriée.
Voici quelques exemples d'utilisation de l'attribut fetchpriority dans le balisage et 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>
Priorité du navigateur et fetchpriority
Vous pouvez appliquer l'attribut fetchpriority à différentes ressources, comme illustré dans la figure suivante, pour potentiellement augmenter ou réduire la priorité calculée. fetchpriority="auto" (◉) figurant sur chaque ligne indique la priorité par défaut du type de ressource concerné (également disponible sous forme de document Google Docs).
| Charger en phase de blocage de mise en page | Charger un à un lors de la phase de blocage de la mise en page | ||||
|---|---|---|---|---|---|
| Priorité de clignotement |
VeryHigh | Haute | Format moyen | Min | VeryLow |
| Outils de développement Priorité |
Meilleure | Haute | Format moyen | Min | Les plus faibles |
| Ressource principale | ◉ | ||||
| CSS (début**) | ⬆◉ | ⬇ | |||
| CSS (retard**) | ⬆ | ◉ | ⬇ | ||
| CSS (incohérence de contenu multimédia***) | ⬆*** | ◉⬇ | |||
| Script (tôt** ou non après le préchargement) | ⬆◉ | ⬇ | |||
| Script (retard**) | ⬆ | ◉ | ⬇ | ||
| Script (asynchrone/différé) | ⬆ | ◉⬇ | |||
| Font | ◉ | ||||
| Police (rel=preload) | ⬆◉ | ⬇ | |||
| Import | ◉ | ||||
| Image (dans la fenêtre d'affichage - après la mise en page) | ⬆◉ | ⬇ | |||
| Image (5 premières images > 10 000 px2) | ⬆ | ◉ | ⬇ | ||
| Image | ⬆ | ◉⬇ | |||
| Multimédia (vidéo/audio) | ⬆ | ◉⬇ | |||
| document SVG | ⬆ | ◉⬇ | |||
| XHR (synchronisation) - obsolète | ◉ | ||||
| XHR/fetch* (asynchrone) | ⬆◉ | ⬇ | |||
| Préchargement | ◉ | ||||
| XSL | ◉ | ||||
Notez que fetchpriority définit la priorité relative, c'est-à-dire qu'il augmente ou diminue la priorité par défaut selon une valeur appropriée, au lieu de définir explicitement la priorité sur "Élevée" ou "Faible" et que le navigateur décide de la priorité relative. Il s'agit souvent de "Élevé" ou "Faible", mais pas toujours. Par exemple, le CSS critique avec fetchpriority="high" conservera la priorité "Très élevée"/"La plus élevée", et l'utilisation de fetchpriority="low" sur ces éléments conservera la priorité "Élevée". Dans les deux cas, la priorité n'est pas explicitement définie sur "Élevée" ou "Faible".
Cas d'utilisation
Vous pouvez utiliser l'attribut fetchpriority pour indiquer au navigateur la priorité avec laquelle récupérer 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. Avec la priorité élevée, le LCP est passé de 2,6 s à 1,9 s.
Réduisez la priorité des images au-dessus de la ligne de flottaison
Vous pouvez utiliser fetchpriority="low" pour réduire la priorité des images au-dessus de la ligne de flottaison, qui peuvent ne pas être importantes au départ, par exemple 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>
Dans une expérience antérieure avec l'application Oodle, nous avons utilisé cette option pour réduire la priorité des images qui ne s'affichent pas au chargement. Cela a permis de réduire le temps de chargement de 2 secondes.
Diminuer la priorité des ressources préchargées
Pour empêcher des ressources préchargées d'entrer en concurrence avec d'autres ressources critiques, vous pouvez donner un indice afin de réduire leur priorité. Vous pouvez utiliser 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" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
Redéfinir la priorité des scripts
Les scripts requis pour rendre certaines parties de la page interactives sont essentiels, mais ils ne doivent pas bloquer d'autres ressources. Vous pouvez les marquer comme asynchrones avec une priorité élevée.
<script src="async_but_important.js" async fetchpriority="high"></script>
Les scripts ne peuvent pas être marqués comme asynchrones s'ils reposent sur des états DOM spécifiques. Toutefois, s'ils se trouvent plus bas sur la page, ils peuvent être téléchargés avec une priorité inférieure, comme indiqué.
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Diminuez 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 lancées simultanément, vous pouvez utiliser la priorité par défaut élevée pour les récupérations les plus critiques et la réduire pour les 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'});
Remarques sur la mise en œuvre de la priorité de récupération
La priorité de récupération peut améliorer les performances dans des cas d'utilisation spécifiques, comme indiqué ci-dessus. Voici quelques points à prendre en compte:
- L'attribut
fetchpriorityest une indication et non une directive. Le navigateur tentera de respecter les préférences du développeur. Il est également possible que le navigateur applique ses préférences de priorité des ressources si nécessaire en cas de conflit. La priorité de récupération ne doit pas être confondue avec un préchargement. Ils sont tous deux distincts pour les raisons suivantes:
- Le préchargement est une extraction obligatoire et non une indication.
- Le préchargement permet au navigateur de découvrir la ressource plus tôt, mais la récupère tout de même avec la priorité par défaut. À l'inverse, la priorité de récupération n'améliore pas la visibilité, mais vous permet d'augmenter ou de diminuer la priorité de récupération.
- Il est plus facile d'observer et de mesurer les effets d'un préchargement.
La priorité de récupération peut compléter les préchargements en augmentant le niveau de précision de la hiérarchisation. Si vous aviez déjà spécifié un préchargement comme premier élément du
<head>pour une image LCP, la priorité de récupérationhighrisque de ne pas générer de gains significatifs. Toutefois, si le préchargement s'est produit après d'autres ressources, une priorité de récupérationhighpeut améliorer le LCP. Si une image essentielle est une image de fond CSS, vous devez la précharger avecfetchpriority = "high".Les gains notables liés à la hiérarchisation seront plus pertinents dans les environnements où la bande passante réseau disponible est plus importante. Cela est courant pour les connexions HTTP/1.x où les téléchargements parallèles ne sont pas possibles ou dans les connexions HTTP/2 à faible bande passante. La hiérarchisation peut résoudre les goulots d'étranglement dans ces conditions.
Les CDN n'implémentent pas de manière uniforme la priorisation HTTP/2. Même si le navigateur communique la priorité suggérée à l'aide de la priorité d'extraction, le CDN peut ne pas redéfinir les priorités des ressources dans l'ordre requis. Il est donc difficile de tester la priorité de récupération. 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 de l'utiliser, même pour la hiérarchisation interne du navigateur, indépendamment du CDN ou de la compatibilité avec l'origine, car elle change souvent lorsque le navigateur demande des ressources. Par exemple, les ressources de 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.Il n'est pas toujours possible d'intégrer la priorité de récupération comme bonne pratique dans votre conception initiale. Vous pouvez l'appliquer plus tard dans le cycle de développement. Vous pouvez vérifier les priorités attribuées aux différentes ressources sur la page et, si elles ne correspondent pas à vos attentes, vous pouvez utiliser la fonctionnalité Priorité de récupération pour une optimisation plus poussée.
Utiliser le préchargement après Chrome 95
La fonctionnalité Priorité de récupération était disponible pour un essai dans les versions 73 à 76 de Chrome, mais n'a pas été publiée en raison de problèmes de priorisation liés aux préchargements corrigés dans Chrome 95. Avant Chrome 95, les requêtes émises via <link rel=preload> commencent toujours avant les autres requêtes vues par l'outil d'analyse de préchargement, même si les autres requêtes ont une priorité plus élevée.
Avec le correctif de Chrome 95 et l'amélioration de la priorité de récupération, nous espérons que les développeurs commenceront à utiliser le préchargement conformément à l'objectif prévu, qui consiste à précharger les ressources non détectées par l'analyseur (polices, importations, images LCP d'arrière-plan). L'emplacement de la suggestion preload a une incidence sur le moment où la ressource est préchargée. Voici quelques points clés concernant l'utilisation du préchargement:
- L'inclusion du préchargement dans les en-têtes HTTP le fera passer avant tout le reste.
- En règle générale, les préchargements se chargent dans l'ordre dans lequel l'analyseur y parvient pour toute priorité supérieure à "Moyenne". Soyez donc prudent si vous incluez des préchargements au début du code HTML.
- Les préchargements de police sont plus efficaces vers la fin de la tête ou le début du corps.
- Les préchargements (
import()oumodulepreloaddynamiques) d'importation doivent être effectués après le tag de script qui nécessite l'importation (afin que le script lui-même soit chargé/analysé en premier). Fondamentalement, si la balise de script charge un script qui déclenche la charge des dépendances, assurez-vous que<link rel=preload>pour les dépendances se trouve après la balise de script parent. Sinon, les dépendances risquent d'être chargées avant le script principal. Dans le bon ordre, le script principal peut être analysé/évalué pendant le chargement des dépendances. - Les préchargements d'images ont une priorité "Faible" ou "Moyenne" (sans priorité de récupération). Ils doivent être classés par rapport aux scripts asynchrones et aux autres tags de priorité faible ou inférieure.
Historique
La fonctionnalité Fetch Priority a été testée d'abord dans Chrome lors d'une phase d'évaluation en 2018, puis une nouvelle fois en 2021 avec l'attribut importance. À l'époque, on les appelait Priority Hints (Indicateurs de priorité). Dans le cadre du processus de création de normes Web, l'interface est désormais remplacée par fetchpriority pour le langage HTML et par priority pour l'API Fetch de JavaScript. Pour éviter toute confusion, nous désignons désormais cette API par le terme "Priorité de récupération".
Conclusion
Les développeurs sont susceptibles d'être intéressés par la fonctionnalité Fetch Priority 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 commandes supplémentaires pour obtenir la séquence de chargement souhaitée.