Was ist LCP (Largest Contentful Paint)?

Die Metrik versucht den Moment zu erfassen, in dem die Nutzerin sagt: „Die Seite ist da.“ Gemessen wird nicht, wann der erste Bildpunkt gezeichnet wurde, sondern wann der eigentliche Inhalt erschien — denn für die Nutzerin heißt „die Seite kommt“, dass das kommt, was sie lesen will.

Gemessen wird meist ein Bild oder ein Textblock. Welches Element das LCP-Element ist, hängt von Seite und Bildschirmgröße ab; am Desktop kann es das Hero-Bild sein, mobil eine Überschrift. Es muss daher für jeden Breakpunkt eigens bestimmt werden.

Die Dauer teilt sich in vier Abschnitte, und jeder hat seine eigene Behandlung.

1. Zeit bis zum ersten Byte — die Serverseite; Hosting und Cache.
2. Verzögerung der Ressourcenentdeckung — wann hat der Browser die Ressource bemerkt? In CSS oder JavaScript verborgene Ressourcen werden spät entdeckt.
3. Ladezeit der Ressource — eine Frage von Größe und Format.
4. Render-Verzögerung — die Ressource kam an, konnte wegen Render-Blockern aber nicht gezeichnet werden.

Der häufigste Fehler ist, das LCP-Element verzögert zu laden: Was für Bilder außerhalb des sichtbaren Bereichs richtig ist, verzögert beim LCP-Element die Entdeckung und erhöht die Zeit unmittelbar.

In den Felddaten wird das 75. Perzentil betrachtet — die Zeit, die drei Viertel der Nutzenden erleben. Der auf dem eigenen Gerät gemessene Wert ist eine Stichprobe vom besten Ende dieser Verteilung.

Der größte Gewinn liegt meist im dritten Abschnitt — der Ressourcengröße. Ein modernes Format zu verwenden, responsive Größen anzugeben und das Bild in der tatsächlich gezeigten Größe zu erzeugen bringt LCP bei den meisten Websites allein unter die Schwelle.

Der vierte Abschnitt betrifft die Render-Blocker: Selbst wenn die Ressource da ist, wird nicht gezeichnet, solange die Stylesheets nicht ausgewertet sind. Auf dieser Website wurden zwei Stylesheets zusammengeführt und ihre Kommentare entfernt; damit schlossen sich zwei in Lighthouse mobil gemessene Blockaden von 821 und 221 Millisekunden.

1. Im vom Server gelieferten HTML sichtbar machen — ein per CSS-Hintergrund oder JavaScript eingefügtes Bild wird spät entdeckt.
2. Modernes Format verwenden — AVIF und WebP liefern dieselbe Qualität in deutlich kleinerer Datei.
3. Responsive Größen angeben — einem Telefon ein Desktop-Bild zu schicken ist die häufigste Verschwendung.
4. Hohe Priorität geben — ein Prioritätshinweis für das Hero-Bild.
5. NICHT verzögert laden — eine Ressource im sichtbaren Bereich zu verzögern ist ein reiner Verlust.
6. Render-Blocker verringern — selbst wenn die Ressource ankommt, wird beim Warten auf Stile nichts gezeichnet.

Der fünfte Punkt ist die häufigste kontraproduktive Optimierung: Alle Bilder pauschal verzögert zu laden verschlechtert LCP unmittelbar.

So wird er gemessen

Die Schwellenwerte sind auf web.dev definiert: 2,5 Sekunden oder weniger gelten als gut, mehr als 4 Sekunden als schlecht. Der Wert sollte bei 75 Prozent der Besuche unter der Schwelle bleiben. Labormessungen helfen, die Ursache zu finden; entschieden wird nach Felddaten.

1. Chrome DevTools → Performance → Aufzeichnung → „LCP“-Markierung und Element
2. PageSpeed Insights → Felddaten → Largest Contentful Paint (75. Perzentil)
3. import { onLCP } from 'web-vitals'; onLCP(console.log);

Der erste Schritt ist zu sehen, welches Element das LCP-Element ist: Die LCP-Markierung im Performance-Panel der DevTools zeigt es an. Die Lösung richtet sich danach, in welcher der vier Phasen dieses Element Zeit verliert.

Wenn Sie die Geschwindigkeit Ihrer eigenen Website verbessern möchten: Unser individuelles Webdesign liefert Performance als messbares Budget aus — Ziel ist ein LCP unter 0,8 Sekunden.