Largest Contentful Paint verbessern
Von den drei Core Web Vitals scheitern die meisten Seiten an LCP — und auf den meisten Seiten ist das gemessene Element ein Bild. Damit ist es ungewöhnlich gut behebbar.
Was LCP wirklich misst
Largest Contentful Paint ist die Zeit vom Navigationsstart bis das größte sichtbare Element fertig gerendert ist. Nicht wann die Seite zu erscheinen beginnt und nicht wann alles geladen ist — sondern genau wann das Größte im sichtbaren Bereich fertig ist.
Googles Schwellen: gut unter 2,5 Sekunden, verbesserungswürdig bis 4 Sekunden, schlecht darüber. Gezählt wird das 75. Perzentil echter Besucher — ein Viertel deines Traffics darf also langsamer sein, und du bestehst trotzdem.
Erst das Element finden
Optimiere nicht blind. Öffne die Chrome DevTools, lass einen Lighthouse-Bericht laufen und sieh dir den LCP-Eintrag an — er benennt das genaue Element.
In neun von zehn Fällen ist es ein Hero-Bild, ein Produktfoto oder ein Artikelkopf. Gelegentlich ist es ein großer Textblock, und dann ist die Lösung eine ganz andere: Text-LCP hängt meist am Laden der Schriften, nicht an Bildern.
Prüfe außerdem den Core-Web-Vitals-Bericht der Search Console, der echte Besucherdaten statt eines Laborlaufs nutzt. Beide widersprechen sich häufig, und die Felddaten sind die, die aufs Ranking wirken.
Die Maßnahmen, der Reihe nach
1. Das Bild kleiner machen. Auf die dargestellte Größe verkleinern, in WebP umwandeln, auf Qualität 75 komprimieren. Das allein genügt meist und verkleinert die Datei typischerweise um 90 %.
2. Es niemals lazy laden. loading="lazy" auf dem LCP-Bild verzögert genau das, was gemessen wird. Nutze stattdessen fetchpriority="high".
3. Es vorladen. Ein <link rel="preload" as="image"> im Head startet den Download, bevor der Parser das Tag erreicht.
4. Renderblockaden entfernen. Das Bild kann nicht gezeichnet werden, bevor das CSS geparst ist. Renderblockierende Stylesheets und synchrone Skripte im Head verzögern alles dahinter.
Was wie eine Lösung aussieht, aber keine ist
- Nur ein CDN. Es senkt die Latenz, nicht die Bytes. Ein 4-MB-Bild bleibt 4 MB, nur etwas näher ausgeliefert.
- Platzhalter oder Skeleton. Lässt das Warten kürzer wirken, ändert aber nichts daran, wann das echte Element erscheint. LCP bleibt unberührt.
- Alles lazy laden. Hilft dem Rest der Seite, schadet dem LCP, wenn es auch das Hero trifft.
- Ein Caching-Plugin. Hilft wiederkehrenden Besuchern. LCP wird überwiegend bei Erstbesuchen gemessen.
Ein realistisches Ziel
Ein Hero-Bild mit 1920px, WebP, Qualität 75 liegt bei rund 150–250 KB. Über eine normale Mobilverbindung kommt das bequem innerhalb der 2,5 Sekunden an und lässt Luft für alles andere.