Largest Contentful Paint (LCP) misst, wann das größte sichtbare Element einer Page gerendert ist — meistens ein Hero-Bild, eine Headline oder ein größeres Text-Block. LCP ist seit 2021 einer der drei Core Web Vitals und damit direkt ranking-relevant. Google’s Zielwert: unter 2,5 Sekunden in CrUX-Field-Daten.
- Misst das größte sichtbare Element einer Page (Hero, Headline, Bild).
- Google-Zielwerte: < 2,5s gut, 2,5-4s verbesserungswürdig, > 4s schlecht.
- Ranking-Faktor seit Page Experience Update 2021.
- Field-Daten zählen, nicht Lab-Werte aus Lighthouse.
- Haupt-Hebel: LCP-Element preloaden, Bilder zu WebP/AVIF, Server-Response-Time.
- Mobile vs Desktop: Mobile-Wert ist ranking-relevant.
- CrUX-Aktualisierung 28 Tage rollierend — Effekt nach 4-8 Wochen.
- 30 %-Lift typisch nach systematischer Optimierung.
Was LCP technisch misst
Browser bestimmen während des Renders, welches das größte sichtbare Element im Viewport ist. Sobald dieses fertig gerendert ist, wird LCP registriert. Typische LCP-Elemente: Hero-Bild, große Headlines, größere Text-Blocks. Hintergrundbilder zählen nicht.
Web Vitals Library erfasst LCP automatisch im realen Browser. CrUX (Chrome User Experience Report) aggregiert diese Daten über 28 Tage und stellt sie in Search Console und PageSpeed Insights bereit. Google nutzt die 75. Perzentile als ranking-relevanten Wert.
Die drei wichtigsten LCP-Hebel
Wo liegt der LCP-Wert deiner wichtigsten Pages?
Wir messen automatisiert LCP plus die anderen Core Web Vitals und identifizieren die drei größten Optimierungs-Hebel.
Wie sichtbar ist dein Unternehmen für ChatGPT & Co.?
- Kostenlos • Ohne Anmeldung • Ergebnis in 15 Sekunden • DSGVO-konform
LCP optimieren: konkrete Schritte
Schritt 1: LCP-Element identifizieren
Chrome DevTools > Performance Tab > Page neu laden > LCP-Marker im Filmstrip prüfen. Meist Hero-Bild oder größte Headline.
Schritt 2: Preload setzen
Im <head> ein <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> einfügen. Der Browser lädt das Element parallel zum HTML.
Schritt 3: Bilder optimieren
WebP oder AVIF statt JPEG, korrekte width/height-Attribute, srcset für responsive sizes. Verhindert CLS und beschleunigt LCP.
„LCP is the single most impactful Core Web Vital you can optimize. Get it right and the other vitals usually follow.“
Addy Osmani, Google Chrome Engineering
Quellen
- Web.dev LCP Documentation
- Web.dev Optimize LCP Guide
- Chrome UX Report Dashboard
- Chrome Lighthouse Documentation
- Addy Osmani, Chrome Engineering 2024
- SichtbarerWerden Mandate-Audit: LCP-Optimierungen 2024-2026 (intern)
Vom Wissen zur Umsetzung
Drei Schritte zur LCP-Optimierung:
- LCP-Element identifizieren: Chrome DevTools > Performance > Page neu laden > LCP-Marker prüfen.
- Preload setzen:
<link rel="preload">im <head> für das LCP-Element mit fetchpriority=high. - Bilder optimieren: WebP/AVIF konvertieren, korrekte width/height, kein Lazy-Loading auf LCP-Bild.
Für systematische Core-Web-Vitals-Optimierung — siehe unser SEO-Audit-Paket.
Häufige Fragen zu Largest Contentful Paint
Was ist Largest Contentful Paint?
Eine Core-Web-Vitals-Metrik, die misst, wann das größte sichtbare Element einer Page gerendert ist. Ziel: unter 2,5 Sekunden in CrUX-Field-Daten.
Welche Elemente zählen für LCP?
Im Viewport sichtbare Bilder, <video>-Poster-Bilder, Hintergrundbilder via <background-image>, große Text-Blocks. Hintergrundbilder via CSS zählen nicht.
Wie messe ich LCP?
Lab: Lighthouse Mobile-Audit oder PageSpeed Insights. Field: Search Console > Core Web Vitals — aggregiert über 28 Tage aus CrUX.
Was sind die Google-Schwellenwerte?
Gut: unter 2,5 Sekunden. Verbesserungswürdig: 2,5-4 Sekunden. Schlecht: über 4 Sekunden. Werte basieren auf der 75. Perzentile aller realen Nutzerbesuche.
Warum ist mein Lab-LCP gut, aber Field-LCP schlecht?
Lab simuliert ideale Bedingungen. Field misst reale Nutzer auf langsamen Verbindungen und alten Geräten. Field-Wert ist ranking-relevant.
Wie schnell wirken LCP-Verbesserungen?
CrUX-Daten aktualisieren rollierend über 28 Tage. Nach Optimierung dauert es 4-8 Wochen, bis Search Console die Verbesserung zeigt.
Was ist fetchpriority=“high“?
HTML-Attribut, das Browser anweist, eine Ressource priorisiert zu laden. Für LCP-Bilder essentiell — spart oft 200-500ms LCP-Zeit.
Wie wichtig ist Server-Response-Time für LCP?
Sehr. Time-to-First-Byte (TTFB) sollte unter 600ms, idealerweise unter 200ms liegen. Hostings-Provider, CDN und Server-Caching sind die Hebel.
