Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) ist eine Core Web Vitals-Kennzahl, die die Zeit vom Beginn der Navigation bis zur vollständigen Darstellung des größten sichtbaren Elements im Viewport misst. Sie ist Googles wichtigster Näherungswert für "Wann fühlt sich die Seite für den Nutzer geladen an".
Largest Contentful Paint (LCP) ist eine Core Web Vitals-Kennzahl, die die Zeit vom Beginn der Navigation bis zur vollständigen Darstellung des größten sichtbaren Elements im Viewport misst. Sie ist Googles wichtigster Näherungswert für "Wann fühlt sich die Seite für den Nutzer geladen an".
Warum es wichtig ist
LCP ist einer von drei Core Web Vitals und ein bestätigtes Google-Ranking-Signal. Googles Schwellenwerte: gut ≤ 2,5 s, verbesserungswürdig 2,5–4,0 s, schlecht > 4,0 s. Seiten im Bereich "gut" verzeichnen messbar niedrigere Absprungraten und höhere Conversions, und ein Verfehlen des LCP beim 75. Perzentil kann Rankings bei umkämpften Anfragen unterdrücken.
Was als "größtes Element" zählt
LCP verfolgt das größte im sichtbaren Viewport dargestellte Element. Infrage kommende Kandidaten sind <img>, <video>-Posterframes, über CSS url() geladene Hintergrundbilder und Textknoten auf Blockebene. Das "größte" Element kann sich während des Ladevorgangs ändern, LCP verwendet das letztendlich größte Element.
Häufige Ursachen für langsames LCP
Langsame Serverantwort (TTFB): Wenn das HTML 1,5 s benötigt, um anzukommen, kann LCP nicht unter 2,5 s liegen.
Render-blockierende Ressourcen: Synchrones CSS und JS im Head verzögern das erste Rendering.
Nicht optimierte Bilder: Das Hero-Bild ist häufig das LCP-Element. Übergroße, unkomprimierte oder verspätet geladene Bilder dominieren die meisten LCP-Probleme.
Clientseitiges Rendering: SPA-Frameworks, die nach der Hydration in JS rendern, schieben LCP weit über den Schwellenwert "gut" hinaus.
Lazy-Loading des LCP-Elements: Das Hinzufügen von loading="lazy" zum Hero-Bild ist ein häufiger Fehler, es verzögert genau das Element, das LCP misst.
So verbessern Sie LCP
Laden Sie das Hero-Bild vor (Preload): <link rel="preload" as="image" href="..."> verschafft dem Browser einen Vorsprung.
Verwenden Sie moderne Bildformate: WebP und AVIF reduzieren die Datenmenge um 30–50 % gegenüber JPEG.
Fügen Sie fetchpriority="high" hinzu zum Hero-Bild, damit es anderen Ressourcen vorgezogen wird.
Liefern Sie über ein CDN aus, um den TTFB bei weit entfernten Nutzern zu senken.
Betten Sie kritisches CSS inline ein und verschieben Sie den Rest.
Verwenden Sie SSR oder statische Generierung statt clientseitigem Rendering für inhaltsreiche Seiten.
Cachen Sie aggressiv am Edge für wiederkehrende Besucher.
LCP messen
Felddaten: Chrome UX Report (CrUX), Google Search Console Core-Web-Vitals-Bericht, PageSpeed Insights, diese spiegeln echte Nutzer wider.
Labordaten: Lighthouse, WebPageTest, das Performance-Panel der Chrome DevTools, reproduzierbar, aber synthetisch.
Google rankt auf Basis des 75. Perzentils der Felddaten, daher reichen synthetische Tests allein nicht aus.
Sources: