LCP optimieren: So verbessern Sie Largest Contentful Paint

Largest Contentful Paint (LCP) ist die Metrik Core Web Vitals, die seit 2021 die Rankings bei Google beeinflusst. Sie ist mehr als eine technische Kennzahl: Sie zeigt, wie schnell Nutzer eine Seite als geladen wahrnehmen. Ein schlechter LCP bedeutet, dass Besucher einen leeren Bildschirm oder ein nicht geladenes Hero-Bild sehen und die Seite verlassen, bevor der Inhalt erscheint.

zoom_in

Was ist LCP und warum er wichtig ist

LCP misst die Zeit vom Start der Navigation bis zu dem Moment, in dem das größte Inhaltselement (Text oder Bild) im sichtbaren Bereich (Viewport) erscheint. Google nutzt diesen Schwellenwert, um das Laden aus Nutzersicht als abgeschlossen zu bewerten.

Anders als FCP (First Contentful Paint), das beim ersten sichtbaren Pixel auslöst, erfasst der LCP gezielt relevante Inhalte. Eine Seite zeigt vielleicht schon bei 0,3 s einen Ladeindikator. Erscheint das Hero-Bild aber erst bei 5 s, liegt der LCP bei 5 s.

Welche Elemente der Browser als LCP-Kandidaten berücksichtigt

Der Browser prüft nicht jedes Element. Er achtet auf bestimmte Typen und wählt zum Abschluss des Ladens das flächenmäßig größte Element im sichtbaren Bereich aus.

<img>-Elemente

Standardbilder. Auf den meisten Seiten der häufigste LCP-Kandidat. Gemessen wird der Moment, in dem das dekodierte Bild im sichtbaren Bereich erscheint.

<image> in SVG

Bilder innerhalb von SVG-Elementen. Für den LCP werden sie wie normale img-Elemente behandelt.

CSS-background-image

Hintergrundbilder über CSS. Wichtige Besonderheit: Der Browser beginnt erst mit dem Laden eines background-image, wenn das CSSOM aufgebaut ist. Das ist eine der Hauptursachen für eine LCP-Verzögerung.

Textblöcke

<p>, <h1> bis <h6>, <div> und andere Elemente mit Textinhalt. Ist ein Textblock größer als jedes Bild, wird er zum LCP.

<video> mit poster

Das Poster-Bild eines Video-Elements (Attribut poster). Nimmt das Video den größten Teil des Bildschirms ein, muss das Poster so schnell wie möglich laden.

Aus welchen Teilen sich die LCP-Zeit zusammensetzt

Google zerlegt den LCP in vier Teilkomponenten. Wer jede davon versteht, diagnostiziert richtig und setzt die Optimierungen in der richtigen Reihenfolge um.

Regel: Gehen Sie zuerst die Komponente mit dem größten Anteil an. Entfallen 3 von 5 Sekunden LCP auf die TTFB, bringt die Optimierung der Bilder kaum etwas. Verbessern Sie zuerst die Antwortzeit des Servers.

Häufige Ursachen für einen langsamen LCP

90 % der schlechten LCP-Werte haben dieselben Ursachen. Die Diagnose dauert in DevTools oder PageSpeed Insights etwa 15 Minuten.

LCP optimieren: ein Schritt-für-Schritt-Plan

Die LCP-Optimierung ist kein einzelner Trick, sondern ein Bündel zusammenhängender Verbesserungen. Arbeiten Sie der Reihe nach und beginnen Sie mit den wirkungsstärksten Punkten.

Schritt 1: TTFB auf 200–400 ms senken

Die TTFB ist das Fundament. Ist der Server langsam, arbeiten alle weiteren Optimierungen gegen diese Obergrenze.

1. HTTP-Caching einrichten: Cache-Control: max-age=31536000 für statische Dateien, s-maxage für CDN-Proxys.
2. Komprimierung aktivieren: Brotli (bevorzugt) oder gzip für HTML, CSS und JS. Brotli liefert Dateien, die 15–25 % kleiner sind als bei gzip.
3. CDN anbinden: Cloudflare, Fastly, BunnyCDN. Bei statischen Seiten senkt Edge-Caching die TTFB auf 20–50 ms.
4. Datenbank optimieren: Indizes für häufig abgefragte Felder, Abfrage-Caching über Redis oder Memcached.
5. HTTP/2 oder HTTP/3 nutzen: Mehrere Anfragen laufen über eine Verbindung, ohne Head-of-Line-Blocking.

Schritt 2: Das LCP-Bild optimieren

Ist das LCP-Element ein Bild (Hero-Bild, Produktbild), lohnt sich dieser Schritt besonders.

