Was ist Largest Contentful Paint (LCP)?

Largest Contentful Paint misst, wann das größte sichtbare Element above the fold fertig gerendert ist. In Storefronts ist das fast immer das Hero-Bild, ein Produktfoto auf der PDP oder die Headline einer landing-page. LCP ist der meistdiskutierte Wert der Core Web Vitals, weil er den Moment einfängt, in dem eine Seite gefühlt "fertig" ist.

Definition

LCP erfasst den Render-Zeitpunkt des größten Bildes, Video-Posters oder Textblocks im Viewport beim ersten Paint. Der Wert kommt aus der LargestContentfulPaint-Browser-API und wird über das Chrome User Experience Report auf dem 75. Perzentil aggregiert. Google bewertet bis 2,5 Sekunden als gut, bis 4 Sekunden als verbesserungswürdig, darüber als schlecht. Einfluss nehmen Time to First Byte aus dem Render-Origin, Größe und Priorität der LCP-Ressource, blockierendes CSS oder JS im Critical Path und client-seitige Hydration, die das Paint verzögert, wenn Frameworks als First-Party-JS ausgeliefert werden.

Warum es zählt

LCP korreliert eng mit Conversion. Eine Sekunde Verzögerung auf einer PDP senkt nachweislich Add-to-Cart-Raten und Umsatz pro Session, besonders mobil. Da Hero-Assets die Metrik dominieren, sind image-optimization und priorisiertes Fetching hochwirksame Hebel. LCP legt auch Architekturentscheidungen offen: eine träge Commerce-API, ein unterdimensionierter Origin oder ein überfrachtetes React-Bundle zeigen sich als LCP-Regression. Als Teil des Page-Experience-Signals fließt LCP in die search-engine-optimization-seo ein und greift in conversion-rate-optimization-cro-Maßnahmen.

Anwendungsfälle

Headless-Teams mit Next.js oder Astro adressieren LCP, indem sie das Hero-Bild preloaden, AVIF oder WebP aus einem content-delivery-network-cdn ausliefern und Above-the-fold-Markup per SSR oder Edge Rendering auf Vercel Edge oder Cloudflare Workers erzeugen. ISR hält PDPs und Kategorieseiten warm, sodass die LCP-Ressource aus dem Cache kommt. Zusätzlich setzen Teams fetchpriority="high" am LCP-Bild, deferren unkritisches First-Party-JS und reduzieren Drittanbieter-Tags aus dem content-management-system-cms-Tagmanager. LCP-Dashboards je Template und Device steuern Releases und stützen Business-Cases für Headless-Replatformings.

Verwandt

Mehr dazu: Performance and Core Web Vitals · Composable Headless Frontend.