Warum LCP die Metrik ist, die das Ranking wirklich trifft
Von den drei Core Web Vitals — LCP, INP und CLS — ist Largest Contentful Paint die Metrik, an der die meisten WordPress-Seiten scheitern, und die am direktesten auf eine einzelne Ursache zurückführt: Bilder.
LCP misst, wie lange es dauert, bis das größte sichtbare Element der Seite gerendert wird. Auf der großen Mehrheit der WordPress-Seiten — Blogs, Produktseiten, Agentur-Portfolios — ist dieses Element ein Bild: ein Hero-Banner, ein Beitragsbild, ein Produktfoto über dem Fold.
Wenn dein LCP-Wert in PageSpeed Insights oder der Search Console rot ist, liegt die Lösung mit hoher Wahrscheinlichkeit nicht in einem neuen Host oder Cache-Plugin. Es ist das Bild selbst.
Die Checkliste
Arbeite diese Punkte in Reihenfolge ab. Jeder zielt auf eine bestimmte Art, wie Bilder LCP verlangsamen.
1. Identifiziere dein tatsächliches LCP-Element
Bevor du etwas behebst, bestätige, was tatsächlich gemessen wird. Öffne Chrome DevTools → Performance-Tab → zeichne einen Seitenaufruf auf → suche nach der "LCP"-Markierung in der Timeline. Sie zeigt genau auf das Element.
Alternativ führe die Seite durch PageSpeed Insights — der Bericht benennt das LCP-Element direkt unter "Diagnostics".
Rate nicht. Das falsche Bild zu optimieren verschwendet Zeit und ändert nichts am Score.
2. Prüfe das Dateiformat
JPEG und PNG sind Formate aus den 1990ern, die immer noch auf viel zu vielen Seiten ausgeliefert werden. WebP ist bei gleicher Qualität rund 25–35 % kleiner als JPEG, AVIF geht noch weiter — oft 50 % kleiner als JPEG.
Wenn dein LCP-Bild noch ein rohes JPEG oder PNG ist, ist das fast immer die wirkungsvollste verfügbare Korrektur. Die genaue Vorgehensweise findest du in unserem vollständigen Leitfaden zur WebP-Konvertierung in WordPress — kurz gesagt erledigt Erdo Image Optimizer das automatisch, mit der serverseitigen GD- oder Imagick-Bibliothek, ohne API-Schlüssel.
3. Prüfe die tatsächlich gerenderten Abmessungen
Ein 4000×3000px-Foto, das in einem 800px breiten Hero-Container angezeigt wird, verschwendet rund 90 % der heruntergeladenen Bytes. Der Browser muss die gesamte Datei herunterladen, bevor er sie verkleinern kann.
Prüfe das per Rechtsklick auf das Bild → Untersuchen → vergleiche die natürliche Größe mit der gerenderten width/height in den berechneten Stilen. Ist die natürliche Größe mehr als das ~1,5-Fache der gerenderten Größe, braucht das Bild eine Größenänderung — nicht nur Kompression.
4. Explizite width- und height-Attribute setzen
Fehlende width/height-Attribute schaden LCP nicht direkt, aber sie schaden CLS (der Layout-Shift-Metrik), und eine Seite, die beim Laden das Layout verschiebt, verzögert oft auch die LCP-Messung. Jedes <img>-Tag sollte explizite Abmessungen haben, damit der Browser Platz reservieren kann, bevor die Datei geladen wird.
5. Den LCP-Kandidaten niemals lazy-loaden
Das ist der Fehler, den wir am häufigsten sehen: Ein "Performance"-Plugin fügt loading="lazy" zu jedem Bild auf der Seite hinzu, einschließlich des Hero-Bilds. Lazy Loading weist den Browser an, mit dem Laden zu warten, bis das Bild nahe am Viewport ist — genau das Gegenteil von dem, was du für das Bild willst, das deinen LCP-Wert bestimmt.
Die Lösung: Bilder über dem Fold sollten eager geladen werden (ohne loading="lazy"-Attribut oder explizit mit loading="eager"), idealerweise mit fetchpriority="high". Nur Bilder unter dem Fold sollten lazy-geladen werden.
6. Das LCP-Bild preloaden, wenn es nicht das Erste ist, was der Browser sieht
Wenn dein LCP-Bild über ein CSS-background-image geladen wird oder in einem Slider/Karussell versteckt ist, das JavaScript erst nach dem Seitenaufbau rendert, entdeckt der Browser es erst spät im Ladeprozess. Ein <link rel="preload" as="image">-Tag für genau dieses Bild im <head> weist den Browser an, es sofort und parallel zu allem anderen zu laden.
7. Serverantwortzeit für das Bild selbst prüfen
Ein korrekt dimensioniertes, korrekt formatiertes WebP-Bild lädt trotzdem nicht schnell, wenn es von einem unoptimierten Origin ohne Cache-Header ausgeliefert wird. Stelle sicher, dass deine Bilder mit langen Cache-Laufzeiten (Cache-Control: max-age=31536000 für statische Assets) ausgeliefert werden, und ziehe ein CDN in Betracht, wenn du nennenswerten Traffic aus mehreren Regionen hast.
8. Nach jeder Änderung erneut testen
Führe nicht alle acht Schritte gebündelt aus und teste nur einmal am Ende. Format korrigieren, erneut testen. Abmessungen korrigieren, erneut testen. So siehst du, welche Änderung tatsächlich etwas bewirkt hat — nützlich bei einer Seite, auf der mehrere Dinge gleichzeitig falsch sind.
Das im großen Maßstab erledigen
Jedes Bild auf einer 50-seitigen Website manuell zu prüfen, ist nicht realistisch. Genau diese Lücke schließt das integrierte SEO-Audit von Erdo Image Optimizer — es scannt jedes Bild deiner Seite und markiert überdimensionierte Dateien, fehlende Lazy-Loading-Attribute (und den umgekehrten Fehler — Lazy Loading von Bildern über dem Fold), falsche Formate und fehlenden Alt-Text in einem einzigen Bericht.
Kombiniert mit automatischer WebP/AVIF-Konvertierung beim Upload wird der Großteil dieser Checkliste zu einer einmaligen Einrichtung statt einer wiederkehrenden manuellen Prüfung.
Fazit
LCP-Probleme fühlen sich wie ein Hosting- oder Cache-Problem an, weil das die Annahme der meisten generischen "Mach deine Seite schneller"-Ratschläge ist. In der Praxis lautet die Lösung auf einer typischen WordPress-Seite fast immer: das richtige Format, in der richtigen Größe, mit der richtigen Priorität ausliefern. Arbeite die obige Checkliste durch, bevor du zu einem teureren Host oder einer serverseitigen Cache-Schicht greifst — dort liegt das Problem meistens nicht.