Fetchpriority et decoding en HTML : Accélérer votre LCP

Ce tutoriel va vous expliquer ce que sont les attributs fetchpriority et decoding appliqués aux images et ressources, à quoi ils servent, leurs avantages et limites, et comment les utiliser correctement pour améliorer le Largest Contentful Paint (LCP) et l’expérience utilisateur.

Nous aborderons également un cas pratique complet et des exemples de code prêts à l’emploi.

Qu’est-ce que fetchpriority ?

L’attribut fetchpriority est un indice (un « hint ») que vous pouvez ajouter à des éléments HTML comme <img>, <link> ou <script> pour indiquer au navigateur quelle priorité donner au téléchargement de cette ressource par rapport aux autres ressources.

La valeur peut être high, low ou auto.

Cet attribut ne force pas magiquement un résultat, mais il guide le moteur de téléchargement du navigateur afin qu’il commence par récupérer en priorité les ressources critiques, comme l’image LCP qui apparaît au-dessus de la ligne de flottaison.

Cette fonctionnalité est documentée par les spécifications et les guides pratiques du web, et elle est conseillée notamment pour booster l’affichage de l’élément LCP. 

Pourquoi fetchpriority est utile pour le LCP ?

Le Largest Contentful Paint mesure le temps nécessaire pour afficher le plus grand bloc de contenu visible (souvent une grosse image ou une bannière). Si cette image est téléchargée tardivement parce qu’elle a une faible priorité, le LCP augmente et votre score PageSpeed se dégrade.

En appliquant fetchpriority="high" à l’image LCP, vous indiquez au navigateur de la télécharger plus tôt, ce qui peut réduire sensiblement le temps de rendu de cet élément et donc améliorer votre LCP.

Les bonnes pratiques de Google et des guides techniques web recommandent d’augmenter la priorité de l’image LCP plutôt que de la charger paresseusement (lazy loading). 

Précision sur le fonctionnement : hint versus obligation

Il est important de comprendre que fetchpriority est un indice. Si le réseau est saturé, si le serveur est lent, ou si l’utilisateur dispose d’une connexion mobile très faible, l’attribut ne pourra pas résoudre tous les problèmes.

De plus, si vous appliquez fetchpriority="high" à trop de ressources, vous annulez l’effet voulu puisque le navigateur devra choisir entre plusieurs éléments marqués « high ».

Utilisez fetchpriority de manière ciblée et limitée.

Qu’est-ce que decoding ?

L’attribut decoding est une indication donnée au navigateur sur la façon d’effectuer le décodage d’une image après son téléchargement. Il existe trois valeurs possibles : sync, async et auto. 

• sync demande au navigateur d’attendre le décodage de l’image avant de procéder à la peinture qui l’inclut, ce qui peut éviter certains artefacts visuels mais bloquer le rendu. 
• async permet au navigateur d’afficher d’autres éléments puis d’appliquer l’image quand elle est décodée, ce qui peut réduire le blocage de la première peinture. 
• auto laisse le navigateur décider. La documentation officielle précise que decoding sert de hint et que l’impact réel peut varier selon le navigateur et la situation.

Quand utiliser decoding="async" ou decoding="sync" ?

Si votre image est petite et critique pour l’aspect visuel (par exemple un logo qui doit apparaître immédiatement sans décalage), decoding="sync" peut être utile.

Si l’image est grande et que vous préférez que la page se peigne rapidement puis que l’image arrive ensuite, decoding="async" est préférable.

Dans la plupart des cas modernes, decoding="async" est un bon choix par défaut pour éviter que le décodage d’une image n’empêche la page de progresser dans son rendu.

Compatibilité et état actuel du support navigateur

Le support de fetchpriority et du mécanisme Fetch Priority a progressé dans les navigateurs récents, Chrome et Chromium-based browsers ayant été parmi les premiers à l’adopter. Firefox, Safari et d’autres navigateurs ont progressivement intégré le support, mais il peut encore y avoir des différences fines selon les versions.

L’attribut decoding est bien supporté par la plupart des navigateurs modernes et fournit une API fiable pour donner des indications sur le décodage des images. Il est recommandé de vérifier le support cible via des ressources de compatibilité comme Can I Use et la documentation MDN si votre audience utilise des navigateurs anciens.

Comment fetchpriority et decoding interagissent-ils avec d’autres mécanismes ?

fetchpriority agit au niveau du téléchargement. Il complète les mécanismes comme rel="preload" ou loading="lazy". 

rel="preload" force le navigateur à démarrer le téléchargement tôt, tandis que fetchpriority indique la priorité relative aux autres téléchargements.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Vous devez éviter d’utiliser loading="lazy" sur l’image LCP et en parallèle marquer la même image fetchpriority="high", car le lazy loading retarderait le déclenchement du téléchargement malgré la priorité.

