Optimiser la priorité des images

Les navigateurs utilisent des heuristiques pour attribuer des priorités de chargement aux images, mais ces valeurs par défaut ne correspondent pas toujours au Largest Contentful Paint (LCP) de votre page.

L'utilisation de fetchpriority sur un élément <img> vous permet de signaler explicitement l'importance d'une image au navigateur, ce qui garantit que les images critiques se chargent plus rapidement, tandis que les images non essentielles ne se disputent pas la bande passante.

L'attribut loading=lazy empêche le téléchargement des images lorsqu'elles sont suffisamment hors écran, ce qui peut aider à prioriser les images.

Mise en œuvre

1. Identifier l'image LCP : déterminez quelle image est la plus susceptible d'être le Largest Contentful Paint (généralement l'image héros en haut de la page).
2. Augmenter la priorité du LCP : ajoutez fetchpriority="high" à l'élément <img> pour le candidat LCP.
3. Définir une priorité plus faible pour les images non critiques : pour les images qui font partie d'une UI secondaire ou qui ne sont révélées qu'après une interaction de l'utilisateur (comme les mégas menus, les fenêtres modales ou les diapositives de carrousel hors écran), ajoutez fetchpriority="low".
4. Optimisez le chargement différé : n'utilisez jamais loading="lazy" sur l'image LCP. Pour les images standards situées en dessous de la ligne de flottaison, loading="lazy" suffit à différer la requête jusqu'à ce que l'utilisateur fasse défiler la page jusqu'à elles. Évitez d'ajouter fetchpriority="low" à ces images, car vous souhaitez qu'elles se chargent avec une priorité normale une fois que l'utilisateur les fait défiler. Réservez fetchpriority="low" pour les images qui sont techniquement "au-dessus de la ligne de flottaison", mais qui ne sont pas visibles au départ (par exemple, les diapositives de carrousel masquées ou les mégamenus). Pour ces images masquées, vous pouvez également utiliser loading="lazy". Le navigateur gérera le timing de la requête tout en respectant la faible priorité.
5. Privilégiez les priorités par défaut : si une image doit avoir une priorité de chargement normale, omettez complètement l'attribut fetchpriority au lieu de le définir sur auto. Il s'agit d'une convention stylistique visant à garder votre code HTML plus propre tout en s'appuyant sur les heuristiques natives du navigateur.

Exemple de code

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Bonnes pratiques

• OBLIGATOIRE : appliquez toujours fetchpriority="high" à l'image LCP.
• OBLIGATOIRE : n'utilisez fetchpriority="high" que sur une ou deux images critiques au maximum pour éviter la contention du réseau et la dilution de l'amélioration de la priorité.
• OBLIGATOIRE : Utilisez fetchpriority="low" pour les images qui sont techniquement "au-dessus de la ligne de flottaison", mais initialement masquées (par exemple, les diapositives de carrousel masquées, les images de mégamenu).
• OBLIGATOIRE : N'utilisez pas fetchpriority="low" sur les images standards en dessous de la ligne de flottaison qui utilisent déjà loading="lazy". Ces images doivent se charger avec une priorité normale une fois qu'elles entrent dans la fenêtre d'affichage.
• RECOMMANDATION : Évitez d'utiliser fetchpriority="auto". Si vous souhaitez utiliser la priorité par défaut, omettez complètement l'attribut pour que votre code HTML reste propre.
• NE COMBINEZ PAS fetchpriority="high" avec loading="lazy".
• N'UTILISEZ PAS l'attribut importance obsolète. Il a été remplacé par fetchpriority et n'est compatible avec aucun navigateur.
• NE PAS utiliser la valeur loading="auto" obsolète. Il était initialement compatible avec Chrome, mais il a été supprimé et n'est compatible avec aucun navigateur.

Stratégie de remplacement

L'attribut fetchpriority est une amélioration progressive de l'élément <img>. Si un navigateur ne le prend pas en charge, l'attribut est ignoré et le navigateur utilise ses heuristiques de priorité par défaut.