Largest Contentful Paint (LCP)

Le LCP mesure le temps d'affichage du plus grand élément visible au chargement (image, bloc de texte, vidéo). Objectif : moins de 2,5 secondes.

Mis à jour le

Les 4 sous-parties du LCP

  • TTFB : délai jusqu'au premier octet ; agissez sur le serveur, le CDN et le cache.
  • Délai de chargement : l'image LCP doit être découvrable dans le HTML (pas en CSS ni injectée en JS) ; ajoutez un Preload si besoin.
  • Durée de chargement : poids de la ressource ; voir formats AVIF/WebP et srcset.
  • Délai d'affichage : CSS et JS bloquants ; voir defer et async et CSS critique en ligne.

Checklist de l'image LCP

<img src="/img/hero.avif" width="1200" height="630" fetchpriority="high" alt="Description">
  • jamais de loading="lazy" sur cette image (Lazy loading) ;
  • width et height pour éviter un décalage (CLS) ;
  • ressource servie depuis la même origine ou un CDN préconnecté.

Diagnostiquer

Comparez données terrain et labo dans PageSpeed Insights, puis ouvrez le panneau Performance de Chrome DevTools. Référence : web.dev/lcp.