Largest Contentful Paint (LCP) misst die Renderzeit des größten sichtbaren Inhaltselements im Viewport. LCP ist einer der drei Core Web Vitals und damit ein direktes Google-Ranking-Signal. Die Metrik beantwortet die zentrale Frage: "Wann ist der Hauptinhalt der Seite sichtbar?"
LCP hat den frueheren Metriken wie First Meaningful Paint und Speed Index als primaerer Ladezeitindikator abgeloest. Der Grund: LCP korreliert am staerksten mit der tatsaechlichen Nutzerwahrnehmung, wann eine Seite "fertig geladen" aussieht.
Schwellenwerte
| Bewertung | LCP | Bedeutung |
|---|---|---|
| Gut | <= 2,5s | Nutzer nimmt schnelle Ladezeit wahr |
| Verbesserung noetig | 2,5-4,0s | Spuerbarer Verzoegerung |
| Schlecht | > 4,0s | Nutzer erwartet, dass die Seite nicht laedt |
Gemessen wird am 75. Perzentil der Felddaten, das bedeutet, 75 % aller Seitenaufrufe müssen den Schwellenwert einhalten.
Welche Elemente LCP-Kandidaten sind
Der Browser bestimmt das LCP-Element dynamisch. Waehrend die Seite laedt, kann sich das LCP-Element mehrfach ändern. Der finale LCP-Wert wird gesetzt, wenn der Nutzer zum ersten Mal mit der Seite interagiert oder die Seite vollstaendig geladen ist.
Typische LCP-Elemente
| Seitentyp | Typisches LCP-Element |
|---|---|
| Startseite | Hero-Bild oder Hero-Headline |
| Blog-Artikel | Artikelbild oder erste Ueberschrift |
| Produktseite | Hauptproduktbild |
| Landingpage | Hero-Bild oder Value Proposition |
| Portfolio | Erstes Projektbild im Viewport |
Die vier LCP-Unterkategorien
Google unterteilt die LCP-Zeit in vier Phasen:
1. Time to First Byte (TTFB)
Die Serverantwortzeit, vom Request bis zum ersten Byte. Typisch 40-60 % der gesamten LCP-Zeit bei dynamischen Seiten.
2. Resource Load Delay
Die Zeit zwischen TTFB und dem Beginn des Ladens der LCP-Ressource. Entsteht durch Render-blockierende Ressourcen, die vor dem LCP-Element geladen werden müssen.
3. Resource Load Duration
Die Ladezeit der LCP-Ressource selbst (z. B. des Hero-Bildes). Abhaengig von Dateiogroesse, Komprimierung und Netzwerkgeschwindigkeit.
4. Element Render Delay
Die Zeit zwischen dem Laden der Ressource und dem tatsaechlichen Rendern. Kann durch JavaScript, CSS oder Layout-Berechnungen verursacht werden.
Optimierung
TTFB optimieren
Da TTFB den größten Anteil am LCP ausmacht, ist die Serveroptimierung der effektivste Hebel:
- Schnelles Hosting oder Edge-Deployment (Vercel)
- CDN für globale Auslieferung
- Server-seitiges Caching
- Static Site Generation wo möglich
LCP-Ressource priorisieren
Das LCP-Element muss so frueh wie möglich geladen werden:
priorityProp bei Next.js<Image>für das Hero-Bildfetchpriority="high"für native<img>-Elemente<link rel="preload">für das LCP-Bild- Kein Lazy Loading für das LCP-Element
Render-blockierende Ressourcen eliminieren
| Ressource | Problem | Lösung |
|---|---|---|
| CSS | Blockiert Rendering komplett | Kritisches CSS inlinen, Rest async laden |
| JavaScript | Blockiert wenn synchron | defer oder async Attribut |
| Web Fonts | Verzoegert Textanzeige | font-display: swap, Preload |
| Third-Party Scripts | Konkurriert um Bandbreite | Defer oder nach LCP laden |
Bildoptimierung
Da das LCP-Element häufig ein Bild ist, ist Bildoptimierung ein zentraler Hebel:
- Moderne Formate: WebP oder AVIF statt JPEG/PNG
- Responsive Images:
srcsetundsizesfür gerateoptimale Groessen - Richtige Dimensionen: Nicht größer als die Anzeige-Größe laden
- Komprimierung: Qualitaet 75-85 % ist für Web meist ausreichend
LCP in Next.js
Next.js bietet starke eingebaute Optimierungen für LCP:
next/imagemitpriority: Erzeugt automatischfetchpriority="high"undpreload- Automatische Bildoptimierung: On-the-fly WebP/AVIF-Konvertierung
next/font: Eliminiert Font-bedingte Render-Delays- Streaming SSR: Sendet HTML-Fragmente progressiv, TTFB wird reduziert
Typischer Fehler in Next.js
Das Hero-Bild ohne priority Prop zu laden ist einer der haeufigsten LCP-Fehler in Next.js-Projekten. Ohne priority wird das Bild lazy-loaded, es beginnt erst zu laden, wenn es in den Viewport scrollt, was für Above-the-Fold-Bilder kontraproduktiv ist.
LCP messen
- PageSpeed Insights: Lab- und Felddaten mit LCP-Detailanalyse
- Chrome DevTools: Performance-Tab mit LCP-Marker
- Google Search Console: Core Web Vitals Report
- Web Vitals JavaScript Library: Real User Monitoring im eigenen Analytics
LCP und SEO
LCP ist ein direktes Ranking-Signal in Googles Page Experience Update. Seiten mit gutem LCP (< 2,5s) haben einen messbaren Vorteil gegenueber langsamen Seiten, insbesondere wenn andere Ranking-Faktoren aehnlich sind. Die Optimierung des LCP ist damit eine der effektivsten technischen SEO-Massnahmen mit direkt messbarem Einfluss auf die Suchmaschinenplatzierung.