WordPress LCP verbessern — die häufigsten Ursachen und Lösungen

Largest Contentful Paint (LCP) ist eine der wichtigsten Performance-Metriken — und gleichzeitig die, bei der WordPress-Websites am häufigsten scheitern. Google bewertet LCP unter 2.500 ms als „gut", über 4.000 ms als „schlecht". Viele WordPress-Seiten liegen weit darüber.

In diesem Artikel zeigen wir die häufigsten Ursachen für schlechten LCP bei WordPress — und wie du sie systematisch behebst.

Was ist LCP genau?

LCP misst wann das größte sichtbare Element einer Seite vollständig geladen ist. Das kann ein Bild, ein Video-Poster oder ein großer Textblock sein — was auch immer im sichtbaren Bereich am meisten Platz einnimmt.

Wichtig: LCP ist kein Labormesswert aus einem Tool wie Lighthouse allein. Google bewertet LCP auf Basis echter Nutzerdaten aus dem Chrome User Experience Report (CrUX). Ein guter Lighthouse-Wert bedeutet nicht automatisch gute CrUX-Daten — und umgekehrt.

Mit turbometrics Live-Daten siehst du den echten p75-LCP-Wert deiner Besucher — nicht nur den Laborwert.

Die häufigsten LCP-Ursachen bei WordPress

1. Unkomprimiertes oder zu großes Hero-Bild

Das häufigste Problem: Das LCP-Element ist ein großes Bild im Header-Bereich, das nicht optimiert wurde.

Lösung:

• Bilder in WebP oder AVIF konvertieren (30–50 % kleinere Dateigröße)
• loading="eager" und fetchpriority="high" am LCP-Bild setzen
• Bildgröße auf tatsächliche Darstellungsgröße reduzieren
• Plugins wie Imagify, ShortPixel oder Cloudflare Images nutzen

2. Kein Preload für das LCP-Bild

Wenn das LCP-Bild erst spät im HTML-Dokument auftaucht oder per CSS als Background gesetzt ist, entdeckt der Browser es zu spät.

Lösung:

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

Viele Caching-Plugins (WP Rocket, LiteSpeed Cache) bieten diese Option direkt an.

3. Langsamer Server / hoher TTFB

LCP kann nicht schnell sein wenn der Server selbst langsam antwortet. Ein TTFB über 800 ms macht guten LCP fast unmöglich — da das HTML erst spät beim Browser ankommt und alle weiteren Ressourcen verzögert werden.

Lösung:

• Server-seitiges Caching aktivieren (Redis, Memcached, OPcache)
• PHP-Version auf 8.2+ aktualisieren
• Hosting upgraden — Shared Hosting ist oft der Flaschenhals
• Cloudflare oder ein CDN vorschalten

Der TTFB-Artikel in diesem Blog erklärt das im Detail.

4. Render-blockierendes JavaScript und CSS

JavaScript das im <head> ohne async oder defer eingebunden ist, blockiert den Browser-Hauptthread — und damit auch das Laden des LCP-Elements.

Lösung:

• Alle nicht-kritischen Scripts mit defer laden
• Kritisches CSS inline einbinden (Above-the-fold CSS)
• JavaScript-Execution mit Chrome DevTools analysieren

WP Rocket, LiteSpeed Cache und Perfmatters bieten dafür fertige Einstellungen.

5. Externe Schriften ohne Preconnect

Google Fonts und andere externe Schriftarten verursachen zusätzliche DNS-Lookups und Verbindungsaufbauten — das verzögert den ersten sichtbaren Text.

Lösung:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Noch besser: Schriften lokal hosten und mit font-display: swap laden.

6. Kein Browser-Caching für statische Assets

Wenn CSS, JS und Bilder bei jedem Aufruf neu geladen werden müssen, steigt die Ladezeit spürbar — besonders bei Wiederkehrern.

Lösung:

• Apache/Nginx: lange Cache-Header für statische Assets setzen
• Cloudflare: Cache-Regeln für Assets konfigurieren
• WordPress: Caching-Plugin mit Browser-Cache-Option nutzen

LCP systematisch messen und verfolgen

Einmalige Optimierungen reichen nicht — LCP kann sich durch Plugin-Updates, neue Bilder oder Theme-Änderungen verschlechtern.

Mit turbometrics überwachst du LCP automatisch:

• Synthetische Scans prüfen LCP nach jedem Deployment
• Live-Daten zeigen den echten p75-LCP deiner Besucher
• Alerts benachrichtigen dich wenn LCP einen Schwellwert überschreitet

So siehst du sofort wenn etwas schlechter wird — bevor es sich auf dein Google-Ranking auswirkt.

Fazit

LCP bei WordPress zu verbessern ist kein einmaliges Projekt — es ist ein kontinuierlicher Prozess. Die häufigsten Hebel sind:

1. Bilder optimieren und als WebP ausliefern
2. LCP-Bild preloaden
3. TTFB durch besseres Hosting und Caching reduzieren
4. JavaScript und CSS entrümpeln
5. Externe Schriften lokal hosten

Starte mit einer kostenlosen Analyse deiner Website — jetzt scannen.