Optimiser la priorité de chargement des ressources (fetchpriority)
Utilisez l'attribut fetchpriority pour augmenter ou réduire la priorité de vos ressources et accélérer l'affichage de l'image LCP.
Le navigateur attribue automatiquement une priorité à chaque ressource qu’il charge : élevée pour le CSS et les polices, plus faible pour les images, par exemple. Cette hiérarchisation interne est efficace, mais elle ne correspond pas toujours à l’importance réelle des éléments pour votre page. L’API Fetch Priority, via l’attribut fetchpriority, vous permet d’ajuster ce comportement.
C’est un levier précieux pour le SEO, en particulier sur le Largest Contentful Paint (LCP). En augmentant la priorité de l’image principale, vous l’affichez plus vite et améliorez ce Signal Web essentiel avec relativement peu d’efforts. Inversement, vous pouvez déprioriser des ressources secondaires pour libérer de la bande passante.
La hiérarchie de priorités du navigateur est bonne par défaut, mais elle ignore ce que vous savez de votre page. C’est tout l’intérêt de fetchpriority. Le geste qui paie presque à chaque fois : élever la priorité de l’image LCP et abaisser celle du superflu, pour que le navigateur travaille dans l’ordre qui compte pour l’utilisateur.
L'attribut fetchpriority et ses valeurs
L’attribut fetchpriority s’applique aux éléments link, img et script. Il définit une priorité relative : il augmente ou diminue la priorité par défaut d’un cran, sans la fixer arbitrairement à élevée ou faible. C’est l’un des indices de ressources les plus simples à mettre en œuvre. Le tableau suivant détaille les trois valeurs disponibles.
| Valeur | Effet | Usage type |
|---|---|---|
high |
Le navigateur priorise la ressource plus que d’habitude |
Image LCP, script critique |
low |
Le navigateur déprioritise la ressource |
Image de carrousel hors écran, données secondaires |
auto |
Valeur par défaut, le navigateur choisit seul |
Comportement standard sans intervention |
Augmenter la priorité de l'image LCP
Par défaut, les images démarrent en priorité faible, puis passent en priorité élevée après la mise en page si elles sont dans la fenêtre d’affichage. Ce délai pénalise le LCP. En marquant l’image principale avec fetchpriority= »high », vous la faites partir immédiatement en priorité élevée. Sur la page Google Flights, ce simple ajout a fait passer le LCP de 2,6 s à 1,9 s.
<img src="lcp-image.jpg" fetchpriority="high">
<link rel="preload" href="/lcp-image.jpg" as="image" fetchpriority="high">Réduire la priorité du superflu
fetchpriority sert aussi à ralentir ce qui n’est pas urgent. Les images hors écran d’un carrousel, par exemple, peuvent être jugées assez proches par le navigateur et chargées trop tôt : fetchpriority= »low » les remet à leur place. Vous pouvez de même déprioriser un preload non critique, ou rendre un appel de données d’arrière-plan moins prioritaire qu’un appel déclenché par l’utilisateur.
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<link rel="preload" as="script" href="non-critique.js" fetchpriority="low">Ne confondez pas les deux. Le préchargement avance la découverte d’une ressource mais la récupère en priorité par défaut. fetchpriority, lui, ne change pas la visibilité : il ajuste seulement la priorité. De plus, c’est une indication, pas une directive : le navigateur peut appliquer ses propres heuristiques pour arbitrer.
À faire
- booster l’image LCP avec high
- déprioriser le hors-écran avec low
- mesurer l’effet en conditions réelles
À éviter
- confondre fetchpriority et preload
- tout passer en high
- oublier que les CDN n’appliquent pas tous la hiérarchisation HTTP/2 de façon uniforme
Points clés à retenir
- Marquez l'image LCP avec fetchpriority="high"
- Déprioritisez les images et données secondaires avec low
- Combinez-le avec preload pour plus de précision
- Rappelez-vous que c'est une indication, pas un ordre
- Mesurez l'impact, surtout sur connexions lentes
fetchpriority ajuste la priorité relative de récupération des ressources.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Comment l'attribut fetchpriority agit-il sur la priorité d'une ressource ?
- Il supprime toute priorité attribuée par le navigateur
- Il fixe la priorité à élevée de façon absolue
- Il définit une priorité relative, en augmentant ou diminuant la valeur par défaut d'un cran
L’attribut
fetchprioritys’applique aux élémentslink,imgetscript. Il définit une priorité relative en augmentant ou diminuant la priorité par défaut d’un cran. -
Comment accélérer le chargement de l'image LCP ?
- En la chargeant en lazy-load au-dessus de la ligne de flottaison
- En lui appliquant fetchpriority="low" pour la charger en arrière-plan
- En la marquant avec fetchpriority="high" pour qu'elle parte immédiatement en priorité élevée
Par défaut, les images démarrent en priorité faible, ce qui retarde le LCP. En marquant l’image principale avec
fetchpriority="high", elle part immédiatement en priorité élevée. -
fetchpriority="high" garantit-il une priorité élevée ?
- Non, c'est une priorité relative et une simple indication que le navigateur peut ignorer selon ses heuristiques
- Oui, sauf en HTTP/2
- Oui, le navigateur l'applique systématiquement
fetchpriority="high"exprime une priorité relative et reste une indication. Le navigateur peut conserver ses propres choix selon ses heuristiques.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vous voulez vérifier si vos ressources critiques partent avec la bonne priorité ?