Der Largest Contentful Paint (LCP) ist die Core-Web-Vitals-Metrik, die misst, wie lange es dauert, bis das größte sichtbare Element auf einer Webseite gerendert ist — typischerweise das Hero-Bild, die Hauptüberschrift H1 oder ein großer Text-Block. Sie ist der wichtigste „Perceived Speed"-Indikator und seit 2021 ein direkter Google-Ranking-Faktor. Ziel: Unter 2,5 Sekunden (75. Perzentil) für „Good", 2,5–4 s für „Verbesserung nötig", über 4 s für „Schlecht".
Was LCP konkret bedeutet
Der Browser identifiziert während des Renderings das größte sichtbare Element (gemessen an Render-Fläche, nicht an Datei-Größe). Der LCP ist der Zeitstempel, zu dem dieses Element vollständig sichtbar im Viewport gerendert ist. Beispiel: Eine Magazin-Seite hat ein 1200×800 Hero-Bild. Wenn das Bild nach 1,8 Sekunden vollständig sichtbar ist, LCP = 1,8 s. Wenn statt eines Bildes ein langer Text-Block der größte sichtbare Inhalt ist, gilt der dessen Zeitstempel.
LCP optimieren — die Top-Hebel
Hero-Bild zu WebP/AVIF — sofortige 25–50 % Dateigrößen-Reduktion.
Preload für Hero-Bild — <link rel="preload" as="image" href="hero.webp">.
CDN für Bildauslieferung — geografisch nähere Edge-Server reduzieren TTFB.
Server-Antwortzeit (TTFB) — schlechte Server-Performance ist limitierender Faktor.
Render-Blocking-CSS und -JS reduzieren — verhindert frühes Rendering des Hero-Elements.
Webfonts mit font-display: swap — kein Wartezeit auf Font-Download bei Text-LCP.
Häufige LCP-Killer
Lazy Loading auf Hero-Bild.
Sehr großes unkomprimiertes Hero-JPEG/PNG.
Tag-Manager-getriggerte Banner die above-the-fold rendern und blockieren.
Slow-Server-Response (TTFB > 1 s).
Render-Blocking-Scripts im Head.
Cookie-Banner, die Layout-Shift triggern und LCP verzögern.
Praxisbeispiel
Beispiel: Eine Magazin-Seite hatte LCP 4,3 s (Schlecht). Analyse: 1,8-MB-JPEG-Hero-Bild ohne Komprimierung, Lazy-Loading versehentlich gesetzt, drei Render-Blocking-Scripts im Head. Drei Fixes: Hero zu WebP komprimiert (auf 280 KB), loading="eager" + fetchpriority="high" gesetzt, Scripts auf async/defer. Nach 4 Wochen: LCP 1,9 s — alle drei Maßnahmen waren nötig, einzeln hätten sie nur 30–40 % der Verbesserung geliefert. Ranking-Effekt sichtbar in 6 Wochen.
Haeufige Fragen
Was ist LCP (Largest Contentful Paint)?
LCP misst die Zeit bis zum Rendering des größten sichtbaren Elements im Viewport — meist ein Hero-Bild oder Text-Block. Kernmetrik der Core Web Vitals. Schwellwerte: unter 2,5s „gut", 2,5–4s „ verbesserungsbedürftig", über 4s „schlecht".
Was verzögert LCP typischerweise?
Vier Ursachen: (1) langsame Server-Antwort (TTFB), (2) render-blockierendes CSS/JS, (3) große, unoptimierte Bilder, (4) Client-side-Rendering ohne SSR. Optimierung: TTFB unter 600ms, CSS inline für Above-the-Fold, Bilder komprimiert plus Lazy-Loading.
Wie misst man LCP?
Zwei Wege: (1) Feld-Daten aus CrUX (echte Nutzer, autoritativ für Ranking), (2) Lab-Daten aus Lighthouse (simulierter Browser, für Test-Iteration). Beide zeigen unter „Metriken → LCP" das größte sichtbare Element und die Ladezeit.
Wie verbessert man LCP um mehrere Sekunden?
Über drei Big-Wins: (1) Hero-Bild als AVIF mit fetchpriority=high, (2) render-blockierendes CSS asynchron laden, (3) Server-Response-Time optimieren (CDN, Cache-Strategie). Jeder dieser Schritte bringt oft 1–2 Sekunden LCP-Verbesserung.