• Moderne Formate verwenden: WebP (25–35 % Einsparung gegenüber JPEG) oder AVIF (40–55 % gegenüber JPEG). Arbeiten Sie mit <picture> und einem Fallback.
• fetchpriority="high" am LCP-Bild ergänzen. Der Browser lädt es dann mit höchster Priorität.
• loading="lazy" vom LCP-Element entfernen. Lazy Loading eignet sich nur für Bilder unterhalb des ersten sichtbaren Bereichs.
• <link rel="preload" as="image"> im <head> für das LCP-Bild ergänzen. Der Browser beginnt dann mit dem Laden, bevor der body geparst ist.
• width- und height-Attribute angeben, um CLS zu vermeiden. Der Browser reserviert den Platz, bevor das Bild geladen ist.
• srcset und sizes für adaptives Laden konfigurieren: Mobilgeräte erhalten ein 400-px-Bild statt eines 1.600-px-Bildes.

Schritt 3: Render-blocking-Ressourcen beseitigen

Jede render-blocking-Ressource verzögert den LCP. Ziel ist keine einzige blockierende Ressource im kritischen Pfad.

Schritt 4: Schriften optimieren, wenn der LCP ein Text ist

Ist das LCP-Element ein Textblock (Überschrift, Lead), liegt das Problem oft in der Verzögerung beim Rendern der Schrift.

1. font-display: swap oder optional in @font-face setzen. Der Browser zeigt sofort eine Systemschrift und ersetzt sie nach dem Laden durch die Webschrift.
2. Für kritische Schriften im <head> <link rel="preload" as="font" type="font/woff2" crossorigin> verwenden.
3. Den Zeichensatz begrenzen: Subsetting lädt nur die benötigten Glyphen (Latein, Kyrillisch).
4. Schriften selbst hosten statt sie über Google Fonts zu laden. So entfällt ein zusätzlicher DNS-Lookup und eine zusätzliche Verbindung.
5. size-adjust, ascent-override und descent-override in @font-face setzen, um den CLS beim Austausch der Schrift zu verringern.

Schritt 5: SSR/SSG für JavaScript-Frameworks

Läuft die Website mit React, Vue oder Next.js ohne SSR, ist der LCP standardmäßig hoch. Der Browser muss JavaScript laden und ausführen und erst danach den Inhalt rendern.

Server-Side Rendering (SSR)

Das HTML wird bei jeder Anfrage auf dem Server erzeugt. Der Browser erhält fertiges HTML, parst es, und das LCP-Element erscheint, ohne auf JS zu warten. Die beste Option für dynamische Inhalte.

Static Site Generation (SSG)

Das HTML entsteht zur Build-Zeit. Der Server liefert eine fertige Datei, was die höchste Geschwindigkeit bei TTFB und LCP ergibt. Ideal für Blogs, Landingpages und nicht personalisierte Seiten.

Incremental Static Regeneration (ISR)

SSG mit periodischer Neugenerierung (Next.js). Verbindet die Geschwindigkeit statischer Dateien mit aktuellen Daten. Optimal für die meisten CMS-Inhalte.

Streaming SSR

Der Server beginnt, HTML zu senden, bevor das Rendering abgeschlossen ist, und der Browser zeigt Inhalte schrittweise an. React 18 und Next.js 13+ unterstützen das ohne zusätzliche Einrichtung.

Schritt 6: CSS-background-image als LCP

Ist das LCP-Element ein per CSS eingebundenes background-image, kann der Browser das Laden erst starten, wenn das CSSOM aufgebaut ist. Das ist eine der heimtückischsten Ursachen für einen langsamen LCP.

• CSS-background-image durch <img fetchpriority="high"> ersetzen. Der Browser entdeckt das Bild dann beim Parsen des HTML.
• Ist ein Austausch nicht möglich, <link rel="preload" as="image"> nutzen, um das Laden manuell anzustoßen.
• Für adaptive Hintergründe imagesrcset und imagesizes im Preload-Tag verwenden.
• Das CSS mit dem LCP-background-image in ein inline <style> verschieben. So entfällt eine Netzwerkanfrage.

Werkzeuge zum Messen und Diagnostizieren des LCP

Eine korrekte Diagnose ist wichtiger als blindes Optimieren. Nutzen Sie beide Arten von Werkzeugen: Labor (synthetische Tests) und Feld (echte Nutzer).

LCP in den Chrome DevTools diagnostizieren

DevTools ist das präziseste Werkzeug, um zu verstehen, was den LCP auf einer bestimmten Seite bremst.

1. DevTools → Performance öffnen, Record starten, die Seite neu laden und die Aufnahme stoppen.
2. Unter Timings die LCP-Markierung suchen. Sie zeigt die genaue Zeit und das Element.
3. Den Waterfall untersuchen: Ressource des LCP-Elements finden und prüfen, wann ihr Laden im Verhältnis zur TTFB begann.
4. Auf rote Balken achten. Das sind render-blocking-Ressourcen, sie erscheinen direkt vor dem LCP.
5. Im Network-Tab nach dem Typ Image filtern, das LCP-Bild suchen und seine Priorität prüfen (sie sollte High sein).
6. Im Coverage-Tab werden ungenutzte CSS- und JS-Teile angezeigt. Viel ungenutzter Code bedeutet eine Verzögerung des LCP.

Häufige Fragen