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 de pouvoir les télécharger dans un 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 la fenêtre d'affichage peuvent avoir une priorité High, et la priorité du code CSS à chargement anticipé qui utilise des <link> 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.
Cette page traite de l'API Fetch Priority et de l'attribut HTML fetchpriority, qui vous permet de déterminer 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:
- Augmentation de la priorité de l'image LCP en spécifiant
fetchpriority="high"sur l'élément d'image, ce qui a pour effet d'accélérer le LCP. - Augmentation de la priorité des scripts
async, en utilisant une meilleure sémantique que le hack le plus courant actuel (insertion d'un<link rel="preload">pour le scriptasync). - Diminution de la priorité des scripts tardifs pour permettre un meilleur séquençage avec les images.
Par le passé, les développeurs ont eu une influence limitée sur la priorité des ressources en utilisant le préchargement et la préconnexion. Le préchargement vous permet d'indiquer au navigateur les ressources critiques que vous souhaitez charger tôt avant qu'il ne les détecte naturellement. Cette fonctionnalité est particulièrement utile pour les ressources plus 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 peut contribuer à améliorer des métriques telles que le délai de latence du 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 conseils sur les 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 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.
Priorité des ressources
La séquence de téléchargement des ressources dépend de la priorité attribuée au navigateur pour chaque ressource de la page. Les facteurs qui peuvent affecter la logique de calcul prioritaire sont les suivants:
- Type de ressource, comme les fichiers CSS, les polices, les scripts, les images et les ressources tierces.
- Emplacement ou ordre dans lequel le document fait référence à des ressources.
- Indique si les attributs
asyncoudefersont utilisés dans les 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 à un lors de la phase de blocage de la mise en page | ||||
|---|---|---|---|---|---|
| Priorité de clignotement |
VeryHigh | Haute | Format moyen | Faible | VeryLow |
| Outils de développement Priorité |
Meilleure | Haute | Format moyen | Faible | 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) | ||||
| Importation | |||||
| Image (dans la fenêtre d'affichage) | Image (5 premières images > 10 000 px2) | Images | |||
| 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é calculée, dans l'ordre dans lequel elles sont découvertes. 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. (N'oubliez pas d'inclure la colonne priorité en effectuant un clic droit sur les en-têtes du tableau et en cochant cette case).
type = "font" sur la page d'informations des actualités de la BBC
type = "script" sur la page d'informations des actualités de la BBC.Lorsque les priorités changent, vous pouvez voir les priorités initiale et finale dans le paramètre Lignes de requêtes volumineuses ou dans une info-bulle.
Dans quels cas utiliser la priorité Fetch ?
Maintenant que vous comprenez la logique de priorisation du navigateur, vous pouvez modifier l'ordre de téléchargement de votre page afin d'optimiser ses performances et les métriques Core Web Vitals. Voici quelques exemples de modifications que vous pouvez apporter pour influer sur 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 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 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, généralement hors écran, peuvent avoir une priorité inférieure.
- Les images dans la fenêtre d'affichage commencent généralement avec une priorité de
Low. 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 des images critiques, comme les images héros. Si vous indiquez la priorité de récupération dans le balisage, l'image commence à une prioritéHighet se charge beaucoup plus tôt. Pour tenter d'automatiser quelque peu ce processus, Chrome définit la prioritéMediumpour les cinq premières images plus grandes, mais unefetchpriority="high"explicite sera encore meilleure.
Le préchargement est toujours requis pour la découverte anticipée d'images LCP incluses en tant qu'arrière-plans CSS. Pour optimiser la priorité de vos images de fond, incluezfetchpriority='high'dans le préchargement. - Déclarer des scripts comme
asyncoudeferindique au navigateur de les charger de manière asynchrone. Toutefois, comme indiqué dans le tableau des priorités, ces scripts se voient également attribuer une priorité "Faible". Vous pouvez augmenter leur priorité tout en assurant le téléchargement asynchrone, en particulier pour les scripts essentiels à l'expérience utilisateur. - Si vous utilisez l'API JavaScript
fetch()pour récupérer des ressources ou des données de manière asynchrone, le navigateur lui attribue la prioritéHigh. Vous souhaitez peut-être que certaines de vos extractions s'exécutent avec une priorité inférieure, en particulier si vous combinez des appels d'API en arrière-plan avec des appels d'API qui répondent aux entrées utilisateur. Marquez les appels d'API en arrière-plan comme prioritéLowet les appels d'API interactifs comme prioritéHigh. - Le navigateur attribue aux CSS et aux polices une priorité
High, mais certaines de ces ressources peuvent être plus importantes que d'autres. Vous pouvez utiliser la priorité de récupération pour réduire la priorité des ressources non critiques (notez qu'au début du langage CSS, l'affichage bloque l'affichage, il doit généralement s'agir d'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 fichiers CSS, les polices, les scripts et les images lorsqu'ils sont téléchargés à l'aide des balises link, img ou script. Les valeurs possibles sont les suivantes:
high: la ressource a une priorité plus élevée et vous souhaitez que le navigateur donne la priorité à un niveau de priorité plus élevé que d'habitude, à condition que la méthode heuristique du navigateur n'empêche pas cela.low: la ressource a une priorité inférieure, et vous souhaitez que le navigateur redéfinisse sa priorité si ses heuristiques le permettent.auto: valeur par défaut, qui permet au navigateur de choisir la priorité appropriée.
Voici quelques exemples d'utilisation de l'attribut fetchpriority dans le balisage, ainsi que la propriété priority équivalente à un 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, pour augmenter ou réduire leur priorité calculée. fetchpriority="auto" (◉) pour 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 fichier à la fois lors de la phase de blocage de la mise en page | ||||
|---|---|---|---|---|---|
| Priorité de clignotement |
VeryHigh | Haute | Format moyen | Faible | VeryLow |
| Outils de développement Priorité |
Meilleure | Haute | Format moyen | Faible | 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) | ⬆◉ | ⬇ | |||
| Importation | ◉ | ||||
| Image (dans la fenêtre d'affichage - après la mise en page) | ⬆◉ | ⬇ | |||
| Image (5 premières images > 10 000 px2) | ⬆ | ◉ | ⬇ | ||
| Images | ⬆ | ◉⬇ | |||
| 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'il augmente ou diminue la priorité par défaut selon 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"/"La plus élevée", et l'utilisation de fetchpriority="low" pour ces éléments conserve la priorité "Élevée". Aucune de ces situations n'implique de définir explicitement la priorité sur High ou Low.
Cas d'utilisation
Utilisez l'attribut fetchpriority lorsque vous souhaitez donner au navigateur un indice supplémentaire sur 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
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 de la fenêtre d'affichage, elles peuvent être considérées comme "suffisamment proches" pour qu'elles atteignent high et se chargent même si un attribut load=lazy est ajouté. fetchpriority="low" est donc la solution adaptée.
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. Elle a réduit le temps de chargement de la page de 2 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 pour lesquels votre page doit être interactive doivent se charger rapidement, mais ils 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 ultérieurement sur la page, vous pouvez les charger avec une priorité inférieure:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Cela bloquera toujours l'analyseur lorsqu'il atteindra ce script, mais autorisera le contenu antérieur à être traité en priorité.
Si le DOM terminé est nécessaire, une autre solution consiste à utiliser l'attribut defer (qui s'exécute, dans l'ordre, après DOMContentLoaded), ou même async en bas de la page.
Diminuez la priorité des récupérations de données non critiques
Le navigateur exécute fetch avec une priorité élevée. Si plusieurs extractions peuvent se déclencher simultanément, vous pouvez utiliser la priorité par défaut élevée pour les extractions 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'});
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, mais vous devez tenir compte de certains points lors de l'utilisation de la priorité de récupération:
- L'attribut
fetchpriorityest une indication, et non une directive. Le navigateur tente de respecter les préférences du développeur, mais il peut également appliquer ses préférences de priorité des ressources afin de résoudre les conflits. Ne confondez pas la priorité de récupération et le préchargement:
- Le préchargement est une extraction obligatoire, pas une indication.
- Le préchargement permet au navigateur de découvrir une ressource de manière anticipée, mais il récupère tout de même la ressource avec la priorité par défaut. À l'inverse, la priorité de récupération n'aide pas à améliorer 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 le niveau de précision de la hiérarchisation. Si vous avez 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 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érationhighpeut améliorer davantage le LCP. Si une image critique est une image de fond CSS, préchargez-la avecfetchpriority = "high".L'amélioration du temps de chargement par le biais de la priorisation est plus pertinente dans les environnements où le nombre de ressources en concurrence pour la bande passante réseau disponible est plus élevé. 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 ce cas, la hiérarchisation peut aider à résoudre les goulots d'étranglement.
Les CDN n'implémentent pas la priorisation HTTP/2 de manière uniforme, de la même manière pour HTTP/3. Même si le navigateur communique la priorité à partir de la priorité de récupération, il est possible que le CDN ne redéfinisse pas la priorité des ressources dans l'ordre spécifié. 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 d'utiliser la priorité de récupération uniquement pour la priorisation du navigateur interne, 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 de faible priorité telles que les images sont souvent bloquées pendant que le navigateur traite les éléments
<head>critiques.Vous ne pourrez peut-être pas introduire la priorité de récupération comme bonne pratique dans votre conception initiale. Plus tard dans votre cycle de développement, vous pouvez attribuer les priorités aux différentes ressources de la page. Si elles ne correspondent pas à vos attentes, vous pouvez utiliser la priorité de récupération pour une optimisation plus poussée.
Les développeurs doivent 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.
La priorité de récupération concerne la manière dont la ressource doit être récupérée lors de l'extraction.
Conseils pour utiliser les préchargements
Tenez compte des points suivants lorsque vous utilisez des préchargements:
- L'inclusion d'un préchargement dans les en-têtes HTTP le place avant tout le reste dans l'ordre de chargement.
- En règle générale, les préchargements se chargent dans l'ordre où l'analyseur les reçoit, pour tous les éléments ayant une priorité
Mediumou supérieure. Soyez prudent si vous incluez des préchargements au début de votre code HTML. - Les préchargements de police sont généralement plus efficaces vers la fin de la tête ou le début du corps.
- Les préchargements dynamiques
import()oumodulepreloaddoivent s'exécuter après le tag de script qui nécessite l'importation. Assurez-vous donc d'abord que le script est chargé ou analysé pour pouvoir être évalué pendant le chargement de ses dépendances. - Les préchargements d'images ont une priorité
LowouMediumpar défaut. Classez-les 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, il s'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 l'appelons désormais "Priorité de récupération de l'API".
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. Il dispose désormais de commandes supplémentaires pour obtenir la séquence de chargement souhaitée.