LCP unter 2,5 Sekunden bringen: Was du konkret optimieren musst

Der Largest Contentful Paint (LCP) misst, wie lange es dauert bis das größte sichtbare Element im Viewport vollständig geladen ist. Google bewertet einen LCP unter 2,5 Sekunden als "gut". Alles darüber schadet deinem Ranking. Hier ist, wie du ihn systematisch verbesserst.

Was wird als LCP-Element gemessen?

Der Browser identifiziert automatisch das größte Element im sichtbaren Bereich der Seite. Das sind typischerweise:

• Das Hero-Bild ganz oben auf der Seite (häufigster Fall)
• Ein großes Hintergrundbild per CSS
• Ein großer Textblock, zum Beispiel eine H1-Überschrift ohne Bild
• Ein Video-Poster-Bild

Um herauszufinden, was auf deiner Seite als LCP-Element gilt, öffne Chrome DevTools, wechsle zum Tab "Performance", starte eine Aufzeichnung und suche nach "LCP" in der Timeline. Alternativ zeigt dir Google Lighthouse das LCP-Element direkt an.

Schritt 1: Das LCP-Bild preloaden

Der häufigste LCP-Fix: Das Hero-Bild wird zu spät entdeckt. Der Browser muss erst HTML und CSS parsen, bevor er das Bild überhaupt anfordert. Mit einem Preload-Link im Head wird das Bild sofort angefordert:

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

Kombiniere das mit dem Attribut fetchpriority="high" direkt am img-Tag. So signalisierst du dem Browser, dass dieses Bild höchste Priorität hat.

Schritt 2: Das LCP-Bild optimieren

Ein 2-MB-Hero-Bild wird kein gutes LCP erzielen, egal wie schnell der Server ist. Optimiere Bilder konsequent:

• Konvertiere zu WebP: Gleiche Qualität bei 30-50 % kleinerer Dateigröße
• Verwende srcset, um gerätegerechte Größen zu liefern: 400px für Mobile, 800px für Tablet, 1200px für Desktop
• Komprimiere mit Squoosh, TinyPNG oder direkt beim Upload über WordPress-Plugins wie Imagify oder ShortPixel
• Stelle sicher, dass das LCP-Bild nicht per JavaScript oder Lazy Loading verzögert geladen wird

Wichtig: Setze beim LCP-Bild ausdrücklich loading="eager" statt loading="lazy". Lazy Loading verzögert genau das Bild, das so schnell wie möglich laden soll.

Schritt 3: Server-Antwortzeit (TTFB) verbessern

LCP beginnt erst, wenn der Browser die erste Antwort vom Server erhält. Eine hohe TTFB (Time to First Byte) setzt deinen LCP von Anfang an unter Druck. Maßnahmen:

• Aktiviere serverseitiges Caching. Bei WordPress hilft ein Cache-Plugin wie WP Rocket oder W3 Total Cache enorm. Mehr dazu in unserem WordPress Cache Plugin Vergleich.
• Nutze ein CDN (Content Delivery Network), das Inhalte aus dem Rechenzentrum nächst deinem Besucher ausliefert.
• Wechsle zu einem schnelleren Hoster. Shared Hosting mit überlasteten Servern ist oft der wahre LCP-Killer.

Schritt 4: Render-Blocking-Ressourcen eliminieren

CSS und JavaScript, die das Rendering blockieren, verzögern alles, auch den LCP. Mehr zum Thema in unserem Render Blocking Lexikon-Artikel. Kurzfassung: Lade kritisches CSS inline, lade nicht-kritisches CSS asynchron und schiebe JavaScript mit defer oder async nach.

Was ein guter LCP-Wert für dein Ranking bedeutet

Google nutzt Core Web Vitals als Ranking-Faktor. Seiten mit LCP unter 2,5 Sekunden werden als "gut" eingestuft. Zwischen 2,5 und 4 Sekunden gilt als "verbesserungswürdig". Alles über 4 Sekunden ist "schlecht" und kostet Rankings. Mehr zum Zusammenhang zwischen Ladezeit und Google-Sichtbarkeit findest du in unserem Beitrag Warum langsame Websites Kunden kosten.

Bei rocks.optimize analysieren wir den LCP jeder Seite deiner Website individuell und setzen alle Maßnahmen für dich um, ohne dass du technisches Vorwissen brauchst.