Largest Contentful Paint (LCP)

Definition: Largest Contentful Paint (LCP) ist eine der drei Core Web Vitals Metriken und misst die Zeit vom ersten Laden der Seite bis zum vollständigen Rendern des grössten sichtbaren Inhaltselements im Viewport. LCP ist ein Indikator für die wahrgenommene Ladegeschwindigkeit aus Nutzersicht und ein direkter Google-Rankingfaktor seit dem Page Experience Update 2021. Der Zielwert liegt bei unter 2,5 Sekunden.

Erläuterung

LCP repräsentiert den Moment, in dem die Hauptseiteninhalte für den Nutzer sichtbar werden – der Punkt, ab dem eine Seite „fertig geladen" wirkt. Im Gegensatz zu technischen Metriken wie Time to First Byte (TTFB) korreliert LCP stark mit der tatsächlichen Nutzererfahrung: Eine schnelle LCP signalisiert, dass der Nutzer schnell mit dem Lesen oder Interagieren beginnen kann.

LCP-Bewertungsskala

Gut (grün): LCP unter 2,5 Sekunden – optimales Nutzererlebnis
Verbesserungsbedarf (gelb): LCP 2,5–4,0 Sekunden – Optimierungen empfohlen
Schlecht (rot): LCP über 4,0 Sekunden – negative Ranking-Auswirkungen möglich

Welche Elemente als LCP gewertet werden

<img>-Elemente (einschliesslich Bilder mit srcset)
<image>-Elemente innerhalb von SVGs
Video-Thumbnail-Bilder (<video> mit poster-Attribut)
Elemente mit CSS-Hintergrundbild via url()
Block-Level-Textelemente (Absätze, Überschriften) – wenn sie das grösste sichtbare Element sind

Hauptursachen für schlechtes LCP

Langsame Serverantwort (hoher TTFB): Ressourcen können erst nach Serverantwort geladen werden
Render-blocking Ressourcen: CSS und JavaScript blockieren das Rendern des LCP-Elements
Langsam ladende LCP-Ressource: Grosses, unkomprimiertes Bild; kein CDN; keine Preload-Direktive
Client-seitiges Rendering: JavaScript generiert das LCP-Element erst nach dem Laden – zu spät
Lazy Loading des LCP-Elements: Fehler! LCP-Bilder dürfen kein loading="lazy" haben

LCP verbessern: Die effektivsten Massnahmen

LCP-Bild preloaden: <link rel="preload" as="image" href="hero.webp"> im <head>
Bild-Format optimieren: WebP statt JPEG/PNG – bis zu 30 % kleinere Dateigrösse
Bildgrösse korrekt dimensionieren: Keine 2.000-px-Bilder in einem 800-px-Container
TTFB reduzieren: Besseres Hosting, CDN, Server-Side Caching aktivieren
Render-blocking CSS eliminieren: Kritisches CSS inline; restliches CSS asynchron laden
fetchpriority="high" setzen: Dem Browser signalisieren, dass das LCP-Bild Priorität hat

Praxistipp: Identifizieren Sie das LCP-Element Ihrer wichtigsten Seiten in Google PageSpeed Insights oder Chrome DevTools (Performance-Tab → LCP-Markierung). In den meisten Fällen ist es das Hero-Bild oder der erste grosse Textblock. Stellen Sie sicher, dass dieses Element vorgeladen wird (rel="preload") und kein loading="lazy" hat. Diese zwei Massnahmen allein verbessern den LCP-Wert auf den meisten Websites um 30–50 %.