Was ist Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) misst, wie schnell der größte sichtbare Inhalt einer Webseite im Browser gerendert wird. Gemeint ist meist ein großes Hero-Bild, eine Headline-Fläche, ein Textblock oder ein anderes zentrales Element im zuerst sichtbaren Bereich.

Welche LCP-Werte gelten als gut?

LCP gehört zu den Core Web Vitals und hat klare Orientierungswerte. Ein LCP bis 2,5 Sekunden gilt als gut. Zwischen 2,5 und 4 Sekunden besteht Verbesserungsbedarf. Werte über 4 Sekunden gelten als schlecht.

Wichtig ist der Kontext: Ein einzelner Testlauf sagt wenig aus, wenn Nutzer mit verschiedenen Geräten, Verbindungen und Browsern auf die Seite kommen. Google bewertet Core-Web-Vitals-Daten deshalb typischerweise anhand des 75. Perzentils. Vereinfacht gesagt sollte die Seite für den Großteil der Besucher schnell genug laden.

Was bremst Largest Contentful Paint?

Häufige LCP-Probleme entstehen im oberen Seitenbereich. Große, unkomprimierte Hero-Bilder sind ein Klassiker. Auch langsame Serverantworten, Render-blockierendes CSS, zu spät geladene Web-Fonts und JavaScript, das den Hauptthread beschäftigt, können den größten sichtbaren Inhalt verzögern.

Bei WordPress-Websites kommen oft zusätzliche Faktoren hinzu: Page-Builder-Ausgaben, viele Plugin-Assets, externe Tracking-Skripte oder Themes, die für jede Seite dieselben großen Ressourcen laden. LCP ist dann nicht nur ein Bildproblem, sondern ein Symptom für eine zu schwere Auslieferung.

Ein häufiger Irrtum ist, nur die Dateigröße des größten Bildes zu betrachten. Entscheidend ist die gesamte Kette bis zur sichtbaren Darstellung: Serverantwort, HTML, CSS, Bildpriorität, Format, Abmessungen und Browserarbeit. Ein eigentlich optimiertes Bild kann trotzdem spät erscheinen, wenn es erst nach mehreren Skripten entdeckt wird.

Wie lässt sich LCP verbessern?

Der erste Schritt ist die Identifikation des tatsächlichen LCP-Elements. PageSpeed Insights und Chrome DevTools zeigen, welches Element in einem Test als LCP gezählt wurde. Danach geht es um Priorisierung: Das wichtigste Element im sichtbaren Bereich sollte früh, komprimiert und ohne unnötige Umwege geladen werden.

Typische Maßnahmen sind:

• Hero-Bilder in passender Größe und modernem Format ausliefern
• das LCP-Bild nicht per Lazy Loading verzögern
• Serverantwortzeit und Caching prüfen
• kritisches CSS priorisieren
• unnötige Skripte im Seitenkopf reduzieren

LCP sollte immer zusammen mit Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS) betrachtet werden. Eine Seite kann sichtbar schnell erscheinen, aber anschließend auf Eingaben träge reagieren oder durch nachladende Elemente instabil wirken.

Für Unternehmen ist LCP besonders relevant auf Startseiten, Landingpages, Produktseiten und Kontaktstrecken. Dort entscheidet der erste Eindruck darüber, ob Nutzer weiterlesen oder abbrechen. Eine gezielte Performance-Optimierung beginnt deshalb oft genau im sichtbaren Einstiegsbereich. Die technischen Grundlagen beschreibt web.dev im Artikel zu Largest Contentful Paint.

Bei der Bewertung sollte man mobile Nutzer besonders ernst nehmen. Mobilfunkverbindungen, schwächere Geräte und hohe Bilddichten zeigen LCP-Probleme oft deutlicher als schnelle Desktop-Tests im Büro.