Priorités d’images en 2025 — fetchpriority, preload, HTTP/2 push (retiré)

TL;DR

Stabilisez LCP avec: (1) fetchpriority sur l’image LCP, (2) un unique preload bien réglé, (3) srcset/sizes fidèles au layout, (4) dimensions explicites pour éviter le CLS, et (5) une stratégie cache/CDN claire.

Règle 1 — Priorité explicite du LCP

• Ajoutez fetchpriority="high" sur l’image LCP.
• Si le layout est fixé, loading="eager" et decoding="async" aident.
• Spécifiez toujours width/height pour éviter le CLS.

Exemple Next.js

<img
	src="/hero.avif"
	alt="…"
	width={1200}
	height={630}
	loading="eager"
	decoding="async"
	fetchPriority="high"
/>

Règle 2 — Un seul preload, bien formé

• Utilisez <link rel="preload" as="image" imagesrcset="…" imagesizes="…">.
• N’abusez pas du preload (HTTP/2/3 est multiplexé).
• Mêmes URL que celles utilisées par l’<img> final.

<link
	rel="preload"
	as="image"
	href="/hero-1200.avif"
	imagesrcset="/hero-800.avif 800w, /hero-1200.avif 1200w, /hero-1600.avif 1600w"
	imagesizes="(min-width: 1024px) 1200px, 92vw"
	fetchpriority="high"
/>

Règle 3 — Tailles cohérentes (srcset/sizes)

• Écrivez sizes en reflet exact du CSS; évitez la sur‑distribution.
• Art direction via <picture> si nécessaire.

Règle 4 — Lazy‑load hors écran, pré‑fetch proche du viewport

• loading="lazy" pour les images non critiques.
• Déclenchez un préchargement n+1 au scroll via IntersectionObserver.

Règle 5 — Cache/CDN

• Assets fingerprintés: Cache-Control: public, max-age=31536000, immutable.
• Vary/Accept si CDN fait la négociation de format.

Stratégies par gabarit

• Accueil: LCP unique, priorisation stricte, police en swap.
• Article: couverture priorisée; galeries lazy.
• Listing: miniatures lazy; préchargement progressif.

Mesure & débogage

• Lab: Lighthouse/WebPageTest (LCP, CLS, TBT).
• Field: CrUX/GA4 p75 LCP et CLS.
• DevTools: colonne Priority, cohérence du preload, tailles demandées.

Liens utiles

• Images responsives: Conception d’images responsives 2025 — Guide pratique srcset/sizes
• Compression: Stratégie Ultime de Compression d'Images 2025 – Guide pratique pour optimiser la vitesse perçue sans sacrifier la qualité