Largest Contentful Paint (LCP) verbessern: Ursachen und Lösungen
Warum der Largest Contentful Paint zu langsam ist und wie Sie das größte sichtbare Element Ihrer Seite gezielt beschleunigen — mit konkreten Maßnahmen.
Inhaltsverzeichnis
Was ist das Problem#
Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte sichtbare Element im sichtbaren Bereich einer Seite vollständig geladen und gerendert ist. In den meisten Fällen ist das ein großes Bild oder Hero-Visual, gelegentlich auch eine große Überschrift oder ein Textblock. Ist dieser Wert zu hoch, sehen Besucher über mehrere Sekunden hinweg eine leere oder unvollständige Fläche, bevor der eigentliche Hauptinhalt erscheint.
EverAudit meldet einen LCP-Befund, wenn die Labormessung mobil den Zielwert von 2,5 Sekunden überschreitet — ab 2.500 Millisekunden als „schwer" eingestuft, ab 4.000 Millisekunden als kritisch. Ergänzend prüft EverAudit optional die Felddaten echter Besucher aus dem Chrome UX Report (field-lcp-poor, field-lcp-needs-improvement): Diese zeigen, wie sich Ihre Seite tatsächlich bei realen Nutzern verhält, nicht nur unter Laborbedingungen.
Warum EverAudit das prüft#
LCP ist eine der drei Core Web Vitals und damit Teil des Signals, mit dem Google die Seitenerfahrung bewertet. Der Wert ist außerdem einer der aussagekräftigsten Indikatoren dafür, wie lange ein Besucher tatsächlich auf einen sinnvollen Inhalt wartet — anders als etwa die reine Ladezeit des HTML-Dokuments, die nichts darüber aussagt, ob der Nutzer schon etwas sieht. EverAudit unterscheidet zusätzlich zwischen dem allgemeinen LCP-Wert und der spezifischen Ursache „LCP-Bild spät entdeckt" (lcp-discovery-insight), weil diese beiden Befunde unterschiedliche Fixes erfordern: Der eine betrifft die Größe/das Format des Elements, der andere den Zeitpunkt, zu dem der Browser überhaupt anfängt, es zu laden.
Welche Auswirkung hat es#
Ein langsamer LCP kostet Sie doppelt: Zum einen ist er ein Rankingsignal — Google bewertet Seiten mit schlechter Ladeerfahrung tendenziell schlechter. Zum anderen ist er ein unmittelbares Nutzererlebnis-Problem. Je länger Besucher auf den ersten sichtbaren Inhalt warten müssen, desto höher die Wahrscheinlichkeit, dass sie die Seite vorzeitig verlassen — besonders auf mobilen Geräten und bei langsamerer Verbindung, wo der Effekt am stärksten spürbar ist. Bei Landingpages und Startseiten trifft ein hoher LCP häufig genau den ersten Eindruck, den ein neuer Besucher von Ihrem Angebot bekommt.
Wie Sie es beheben#
1. Identifizieren Sie das LCP-Element. In den Chrome DevTools (Performance-Panel, „LCP"-Marker) oder im Lighthouse-Report sehen Sie genau, welches Element als LCP zählt. Erst danach lohnt sich die Optimierung.
2. Laden Sie das LCP-Bild frühzeitig und mit hoher Priorität. Ergänzen Sie im <head> einen Preload-Hinweis:
<link rel="preload" as="image" fetchpriority="high" href="/hero.avif">Entfernen Sie gleichzeitig loading="lazy" von Bildern, die oberhalb des sichtbaren Bereichs liegen — Lazy-Loading gehört ausschließlich auf Bilder, die erst beim Scrollen sichtbar werden.
3. Liefern Sie das Bild in einem modernen, komprimierten Format. AVIF oder WebP reduzieren die Dateigröße gegenüber klassischem JPEG oder PNG spürbar, bei vergleichbarer Bildqualität:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="…" width="1600" height="900">
</picture>4. Vermeiden Sie eine per JavaScript nachgeladene Grafik. Wird das LCP-Element erst durch ein Script ins DOM eingefügt (etwa bei client-seitig gerenderten Frameworks), entdeckt der Browser es erst nach dem JS-Download und der Ausführung — das verzögert den LCP zusätzlich. Rendern Sie das LCP-Element wenn möglich serverseitig ins initiale HTML.
5. Reduzieren Sie render-blockierende Ressourcen vor dem LCP-Element. CSS und JavaScript, die vollständig geladen sein müssen, bevor der Browser überhaupt mit dem Rendern beginnt, verzögern zwangsläufig auch das LCP-Element. Kritisches CSS inline im <head> platzieren, den Rest asynchron nachladen. Details dazu im Artikel Render-Blocking & Bundle.
6. Prüfen Sie die Server-Antwortzeit. Ist das LCP-Element ein Textblock statt eines Bildes, hängt der Wert direkt an der Time to First Byte Ihres Servers. Ein schnelles Hosting bzw. Caching auf Serverseite (CDN, statische Generierung) wirkt sich hier unmittelbar aus.
Fazit#
Ein zu langsamer LCP hat fast immer eine von zwei Ursachen: Das entscheidende Element wird zu spät entdeckt, oder es ist selbst zu groß bzw. zu langsam zu laden. Mit Preload, modernen Bildformaten und dem Abbau render-blockierender Ressourcen vor dem LCP-Element lässt sich der Wert in den meisten Fällen deutlich senken — ohne dass Sie an Bildqualität oder Funktionalität einbüßen müssen.
Häufige Fragen
Was ist der Largest Contentful Paint (LCP)?
LCP misst, wie lange es dauert, bis das größte sichtbare Element im aktuell geladenen Ausschnitt einer Seite vollständig gerendert ist — meist ein Hero-Bild, eine Überschrift oder ein Textblock. Er gehört zu den drei Core Web Vitals, mit denen Google die Ladeerfahrung bewertet.
Welcher LCP-Wert gilt als gut?
Ein LCP von 2,5 Sekunden oder weniger auf mobilen Geräten gilt als gut. Werte ab 2,5 Sekunden gelten als verbesserungswürdig, ab 4 Sekunden als schlecht beziehungsweise kritisch.
Warum ist mein LCP-Bild trotz Komprimierung langsam?
Häufig liegt es nicht an der Dateigröße, sondern daran, dass der Browser das Bild erst spät im Ladeprozess entdeckt — etwa weil es per JavaScript nachgeladen wird oder fälschlich mit loading="lazy" versehen ist. Ein preload-Hinweis mit hoher Priorität behebt genau dieses Problem.
Zählt Text auch als LCP-Element?
Ja. Wenn der größte sichtbare Block einer Seite eine Überschrift oder ein Textabschnitt ist, zählt dieser als LCP-Element — nicht nur Bilder. In dem Fall helfen vor allem eine schnelle Serverantwort und der frühzeitige Verzicht auf render-blockierende Ressourcen.
Unterscheiden sich Labor-LCP und Feld-LCP?
Ja. Der Labor-LCP stammt aus einem einzelnen, standardisierten Lighthouse-Durchlauf. Der Feld-LCP (aus dem Chrome UX Report) misst dagegen die tatsächliche Erfahrung realer Besucher über verschiedene Geräte, Netzwerke und Standorte hinweg und kann daher von der Labormessung abweichen.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.