Qu'est-ce que le Largest Contentful Paint (LCP) ?

Le Largest Contentful Paint mesure le temps nécessaire pour que le plus grand élément de contenu visible au-dessus de la ligne de flottaison achève son rendu. Dans les boutiques de commerce, c'est presque toujours l'image hero, une photo produit sur une PDP ou le titre d'une landing-page. Le LCP est la plus citée des Core Web Vitals car elle capture le moment perçu où une page semble « prête ».

Définition

Le LCP enregistre le temps de rendu de la plus grande image, affiche de vidéo ou bloc de texte dans le viewport au premier paint. La valeur provient de l'API navigateur LargestContentfulPaint, rapportée au 75e percentile via le Chrome User Experience Report. Google considère les valeurs jusqu'à 2,5 secondes comme bonnes, jusqu'à 4 secondes comme à améliorer, et au-delà comme mauvaises. Le LCP est influencé par le Time to First Byte de l'origine de rendu, la taille et la priorité de la ressource LCP, le CSS ou JS bloquant le rendu sur le chemin critique, et l'hydratation côté client qui retarde le paint quand les frameworks sont livrés en first-party-JS.

Pourquoi c'est important

Le LCP corrèle étroitement avec la conversion. Un retard d'une seconde sur une PDP fait chuter de façon mesurable les taux d'ajout au panier et abaisse le revenu par session, surtout sur mobile. Comme les assets hero dominent la métrique, l'image-optimization et le fetch priorisé deviennent des interventions à fort levier. Le LCP expose aussi les choix d'architecture : une API commerce amont lente, une origine sous-dimensionnée ou un bundle React surdimensionné se traduisent tous par des régressions de LCP. En tant que composante du signal page-experience, il alimente le search-engine-optimization-seo et recoupe le travail de conversion-rate-optimization-cro.

Cas d'usage

Les équipes headless sur Next.js ou Astro traitent généralement le LCP en préchargeant l'image hero, en servant de l'AVIF ou du WebP depuis un content-delivery-network-cdn et en rendant le markup au-dessus de la ligne de flottaison via SSR ou Edge Rendering sur Vercel Edge ou Cloudflare Workers. L'ISR sert à maintenir les PDP et les pages catégorie chaudes pour que la ressource LCP soit livrée depuis le cache. Les équipes adoptent aussi fetchpriority="high" sur l'image LCP, diffèrent le first-party-JS non critique et élaguent les balises tierces chargées via le tag manager de leur content-management-system-cms. Des tableaux de bord LCP segmentés par template et par appareil guident les décisions de release et les business cases de replatforming headless.

Voir aussi

Découvrez Performance and Core Web Vitals · Composable Headless Frontend.