Largest Contentful Paint (LCP)

Largest Contentful Paint, kurz LCP, ist eine der drei Core Web Vitals von Google. Die Kennzahl misst, wie lange es dauert, bis das größte sichtbare Element im Ansichtsbereich dargestellt ist, und steht damit stellvertretend für den Moment, in dem ein Besucher den Eindruck hat, dass die Seite geladen ist. Ein schneller LCP-Wert signalisiert, dass der Hauptinhalt zügig da ist, ein langsamer lässt Besucher auf eine weitgehend leere Seite blicken. Dieser Leitfaden erklärt, was LCP misst, welcher Wert gut ist und mit welchen Maßnahmen sich der Wert gezielt senken lässt.

Was LCP misst

LCP erfasst die Renderzeit des größten Inhaltselements, das beim Laden im sichtbaren Bereich liegt. Das ist meist ein Hero-Bild, ein per CSS geladenes Hintergrundbild, das Vorschaubild eines Videos oder ein großer Textblock. Der Browser beobachtet diese Kandidaten, während die Seite entsteht, und meldet das jeweils größte, weshalb sich das LCP-Element während des Ladens noch ändern kann, bis das Layout steht.

Wichtig ist, dass es um das größte sichtbare Element geht, nicht um die komplette Seite. Im Hintergrund kann noch weiter geladen werden. Für diese Kennzahl zählt der Zeitpunkt, an dem der Hauptinhalt gezeichnet ist, für den der Besucher gekommen ist.

Was ist ein guter LCP-Wert?

Google definiert drei Bereiche, gemessen am 75. Perzentil der realen Seitenaufrufe über mobile und stationäre Geräte:

• Gut: 2,5 Sekunden oder schneller
• Verbesserungswürdig: zwischen 2,5 und 4 Sekunden
• Schlecht: mehr als 4 Sekunden

Das 75. Perzentil bedeutet, dass drei von vier Aufrufen den Zielwert erreichen müssen. Optimierung nur für ein schnelles Testgerät genügt deshalb nicht, entscheidend ist die Erfahrung auf Mittelklasse-Smartphones und langsameren Verbindungen.

Feld- und Labdaten

LCP gibt es in zwei Ausprägungen. Felddaten stammen von echten Chrome-Nutzern, werden im Chrome UX Report gesammelt und bilden ein nachlaufendes 28-Tage-Fenster ab. Diese Felddaten nutzt Google für die Bewertung. Labdaten aus Lighthouse oder PageSpeed Insights sind wiederholbar und ideal zur Fehlersuche, fließen aber nicht direkt in das Ranking ein. Im Browser lässt sich LCP über die Performance-API auslesen:

