Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) ist eine der drei Core Web Vitals von Google und misst, wie schnell der größte sichtbare Inhalt einer Webseite nach dem Aufruf erscheint. Gemessen wird in Sekunden ab dem Beginn des Seitenaufrufs. LCP ist seit 2021 ein offizieller Ranking-Faktor und liefert eine vergleichsweise einfache Antwort auf die Frage: Wann sieht der Nutzer, dass etwas Substanzielles geladen wurde? Üblicherweise ist das größte Element ein Hero-Bild, eine Video-Vorschau oder ein dominanter Textblock.

Schwellenwerte

Google teilt LCP-Werte in drei Bewertungsstufen:

Die Werte gelten für das 75. Perzentil des realen Nutzer-Traffics – nicht den Median und nicht den Idealwert auf einem Entwickler-Laptop. Das bedeutet: Drei Viertel deiner Besucher sollten das Ziel-LCP erreichen, sonst fließt der Wert negativ ins Ranking ein.

Welches Element zählt als „Largest Contentful Paint“?

Der Browser betrachtet alle sichtbaren Elemente im Viewport und ermittelt das größte nach Pixelfläche. In Frage kommen:

• <img>-Elemente (inkl. <picture>-Sources)
• <video>-Posters
• Background-Images, die über CSS background-image geladen werden
• Block-Level-Textknoten

Nicht gezählt werden Elemente, die außerhalb des initialen Viewports liegen oder per display: none versteckt sind. Animationen und Lazy-loaded-Inhalte, die nach dem ersten Render erscheinen, können den Messwert ebenfalls nicht mehr senken.

Typische Ursachen für schlechtes LCP

1. Langsame Server-Response (TTFB) – die HTML-Antwort kommt zu spät, alles Weitere staut sich
2. Render-blockierendes CSS oder JavaScript – externe Stylesheets oder synchrone Skripte verzögern den ersten Paint
3. Unoptimierte Bilder – riesige PNGs/JPGs ohne moderne Formate (WebP, AVIF) und ohne srcset
4. Web Fonts mit FOIT – Schriften, die das Rendering blockieren statt mit Fallback anzuzeigen
5. Fehlendes CDN – Inhalte laufen rund um den Globus statt vom nächsten Edge-Knoten
6. Client-Side-Rendering ohne SSR – ein React/Vue/Angular-Bundle, das erst geladen, geparst und ausgeführt werden muss, bevor überhaupt etwas Sichtbares im DOM erscheint

Wie wird LCP optimiert?

• Hero-Bilder priorisieren mit fetchpriority="high" und vorgezogenem <link rel="preload" as="image">
• Bilder modernisieren – WebP/AVIF, korrekte Größen via srcset/sizes, sinnvolles loading="eager" für das LCP-Element
• Render-Pfad entlasten – kritisches CSS inline, nicht-kritisches CSS asynchron, JS mit defer/async
• Server beschleunigen – Caching, CDN, Edge-Rendering, weniger Backend-Roundtrips
• Schriften optimieren – font-display: swap, lokales Hosting, Preloading der wichtigsten Variante
• SSR oder Static Generation statt rein clientseitigem Rendering bei JS-lastigen Seiten

Tools für die Messung

• Google PageSpeed Insights liefert sowohl Lab- als auch Field-Daten (CrUX-Report)
• Lighthouse in den Chrome DevTools für lokale Diagnose
• Google Search Console – Core-Web-Vitals-Report über echte Nutzer
• web-vitals JS-Library zum eigenen Tracking im Real-User-Monitoring (RUM)

Häufige Fragen zu LCP

Wo liegt der Unterschied zwischen LCP und First Contentful Paint (FCP)? FCP misst, wann das erste beliebige Element gerendert wird – auch ein Spinner zählt. LCP misst dagegen das größte, also fachlich aussagekräftigere Element. LCP ist als Core Web Vital wichtiger.

Wie oft ändert sich der LCP-Wert? Die Search Console aggregiert über 28 Tage. Eine Optimierung schlägt also nicht sofort, sondern erst über mehrere Wochen voll auf die Bewertung durch.

Zählt nur das LCP auf Mobile oder auch auf Desktop? Beides – die Search Console weist Mobile und Desktop separat aus. Da Google Mobile-First indexiert, ist die mobile LCP-Performance aber besonders wichtig.

Fazit

LCP ist die direkteste Antwort auf die Frage, wie schnell sich eine Seite substantiell aufbaut – und damit ein zentraler Hebel sowohl für Nutzerwahrnehmung als auch für Google-Sichtbarkeit. Bei der Analyse und Optimierung der Core Web Vitals deiner Webseite unterstützen wir dich gerne – melde dich für ein unverbindliches Beratungsgespräch.