Was ist Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) ist ein Core Web Vital, der die Zeit zwischen dem Start des Page-Loads und dem Zeitpunkt misst, an dem das größte sichtbare Content-Element (Image, Video-Poster oder Text-Block) fertig gerendert ist. Es ist die Metrik, die Google nutzt, um "wird diese Seite als schnell wahrgenommen?" zu erfassen.
LCP ersetzte ältere Proxy-Metriken wie First Meaningful Paint (FMP) und Speed Index, weil es besser mit der echten User-Wahrnehmung von Load-Speed korreliert. Eines von drei Core Web Vitals (mit INP und CLS).
Was zählt als LCP-Element?
<img>Elemente<image>in<svg><video>mit Poster-Image- Elemente mit CSS
background-image - Block-Level Elemente mit Text-Nodes
LCP-Thresholds
| LCP | Rating |
|---|---|
| ≤ 2,5s | Good |
| 2,5s - 4,0s | Needs Improvement |
| > 4,0s | Poor |
Reported als 75. Perzentil über User.
Was zur LCP-Zeit beiträgt
| Phase | Beschreibung | Typischer Anteil |
|---|---|---|
| TTFB | Server-Response-Time | ~10-40% |
| Resource Load Delay | Bevor LCP-Resource Download startet | ~10-40% |
| Resource Load Duration | Wie lang Resource zum Download braucht | ~10-40% |
| Element Render Delay | Resource-ready bis gerendert | ~10-30% |
Wie LCP messen
JavaScript-API
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP:', entry.startTime, 'element:', entry.element);
}
}).observe({ type: 'largest-contentful-paint', buffered: true });Tools
| Tool | Typ |
|---|---|
| Lighthouse / PageSpeed Insights | Lab + Field (CrUX) |
| Chrome DevTools Performance | Lab |
| Web Vitals Chrome Extension | Field |
| web-vitals.js | RUM |
| Search Console CWV-Report | Field |
| CrUX Dashboard | Field, public |
Häufige LCP-Optimierungen
1. LCP-Image preloaden
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">2. Moderne Image-Formate
AVIF oder WebP bei Quality 70-80 produziert 30-50% kleinere Files als JPEG.
3. fetchpriority="high" auf LCP-Image
<img src="hero.webp" alt="Hero" fetchpriority="high" width="1200" height="675">4. TTFB reduzieren
Server-Response-Time cappt, wie schnell LCP je sein kann.
5. Render-blocking Resources eliminieren
Blocking CSS und sync JS in <head> delayen Rendering.
6. Critical CSS inlinen
Above-the-fold Styles in <style>-Tag direkt im <head>.
7. Fonts self-hosten + preloaden
<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>8. LCP-Element nicht lazy-loaden
Counter-intuitiv, aber loading="lazy" auf Hero-Image hurts LCP.
LCP vs andere Paint-Metriken
| Metric | Was misst | Status |
|---|---|---|
| FP (First Paint) | Irgendwas gepainted | Diagnostisch |
| FCP (First Contentful Paint) | Erstes Text/Image gerendert | Diagnostisch |
| FMP (First Meaningful Paint) | Alter Proxy | Deprecated 2020 |
| LCP | Largest above-fold gerendert | Core Web Vital ✓ |
| TTI | Page reliably interactive | Oft unzuverlässig |
Häufige LCP-Fallstricke
- Hero-Image lazy-loaden.
- Heavy JavaScript blocking Render.
- Web Fonts blocking Text-Render.
- Langsame TTFB.
- Hero-Image zu groß.
- CSS Background-Image als LCP.
- Hydration-Delay auf SSR-Sites.
FAQ: Largest Contentful Paint
Was ist ein guter LCP-Score?
≤ 2,5 Sekunden im 75. Perzentil.
Wie unterscheidet sich LCP von FCP?
FCP = erstes gerendertes Element. LCP = das größte sichtbare Element.
Wie finde ich heraus, welches Element mein LCP ist?
Chrome DevTools Performance-Tab Web-Vitals-Overlay.
Warum ist mein LCP auf Mobile langsam, aber Desktop schnell?
Mobile Devices haben langsamere CPUs, langsamere Networks.
Hurts Lazy-Loading LCP?
Wenn Sie das LCP-Element lazy-loaden: ja.
Kann ich LCP verbessern ohne Hero-Image zu ändern?
Ja. TTFB reduzieren, JS deferren, Critical CSS inlinen.
Was ersetzte FID mit INP — beeinflusst das LCP?
Nein. INP ist Responsiveness, LCP ist Load-Speed.
LCP aus echten Regionen mit LoadFocus testen
LoadFocus läuft Lighthouse-Audits aus 25+ globalen Regionen. Registrieren bei loadfocus.com/signup.
Verwandte LoadFocus-Tools
Setze dieses Konzept mit LoadFocus in die Praxis um — derselben Plattform, die alles antreibt, was du gerade gelesen hast.