LCP

Was ist LCP?

LCP (Largest Contentful Paint) ist eine der drei Core Web Vitals von Google und misst, wann das flächenmäßig größte sichtbare Element im sichtbaren Bereich des Browsers (Viewport) vollständig gerendert ist. Das ist in der Regel ein Hero-Bild, ein großes Textblock-Element oder ein Video-Poster. Der Zielwert liegt unter 2,5 Sekunden — alles darüber gilt als verbesserungswürdig, ab 4 Sekunden als schlecht.

LCP ist die Performance-Metrik mit dem stärksten Einfluss auf die wahrgenommene Ladegeschwindigkeit. Der Moment, an dem LCP eintritt, ist für den Nutzer subjektiv der Moment, an dem die Seite “fertig” geladen wirkt — auch wenn im Hintergrund noch Scripts laden.

Wie wird LCP gemessen?

Der Browser beobachtet während des Ladens kontinuierlich alle sichtbaren Elemente und deren Größe im Viewport. Als LCP-Zeitpunkt gilt der Render-Zeitstempel des bisher größten Elements. Das LCP-Element kann sich während des Ladens ändern — ist das Hero-Bild größer als der darüber liegende Headline-Text, wird das Bild das finale LCP-Element.

Element-Typen, die als LCP-Kandidaten zählen:

• <img>-Elemente
• <image>-Elemente innerhalb von SVG
• <video>-Elemente (Poster-Bild)
• Elemente mit CSS background-image
• Blocklevel-Elemente mit Text

Nicht gewertet werden Elemente außerhalb des sichtbaren Bereichs, transparent überlagerte Elemente und Elemente mit opacity: 0.

Die Zeitmessung beginnt mit dem Start der Seitennavigation. Bei der Bewertung für das Google-Ranking wird das 75. Perzentil aller Seitenaufrufe aus echten Chrome-Nutzerdaten (CrUX) herangezogen.

LCP für WordPress-Betreiber

Das LCP-Element bei den meisten WordPress-Seiten ist das oberste Bild — das Hero-Bild des Headers, das Beitragsbild eines Artikels oder ein Feature-Image. Es gibt drei Haupthebel:

1. Bildformat und Bildgröße optimieren: Das LCP-Bild in WebP oder AVIF ausliefern. Unkomprimierte JPEGs mit 500 kB+ kosten allein schon 1–2 Sekunden LCP. Mit WebP ist dasselbe Bild oft 30–50 % kleiner.

2. Preload-Hint setzen: Der Browser entdeckt das LCP-Bild normalerweise erst, wenn er das HTML geparst hat und auf das <img>-Tag trifft. Mit einem <link rel="preload"> im <head> kann das Bild früher geladen werden:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

3. Serverantwortzeit (TTFB) reduzieren: Langsame TTFB schiebt alles nach hinten, auch LCP. Serverseitiges Caching mit Redis oder APCu reduziert TTFB drastisch.

Was passiert bei schlechtem LCP?

Googles Ranking-System verwendet LCP als direkten Signal. Seiten mit LCP über 4 Sekunden verlieren in der Page Experience-Bewertung Punkte. In Kombination mit schlechten Werten bei CLS und INP kann das zu spürbaren Ranking-Einbußen führen.

Unabhängig vom SEO-Effekt korreliert schlechter LCP direkt mit Absprungraten: Studien von Google zeigen, dass Seiten mit LCP über 4 Sekunden etwa 24 % höhere Absprungraten haben als Seiten unter 2,5 Sekunden.

Häufige Fragen

Das LCP-Element ist ein Hintergrundbild via CSS — gilt das auch? Ja, CSS background-image zählt als LCP-Kandidat. Allerdings funktionieren <link rel="preload"> für Background-Images nur mit dem imagesrcset-Attribut eingeschränkt. Wenn möglich, ist ein <img>-Element besser optimierbar als ein CSS-Hintergrundbild.

Warum ist mein LCP-Wert in Lighthouse gut, aber in der Search Console schlecht? Lighthouse misst im Labor unter kontrollierten Bedingungen. Die Search Console zeigt das 75. Perzentil echter Nutzerdaten — bei schlechten Netzwerkverbindungen oder schwachen Endgeräten fällt LCP schlechter aus. Beide Werte sind nützlich, aber für das Ranking zählen nur die Felddaten.

Verwandte Begriffe

FCP · JPEG · PNG