new PerformanceObserver((list) => {
  const eintraege = list.getEntries();
  const letzter = eintraege[eintraege.length - 1];
  console.log('LCP:', letzter.startTime, letzter.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });

Der zuletzt gemeldete Eintrag, sobald das Layout steht, ist der LCP-Wert, und letzter.element nennt das genaue Element.

Die Felddaten im Chrome UX Report werden pro URL ausgewiesen, sofern eine Seite genug Verkehr hat, andernfalls fallen sie auf einen Origin-Durchschnitt zurück. Eine Seite mit wenig Verkehr erbt dann den Wert der gesamten Domain, bis sie eigene Daten sammelt.

Das LCP-Element finden

Vor jeder Optimierung sollte das Element feststehen. PageSpeed Insights benennt das LCP-Element in der Diagnose, und das Performance-Panel der Chrome DevTools markiert es auf der Zeitachse samt Aufteilung in die einzelnen Teilzeiten. Der richtige Hebel hängt davon ab, ob das LCP-Element ein Bild oder ein Textblock ist.

Die vier Teilzeiten des LCP

Jeder LCP-Wert setzt sich aus vier aufeinanderfolgenden Abschnitten zusammen. Welcher überwiegt, entscheidet, wo die Arbeit ansetzt:

• Time to First Byte: die Zeit, bis der Server das erste Byte der HTML sendet.
• Resource Load Delay: die Lücke zwischen dem ersten Byte und dem Beginn des Ladens der LCP-Ressource.
• Resource Load Time: die Ladezeit der LCP-Ressource selbst, etwa des Bildes.
• Element Render Delay: die Zeit vom fertigen Laden bis zum tatsächlichen Zeichnen des Elements.

Ein langsamer LCP besteht fast nie aus allen vier Abschnitten gleichzeitig. Die Messung der Aufteilung verhindert, dass an der falschen Stelle optimiert wird.

Ein Beispiel für die Aufteilung

Angenommen, das LCP-Element ist ein Hero-Bild. Der Server braucht 700 Millisekunden bis zum ersten Byte, das ist die Time to First Byte. Danach entdeckt der Browser das Bild erst spät, weil eine rendernblockierende CSS-Datei den Weg versperrt, weitere 400 Millisekunden Resource Load Delay. Das unoptimierte Bild lädt dann 600 Millisekunden, die Resource Load Time, und wird schließlich gezeichnet. In Summe liegt der LCP bei rund 1,8 Sekunden, obwohl kein einzelner Schritt dramatisch wirkt. Die Aufteilung zeigt, dass hier drei kleine Eingriffe mehr bringen als ein großer: schnellere Serverantwort, das CSS entblockieren und das Bild verkleinern.

Häufige Ursachen eines langsamen LCP

• Eine langsame Serverantwort oder fehlendes Caching verlängert die Time to First Byte.
• Rendernblockierendes CSS und JavaScript halten den Browser davon ab, die LCP-Ressource zu entdecken und zu laden.
• Ein großes, unoptimiertes Hero-Bild in einem alten Format streckt die Resource Load Time.
• Clientseitiges Rendern, Hydration oder eine spät ladende Schrift verzögert das Zeichnen.
• Ein per Lazy Loading verzögertes Hero-Bild bremst genau das Element, das zuerst laden sollte.

LCP verbessern

Die vier Teilzeiten lassen sich gezielt angehen:

• Time to First Byte senken. Schnellere Serverantworten durch Caching und ein CDN verkürzen die gesamte Kette.
• Rendernblockierende Ressourcen entfernen. Unkritisches CSS und JavaScript verzögern, kritisches CSS inline auslehen.
• Das LCP-Bild verkleinern. Bei einem Bild als LCP-Element korrekt dimensionieren und in WebP oder AVIF ausliefern.
• Das LCP-Bild niemals per Lazy Loading laden. Das Hero-Bild soll früh laden, nicht verzögert.

Ist das LCP-Element ein Bild, ist der wirksamste Schritt, es früh und mit hoher Priorität zu laden:

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<!-- oder direkt am Element -->
<img src="/hero.avif" fetchpriority="high"
     width="1200" height="800" alt="Berg im Sonnenaufgang">

Ist das LCP-Element ein Textblock, liegt der Engpass meist bei der Schrift oder bei rendernblockierendem CSS. Mit font-display: swap erscheint der Text sofort in einer Ersatzschrift, die verwendete Schrift oberhalb der Falz vorladen, und das kritische CSS schlank halten.

LCP und die anderen Core Web Vitals

LCP ist eine von drei Core Web Vitals, neben Cumulative Layout Shift für die visuelle Stabilität und Interaction to Next Paint für die Reaktionsschnelligkeit. Die drei überschneiden sich in der Praxis: Feste Breite und Höhe am LCP-Bild helfen sowohl dem LCP als auch der Layoutstabilität, und das Entfernen von überflüssigem JavaScript beschleunigt das Laden und entlastet zugleich den Haupt-Thread. Einen Überblick über alle drei gibt die Seite zu den Core Web Vitals.

LCP prüfen und verifizieren

Nach der Änderung PageSpeed Insights erneut ausführen und prüfen, ob der Labor-LCP gesunken ist und das benannte Element schneller erscheint. Die Felddaten im Chrome UX Report folgen über das nachlaufende 28-Tage-Fenster, reale Verbesserungen zeigen sich also nach und nach. Mehrere Seitentypen testen, da sich das LCP-Element und sein Engpass zwischen Startseite, Artikel und Produktseite unterscheiden, und mobil unter gedrosselter Verbindung messen, weil dort der Wert entschieden wird.

Häufige Fragen

Was ist ein guter LCP-Wert?

2,5 Sekunden oder schneller am 75. Perzentil der realen Nutzer gilt als gut. Zwischen 2,5 und 4 Sekunden ist verbesserungswürdig, mehr als 4 Sekunden ist schlecht.

Was ist das LCP-Element?

Das größte im sichtbaren Bereich dargestellte Inhaltselement beim Laden, meist ein Hero-Bild, ein CSS-Hintergrundbild, ein Video-Vorschaubild oder ein großer Textblock. PageSpeed Insights und die DevTools benennen es.

Was ist der Unterschied zwischen LCP und FCP?

First Contentful Paint markiert, wann der erste beliebige Inhalt erscheint. Largest Contentful Paint markiert, wann das größte, bedeutsamste Element erscheint. FCP zeigt, dass das Rendern begonnen hat, LCP, dass der Hauptinhalt da ist.

Wie verbessere ich den LCP schnell?

Das LCP-Element finden und den dominierenden Engpass beheben: Serverantwort beschleunigen, rendernblockierende Ressourcen entfernen, das LCP-Bild optimieren und vorladen. Das LCP-Bild niemals per Lazy Loading laden.

Ist LCP ein Google-Ranking-Faktor?

Ja. LCP ist eine der drei Core Web Vitals und damit Teil der Page-Experience-Signale, bewertet anhand der Felddaten echter Nutzer.

Warum unterscheidet sich mein LCP im Labor und im Feld?

Labordaten stammen aus einem einzelnen kontrollierten Test, Felddaten aus einer Bandbreite realer Geräte und Verbindungen über 28 Tage. Google nutzt die Felddaten, die Labordaten dienen der Fehlersuche.

Wie lange dauert es, bis sich Verbesserungen zeigen?

Im Labor sind Verbesserungen sofort messbar. In den Felddaten zeigen sie sich über das nachlaufende 28-Tage-Fenster, also über einige Wochen hinweg.