Largest Contentful Paint (LCP)

Was diese Prüfung macht

Liest den LCP aus Google PageSpeed Insights (das im Hintergrund Lighthouse gegen deine URL ausführt). Der Wert ist die Zeit in Sekunden, bis das größte Above-the-Fold-Element fertig gerendert ist — typischerweise ein Hero-Bild, ein Video-Poster oder eine große Überschrift.

LCP-Wert	Verdikt
≤ 2,5 s	Gut
2,5–4,0 s	Verbesserungswürdig
> 4,0 s	Schlecht

Warum es wichtig ist

LCP ist eines von Googles drei Core Web Vitals. Ein schlechter LCP drückt nicht nur das Ranking — er kaskadiert durch jeden Conversion-Funnel deiner Site. Googles eigene Daten zeigen: Seiten mit LCP unter 2,5 s haben rund 25 % geringere Absprungraten als Seiten über 4 s.

LCP wird dominiert davon, wie schnell das LCP-Element lädt — nicht davon, wie schnell dein JavaScript läuft. Das LCP-Element ist fast immer ein Bild. Also drehen sich 80 % der LCP-Fixes um Bild-Auslieferung.

Wie du es behebst

Grob nach Wirkung sortiert:

1. Preload das LCP-Bild. Im <head>:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Das startet den Bild-Download, bevor der Browser den restlichen HTML-Code fertig geparst hat.

2. Liefere moderne Formate aus. AVIF oder WebP mit JPEG-Fallback für ältere Browser:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="600" fetchpriority="high" />
</picture>

3. Setze explizite Dimensionen auf dem <img> (width- + height-Attribute). Browser reservieren Platz, ohne aufs Bild zu warten.

4. Größe passend zum Viewport. Liefer kein 4000×3000-Hero-Bild an ein Mobile-Viewport. Nutze srcset mit mehreren Auflösungen.

5. Selbst-hoste Schriften oder nutze font-display: swap. Eine render-blockierende Webfont verzögert das Headline-als-LCP-Element.

6. Hol das LCP-Bild aus dem Lazy-Loading raus. Wenn deine Bild-Library alles lazy lädt, muss das Hero-Bild explizit ausgenommen werden (loading="eager", fetchpriority="high").

Häufig gestellte Fragen

Mein LCP-Element ist Text, kein Bild. Was nun?

Du bist schon in guter Verfassung — Text rendert schnell. Der Fix dreht sich meist um render-blockierende Ressourcen: unkritisches JS verzögern, kritisches CSS inlinen, render-blockierende Webfonts eliminieren.

Warum unterscheidet sich mein LCP in PageSpeed und im eigenen Browser?

PageSpeed simuliert eine langsame 4G-Verbindung auf einem Mid-Tier-Android. Dein Dev-Rechner hängt an Glasfaser. Vertrau immer den Field-Daten (CrUX), nicht deinen lokalen DevTools.

Hilft ein CDN beim LCP?

Ja — ein CDN senkt die Roundtrip-Zeit zu deinem Origin-Server, was die Zeit bis zum Start des Bild-Downloads direkt reduziert. Cloudflare, Bunny und Fastly sind gängige Wahlen.