Concernant le décodage, même si l’image est téléchargée rapidement grâce à fetchpriority, un décodage synchrone peut retarder la peinture, d’où l’intérêt de combiner fetchpriority="high" avec decoding="async" pour la plupart des scénarios LCP.

Optimiser une image LCP avec fetchpriority et decoding

Étape 1: identifier votre image LCP

Ouvrez PageSpeed Insights ou utilisez Lighthouse pour repérer quel élément est considéré comme LCP. Il s’agit souvent de l’image hero ou d’un grand bloc d’image en haut de page. Notez le chemin et la taille approximative de l’image. PageSpeed Insights vous montrera la ressource exacte.

Étape 2: insérer l’image directement dans le HTML (éviter JS pour l’affichage)

Assurez-vous que l’image LCP est présente dans l’HTML initial et non injectée via JavaScript après le chargement. Si elle est insérée via JS, le navigateur ne peut pas la prioriser correctement. Placez l’élément <img> dans le HTML au moment du rendu initial. Cela permet au navigateur d’envisager son téléchargement dès que possible.

Étape 3: ajouter les attributs essentiels dans l’ordre suivant

Ajoutez width et height pour empêcher les déplacements de layout (CLS), ajoutez srcset et sizes pour la version responsive. Retirez loading="lazy" si présent, et enfin ajoutez fetchpriority="high" et decoding="async".

Ne surchargez pas la page avec d’autres assets high. Suivez l’exemple ci-dessous.

Exemple pratique : HTML responsive optimisé LCP)

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Page optimisée LCP</title>
  <!-- Si vous utilisez preload pour des cas très spécifiques, faites-le avec précaution -->
  <link rel="preload" as="image" href="/images/hero-1200.jpg">
</head>
<body>
  <!-- Image LCP : insérée dans le HTML, pas lazy, priorité haute, décodage async -->
  <img
    src="/images/hero-1200.jpg"
    srcset="/images/hero-600.jpg 600w, /images/hero-900.jpg 900w, /images/hero-1200.jpg 1200w"
    sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, 1200px"
    alt="Bannière principale"
    width="1200"
    height="600"
    fetchpriority="high"
    decoding="async"
  >
</body>
</html>

Dans cet exemple, fetchpriority="high" indique au navigateur de privilégier le téléchargement, et decoding="async" permet de ne pas bloquer la peinture pendant le décodage.

Le srcset et les attributs width/height améliorent la réactivité et évitent le CLS.

Si vous avez un affichage critique qui nécessite un rendu absolument synchronisé visuellement, ajustez le decoding en conséquence.

JavaScript : définir dynamiquement la priorité (optionnel)

Si vous générez dynamiquement l’image en JavaScript, vous pouvez toujours définir la priorité via la propriété fetchPriority de l’élément image :

const img = document.querySelector('#monHero');
if (img) {
  img.fetchPriority = 'high';
  img.decoding = 'async';
}

Cette API reflète l’attribut HTML et fonctionne lorsque vous devez manipuler l’élément après son insertion. Notez que si l’image est créée tardivement dans le cycle de chargement, la mise en priorité n’aura pas le même effet que si l’image existait dès le HTML initial.

Limites à connaître :
Le gain apporté par fetchpriority dépend fortement du contexte réseau et du serveur. Si votre serveur met plusieurs secondes à répondre, augmenter la priorité ne compensera pas un TTFB élevé.

De plus, abuser de fetchpriority="high" sur trop d’assets dilue son effet. Les navigateurs prennent en compte leurs propres heuristiques et la qualité de la connexion de l’utilisateur.

Enfin, l’attribut est un hint : sur d’anciens navigateurs il sera ignoré sans casser la page. Pour être sûr du comportement, vérifiez la compatibilité navigateur cible. 

Alternatives et compléments utiles
Si vous voulez forcer le téléchargement très tôt et que vous avez validé que cela vaut le coût, rel="preload" as="image" peut déclencher un téléchargement immédiat.

Attention à ne pas précharger des images inutiles, car cela consomme la bande passante. En complément, optimisez l’image (format moderne comme WebP/AVIF, compression adaptée) et servez-la via un CDN afin de réduire le temps d’obtention des octets. Ces pratiques sont souvent citées dans les guides d’optimisation LCP.

Pour optimiser le LCP :

• Placez l’image LCP dans le HTML
• Donnez-lui des dimensions (width et height)
• Fournissez srcset/sizes pour le responsive
• Retirez loading="lazy" et marquez-la fetchpriority="high".
• Combinez cela avec decoding="async" pour éviter de bloquer la peinture.

N’utilisez fetchpriority="high" que sur les ressources essentielles afin de ne pas saturer la file de priorité. Testez avec PageSpeed Insights et en conditions réelles (Real User Monitoring) pour confirmer l’amélioration.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr