Was der Largest Contentful Paint misst

So funktioniert es

LCP ist einer der drei Core Web Vitals. Gemessen wird vom Aufruf der Seite bis zu dem Moment, in dem das größte Element im ersten Bildschirm gezeichnet ist: ein Bild, das Vorschaubild eines Videos oder ein Textblock. Für Besucher ist das der Moment, in dem die Seite „da“ ist.

Gut sind bis 2500 ms, über 4000 ms gilt als schlecht, jeweils für drei von vier Seitenaufrufen.

Die Zeit setzt sich aus vier Teilen zusammen:

1. Serverantwort: bis das erste Byte des HTML ankommt.
2. Verzögerung bis zum Laden: bis der Browser das LCP-Bild entdeckt und anfordert.
3. Ladedauer: bis das Bild übertragen ist.
4. Verzögerung bis zum Zeichnen: bis der Browser es tatsächlich anzeigt, etwa weil noch Skripte oder Stylesheets fehlen.

Ist das größte Element Text, fallen die Teile 2 und 3 weg, dafür spielt die Schrift eine Rolle.

Worauf es ankommt

• Schnelle Serverantwort. Alles beginnt mit dem ersten Byte, siehe Serverantwortzeit.
• Das LCP-Bild früh auffindbar. Es gehört als <img> ins HTML, nicht als CSS-Hintergrund und nicht per Skript nachgeladen. Es bekommt kein loading="lazy", dafür fetchpriority="high".
• Das LCP-Bild klein. Passende Größe und ein modernes Format, siehe Bilder.
• Nichts, was das Zeichnen aufhält. Blockierende Skripte und Stylesheets verzögern auch ein schon geladenes Bild, siehe render-blockierende Ressourcen.
• Bei Text die Schrift. Ohne font-display bleibt Text unsichtbar, bis die Schrift geladen ist, siehe Webfonts.

<img src="titelbild-1200.webp" fetchpriority="high" width="1200" height="600" alt="…">

So verbesserst du ihn

PageSpeed Insights nennt in den Diagnosen das LCP-Element der Seite. Prüf, welcher der vier Teile die meiste Zeit kostet, und setz dort an. Slider im ersten Bildschirm verzögern den LCP oft, weil ein Skript das erste Bild erst einsetzt. Ob das Titelbild verzögert lädt oder als Hintergrund eingebunden ist, legt meist das Theme fest; das ändert deine Agentur.