Largest Contentful Paint (LCP): Definition, Schwellenwerte, Lösungen

Was ist Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) ist ein Core Web Vital und misst, wie lange es dauert, bis das größte Bild, der größte Textblock oder das größte Video im sichtbaren Bereich fertig gerendert ist, gerechnet ab dem Moment, in dem der Besucher die Navigation startet. Google bewertet 2,5 Sekunden oder weniger als gut, gemessen am 75. Perzentil echter Seitenaufrufe, getrennt für Mobilgeräte und Desktop.

Weil die Uhr bei der Navigation startet, zählen auch Weiterleitungen, Verbindungsaufbau und eine langsame Serverantwort mit. LCP ist eine von drei Core Web Vitals, neben INP (Reaktionsfähigkeit) und CLS (visuelle Stabilität).

LCP-Schwellenwerte

Eine Seite besteht, wenn das 75. Perzentil ihrer Seitenaufrufe im guten Bereich liegt. Mobilgeräte und Desktop werden getrennt bewertet. Die Schwellenwerte pflegt web.dev.

Welches Element zählt als LCP-Element?

Der Browser meldet das größte dieser Elemente, das im sichtbaren Bereich liegt:

• <img>-Elemente (bei animierten Bildern das erste Bild)
• <image>-Elemente innerhalb eines <svg>
• <video>-Elemente, mit Vorschaubild oder erstem Frame
• Elemente mit einem CSS-Hintergrundbild über url() (keine Verläufe)
• Blockelemente, die Text enthalten

Nur der sichtbare Teil zählt, und Chromium ignoriert Elemente mit Deckkraft 0, Elemente, die den ganzen Viewport füllen, und Platzhalterbilder. Der Kandidat kann sich während des Ladens ändern, etwa wenn ein Hero-Bild nach einer Überschrift eintrifft. Der Browser hört auf zu melden, sobald der Besucher tippt, scrollt oder eine Taste drückt, und Seiten, die in einem Hintergrund-Tab geladen werden, zählen nicht.

Die vier Teile des LCP

Jede LCP-Zeit setzt sich aus vier Teilen zusammen. web.dev nennt diese Richtwerte dafür, wie eine gut abgestimmte Seite ihre Zeit verteilt. Sie sind im Verhältnis zueinander zu lesen, nicht als absolute Zahlen:

Beheben Sie den Teil, der auf Ihrer Seite aus dem Verhältnis fällt. Eine lange Ladeverzögerung braucht eine andere Lösung als eine langsame Time to First Byte.

Beispiel: Ein Hero-Bild, das der Browser spät findet

Ein Shop setzt sein Hero-Foto als CSS-background-image in einem externen Stylesheet. Der Browser sieht das Bild nicht im HTML und wartet auf das CSS, bevor er den Download startet. Das zeigt sich als große Verzögerung beim Laden der Ressource. Wandert das Foto in ein <img> mit hoher Abrufpriorität, findet der Browser es sofort:

<img src="/img/hero-1200.avif" alt="Product dashboard"
     width="1200" height="675" fetchpriority="high">

Eine kleinere Datei (siehe Bildgröße) verkürzt dann die Download-Dauer.

So verbessern Sie den LCP

• Machen Sie die LCP-Ressource im ersten HTML auffindbar, mit src oder srcset im Markup statt per JavaScript nachgeladen.
• Wird das Bild nur aus CSS oder JavaScript referenziert, laden Sie es mit <link rel="preload"> vor.
• Setzen Sie fetchpriority="high" auf das LCP-Bild. web.dev warnt, dass es nichts mehr bringt, wenn es bei mehr als ein, zwei Bildern gesetzt wird.
• Laden Sie das LCP-Bild niemals per Lazy Loading. Lazy Loading gehört zu Bildern unterhalb des sichtbaren Bereichs.
• Verkleinern Sie die Datei: auf die angezeigte Größe skalieren und ein modernes Format wie AVIF oder WebP nutzen.
• Senken Sie die Serverantwortzeit durch Caching und ein CDN und vermeiden Sie Weiterleitungsketten.

Häufige LCP-Fehler

• Das Hero-Bild per Lazy Loading laden.
• Das Hero hinter einem JavaScript-Karussell oder clientseitigem Rendering verstecken, sodass es spät entdeckt wird.
• Das Bild optimieren, obwohl der Server noch Sekunden zum Antworten braucht.
• fetchpriority="high" auf jedes Bild setzen.
• Nur mit schneller Desktop-Verbindung testen und dieser Zahl vertrauen.

So messen Sie den LCP

Labor-Tools wie Lighthouse und Chrome DevTools messen einen kontrollierten Ladevorgang und nennen das LCP-Element, was sie für die Fehlersuche geeignet macht. Felddaten stammen von echten Besuchern, zum Beispiel aus dem Chrome UX Report, und sind die Grundlage dafür, ob die Core Web Vitals bestanden werden. Beide weichen oft voneinander ab, weil echte Geräte, Netze und Standorte variieren. So protokollieren Sie den LCP im Browser:

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

LCP in Test und Monitoring

Das Page-Speed-Monitoring von LoadFocus führt planmäßig Lighthouse-Audits aus 25 Cloud-Regionen aus und erfasst die Core Web Vitals einschließlich LCP, sodass ein schwereres Hero-Bild oder ein langsamerer Server als Trend sichtbar wird. Der kostenlose Core-Web-Vitals-Checker zeigt den LCP echter Chrome-Nutzer für eine URL am 75. Perzentil. Die Schritt-für-Schritt-Lösungen für alle drei Metriken stehen in unserem Leitfaden zur Core-Web-Vitals-Optimierung. Zum Weiterlesen: Core Web Vitals mit Alarmen und Berichten überwachen und 10 Schritte zu einer schnelleren Website.

Häufige Fragen: Largest Contentful Paint

Was ist ein guter LCP-Wert?

2,5 Sekunden oder weniger am 75. Perzentil der Seitenaufrufe. Zwischen 2,5 und 4,0 Sekunden ist verbesserungswürdig, über 4,0 Sekunden ist schlecht.

Warum zeigt Lighthouse einen anderen LCP als die Search Console?

Lighthouse misst einen simulierten Ladevorgang. Die Search Console meldet Felddaten echter Besucher über einen Zeitraum, auf vielen Geräten und Netzen. Nutzen Sie den Laborwert, um Ursachen zu finden, und den Feldwert, um das Ergebnis zu beurteilen.

Wie finde ich mein LCP-Element?

Führen Sie ein Lighthouse-Audit aus und öffnen Sie die Diagnose zum Largest-Contentful-Paint-Element, oder zeichnen Sie einen Trace im Performance-Tab der Chrome DevTools auf. Im Code verweist die Eigenschaft element des largest-contentful-paint-Eintrags darauf.

Soll ich mein Hero-Bild per Lazy Loading laden?

Nein. web.dev sagt, das LCP-Bild nie per Lazy Loading zu laden, weil es die Verzögerung schon vor dem Download-Start erhöht. Laden Sie stattdessen Bilder weiter unten auf der Seite verzögert.

Warum ist der LCP auf Mobilgeräten langsamer?

Smartphones haben meist langsamere Prozessoren und Verbindungen, und der kleinere Viewport kann ein anderes Element zum größten machen. Die Core Web Vitals werden deshalb für Mobilgeräte und Desktop getrennt bewertet.