Priorité d’image et Preload en 2025

L’image visible en premier décide souvent de la vitesse perçue et du LCP. Le design de livraison doit être explicite.

TL;DR

• Attribuer fetchpriority="high" à un seul candidat LCP
• Ajouter <link rel="preload" as="image"> uniquement si vraiment nécessaire
• Pour le responsive, soigner imagesrcset/imagesizes et verrouiller la mise en page avec aspect-ratio
• Autres images: loading="lazy" + decoding="async" pour préserver l’INP
• Côté CDN, vérifier Vary: Accept et la négociation AVIF/WebP

Liens internes: Livraison centrée INP, Comparaison de formats, Optimisation des sprites et animations — Sprite Sheet / WebP / APNG 2025

Parcours de décision

1. Héros/above‑the‑fold → LCP
2. Surface importante dans le viewport → fetchpriority="high" envisageable
3. Bloquant rendu → Preload ciblé, sinon s’abstenir
4. Photo vs illustration → Préparer encodage et sizes réalistes
5. INP → paresse par défaut, JS non critique retardé

Implémentation de référence

<link
  rel="preload" as="image" href="/hero/landing.avif"
  imagesrcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  imagesizes="(max-width: 768px) 92vw, 1200px" type="image/avif"
/>
<img
  src="/hero/landing-1200.avif"
  srcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630" fetchpriority="high" decoding="async"
  alt="Visuel principal" style="aspect-ratio: 1200/630; object-fit: cover"
/>

Erreurs classiques

• Multiplier les preloads → concurrence inutile, priorité diluée
• sizes imprécis → surdimensionnement, LCP dégradé
• fetchpriority generique → une page, une image LCP
• CSS seul → sans infos de mise en page tôtives, CLS possible

Livraison et métriques

• LCP: priorité haute + srcset/sizes précis
• Non‑LCP: lazy/async, prefetch ciblé si besoin
• CDN: négociation propre et cache aligné

Checklist

• [ ] Identifier l’unique LCP
• [ ] Ajuster sizes à la largeur réelle
• [ ] Verrouiller aspect-ratio
• [ ] Mesurer LCP/INP

FAQ

• Q: fetchpriority ou preload ?

• A: Rôles différents. Priorité vs amorçage. Combine pour le LCP uniquement.

• Q: preload casse srcset ?

• A: Non, si imagesrcset/imagesizes sont fournis sur le lien.

Résumé

La vitesse perçue vient d’un design clair: un candidat LCP, des tailles justes, et peu de magie.