LCP (Largest Contentful Paint)

Was ist LCP?

Wenn du eine Website aufrufst, interessiert dich als Besucher nur eine Frage: Wann sehe ich endlich, was hier los ist? Genau das misst LCP. Es ist der Moment, in dem das größte Element im sichtbaren Bereich — also oberhalb der Falz — vollständig gerendert wurde. Das kann ein Bild, ein Blockelement mit Text, ein Video oder ein großer Titel sein.

Früher hat Google mit einem Wert namens "First Meaningful Paint" experimentiert, der aber zu ungenau war. LCP ist der Nachfolger und gehört heute zu den drei Core Web Vitals, die Google als Ranking-Signal nutzt. Der Grund: LCP spiegelt ziemlich zuverlässig wider, wie schnell sich eine Seite "geladen" anfühlt — nicht technisch, sondern aus Nutzersicht.

Ein Beispiel: Du öffnest die Website einer Autowerkstatt. Oben steht fett "KFZ-Service seit 1987" über einem großen Foto eines Mechanikers. Das Foto ist das größte sichtbare Element — sobald es angezeigt wird, stoppt der LCP-Timer.

Wie wird LCP gemessen?

LCP wird in Millisekunden oder Sekunden angegeben. Der Browser beobachtet, welches Element im Viewport das größte ist, und notiert, wann es fertig geladen ist. Wichtig: Der Wert ändert sich während des Ladens. Zuerst ist vielleicht die H1 das größte Element, dann wird das Hero-Bild nachgeladen und übernimmt den Titel als "Largest Contentful Paint". Der endgültige LCP-Wert ist der Zeitpunkt des letzten Wechsels.

Die LCP-Uhr startet aber nicht erst beim Bildladen — sie beginnt mit dem TTFB (Time to First Byte), also dem Moment, in dem der Server die erste Antwort zurückschickt. Wer auf billigem Shared-Hosting mit 900 ms Antwortzeit sitzt, hat schon fast den grünen LCP-Bereich aufgebraucht, bevor überhaupt ein Byte HTML beim Browser ankommt. TTFB ist damit keine eigene Core-Web-Vital-Metrik, aber der unsichtbare Sockel unter jedem LCP-Wert.

Google hat drei Schwellenwerte definiert, die sich seit Jahren bewährt haben:

Gemessen wird bei den 75. Perzentil — also bei den langsamsten 25 Prozent deiner Besucher. Es reicht nicht, wenn deine Seite bei Glasfaser flott lädt. Sie muss auch im 4G-Netz eines ICE zwischen Hannover und Berlin unter 2,5 Sekunden bleiben.

Warum ist LCP für deine Website wichtig?

LCP ist der Wert, der am deutlichsten mit der Absprungrate korreliert. Je länger es dauert, bis Besucher etwas Sinnvolles sehen, desto mehr klicken weg. Wer auf einer Seite fünf Sekunden auf Inhalt wartet, ist mental schon zurück bei Google und klickt das nächste Suchergebnis.

Für SEO heißt das: Ein schlechter LCP kostet Rankings. Google sieht in den Chrome-Daten, wie lange deine Seite bei echten Nutzern braucht, und gewichtet das im Ranking. Auf Mobilgeräten ist der Effekt noch stärker als auf Desktop.

Praktisches Beispiel: Ein Fotografenportfolio mit einem riesigen, unkomprimierten Hero-Bild (8 MB, 6000 Pixel breit). LCP liegt bei 6,2 Sekunden. Wir komprimieren das Bild auf 180 KB im WebP-Format, setzen es mit fetchpriority="high" und der LCP fällt auf 1,4 Sekunden. Die Bounce Rate geht um 22 Prozent runter — echte Messung, kein Marketing-Spruch.

Wie du LCP verbesserst

Die Ursachen für einen schlechten LCP sind fast immer dieselben. In dieser Reihenfolge angehen:

1. Hero-Bild komprimieren — Das größte Element ist meistens ein Bild. Nutze moderne Formate wie WebP oder AVIF, liefere mehrere Größen über srcset und sorge für ein mobil optimiertes Bild. Siehe Bildkomprimierung.
2. fetchpriority="high" setzen — Dem Browser sagen: Dieses Bild ist wichtig, lad es zuerst. Spart oft 500-800 Millisekunden.
3. Kritisches CSS inline — CSS, das für den sichtbaren Bereich nötig ist, direkt ins HTML schreiben. Externes CSS blockiert sonst das Rendering.
4. Render-blockierendes JavaScript eliminieren — Cookie Consent mit Real Cookie Banner