01
Slow TTFB
Wenn HTML wegen PHP, MySQL, Cache Misses oder Upstream-APIs spät eintrifft, starten auch alle späteren LCP-Phasen verspätet.
Home / WordPress-LCP-Optimierung
Largest Contentful Paint · WordPress
WordPress-LCP-Optimierung beginnt, bevor das Hero-Bild heruntergeladen wird.
Schlechter Largest Contentful Paint ist nicht immer ein Problem der Bildgröße. Die LCP-Zeit setzt sich aus Serverantwort, Resource Discovery, Download und Render Delay zusammen. Ich identifiziere, welche Phase das Budget verbraucht, und behebe den WordPress-/Template-Pfad, der dafür verantwortlich ist.
Technischer Leitfaden + Umsetzung · Geprüft am 16. August 2026
01 · Was meistens kaputtgeht
LCP kann spät sein, auch wenn die Datei klein ist.
In WordPress ist das LCP-Element häufig ein Hero-Bild, Featured Image, Heading oder Slider. Der Browser kann es erst rendern, nachdem WordPress HTML gesendet hat, die Ressource entdeckt wurde, Abhängigkeiten erfüllt sind und CSS/Animation das Paint zulässt.
02
Späte Ressourcenerkennung
CSS-Background-Bilder, slider-generiertes Markup, lazy-geladene Above-the-fold-Bilder und JavaScript-injizierte Heroes sind im initialen HTML möglicherweise nicht auffindbar.
03
Falsche Priorität
Eine kritische Bildressource kann mit Fonts, Scripts und weniger wichtigen Bildern konkurrieren, wenn Priority Hints oder Preloads fehlen oder falsch eingesetzt werden.
04
Schlechte responsive Größen
Ein 2400px-Bild an einen schmalen Mobile-Viewport auszuliefern verschwendet Bandbreite, selbst in WebP/AVIF. Korrektes srcset, sizes und Dimensionen sind wichtig.
05
Renderblockierendes CSS/Schriften
Die LCP-Ressource kann fertig heruntergeladen sein und trotzdem auf Critical CSS, Webfonts, Layout oder Animation warten, bevor sie gezeichnet wird.
06
Verzögerung durch Slider/Einblendungen
Opacity-Transitions, Carousels und JavaScript-gesteuerte Reveals können den finalen LCP-Kandidaten verborgen oder instabil halten, obwohl die Ressource bereit ist.
02 · Erst diagnostizieren, dann ändern
LCP in die vier von Google ausgewiesenen Teile zerlegen.
Nur auf die finale Zahl von 3,8 s zu schauen, versteckt den Fix. Ich untersuche LCP-Element und Timing-Phasen und trace die Verzögerungen zurück auf WordPress-, Theme- oder Builder-Entscheidungen.
LCP-Element pro Template
Der Kandidat kann sich zwischen Homepage, Landingpage, Produkt- und Artikel-Templates unterscheiden. Optimiert wird daher die Seitenfamilie, die in Felddaten tatsächlich durchfällt.
TTFB-Aufschlüsselung
Origin-/Server-/Cache-Zeit prüfen, bevor Stunden in Frontend-Mikrooptimierungen fließen.
Erkennungskette
Mit DevTools sehen, wann der Browser von der LCP-Ressource erfährt und welche Stylesheet-/Script-Abhängigkeit diese Discovery verzögert.
Priorität und Preload
Preload/fetch priority nur für wirklich kritische Assets einsetzen; zu viele High-Priority-Ressourcen konkurrieren miteinander.
Responsive Datenmenge
Vergleiche Originalmaße, dargestellte Maße, srcset/sizes-Auswahl und Kompressionsformat bei gängigen Mobilbreiten.
Renderverzögerung
Wenn das Bild früh heruntergeladen wird, LCP aber später feuert, Fonts, CSS, Animation, Opacity, Slider und lange Main-Thread-Arbeit rund um den Paint prüfen.
03 · Implementation
Das LCP-Element auffindbar, priorisiert und sofort paintbar machen.
Die Umsetzung besteht meist aus einer kurzen Kette gezielter Änderungen. WordPress-Themes und Builder verstecken kritische Assets manchmal hinter CSS oder JavaScript; sie in den richtigen HTML-Pfad zu verschieben kann mehr bringen als eine weitere Kompressionsrunde.
Den echten Kandidaten finden
Lab-Traces und Felddaten-Gruppen erfassen, damit das Element optimiert wird, das Nutzer auf den tatsächlich fehlerhaften Templates sehen.
Serverantwort verkürzen
Cache-/Origin-/Backend-Verzögerungen zuerst beheben, wenn TTFB einen großen Teil des LCP-Budgets verbraucht.
Die Ressource früh sichtbar machen
Wo sinnvoll responsives Image-Markup nutzen, Above-the-fold-Kandidaten nicht lazy-loaden und unnötige Discovery-Abhängigkeiten entfernen.
Sinnvolle Priorität setzen
Preload/fetchpriority gezielt für das echte LCP-Asset einsetzen und verhindern, dass weniger wichtige Ressourcen im First View konkurrieren.
Renderverzögerung entfernen
CSS-/Font-/Animationsbarrieren reduzieren und sicherstellen, dass der LCP-Kandidat sofort gezeichnet werden kann, sobald er bereit ist.
In Produktion prüfen
Vergleichbare Traces nach Deployment erneut ausführen und Search Console/CrUX beobachten, während neue Felddaten entstehen.
04 · Was du tatsächlich bekommst
Ein Metrik-Fix, der direkt an den tatsächlichen Renderpfad gebunden ist.
Du bekommst die Timing-Aufschlüsselung und eine Umsetzung, die sie adressiert – keine generischen Tipps wie „Bilder komprimieren / CDN aktivieren“.
01
Aufschlüsselung der LCP-Zeit
TTFB, Load Delay, Load Duration und Render Delay für repräsentative fehlerhafte URLs.
02
Hero-/Medien-Fix
Responsive Loading, Priorität und Markup-Änderungen für das kritische Element, wo relevant.
03
Änderungen an Theme/Builder
Template-Level-Änderungen, wenn CSS-Backgrounds, Slider oder Builder-Ausgabe späte Discovery verursachen.
04
Bereinigung des kritischen Pfads
CSS-/Font-/Script-Änderungen, damit fertiger LCP-Content früher painten kann.
05
Regressionsprüfung
Mobile-/Desktop-Visual-QA und Bestätigung, dass Lazy-Loading-/Priority-Änderungen andere Seiten nicht beschädigt haben.
06
Nachverfolgung mit Felddaten
Klare Erklärung der Verzögerung zwischen dem Ausrollen des Fixes und einer sichtbaren Änderung in der rollierenden Felddatenbewertung.
Wenn PageSpeed Largest Contentful Paint als Problem zeigt, beginne mit dem Element – nicht mit einer Plugin-Liste.
Bei LCP plus INP/CLS über mehrere Templates ist der Core-Web-Vitals-Service der passendere Umbrella-Engagement.
FAQ
Fragen, die ich bekomme, bevor ich Produktion anfasse.
Was ist ein guter LCP-Wert für WordPress?
Für Core Web Vitals gilt ein Largest Contentful Paint von 2,5 Sekunden oder weniger am 75. Perzentil als gut. Felddaten sind das Ziel; Lab-Tools helfen dabei, die Ursache zu reproduzieren und zu diagnostizieren.
Warum ist mein LCP hoch, obwohl die Bilder komprimiert wurden?
Das Bild kann spät entdeckt werden, von CSS blockiert sein, auf langsames TTFB warten, niedrige Priorität haben oder durch Animationen/Fonts verzögert werden. LCP umfasst den gesamten Weg bis zum Paint des Elements – nicht nur die Dateigröße.
Sollte ich das LCP-Bild preloaden?
Manchmal. Preload oder höhere Fetch-Priorität kann helfen, wenn der Browser das kritische Bild sonst spät entdeckt. Unnötige oder doppelte Preloads konkurrieren aber um Bandbreite. Der Waterfall sollte die Änderung rechtfertigen.
Kann ein CSS-Hintergrundbild das LCP-Element sein?
Ja. Ein großes Hero-Background kann zum LCP-Kandidaten werden, aber CSS-basierte Discovery erfolgt oft später als bei einem Bild im initialen HTML. Responsives Image-Markup kann Discovery und Sizing verbessern.
Beeinflusst TTFB das LCP?
Ja. Der Browser kann Seitenressourcen erst entdecken, nachdem genügend HTML/CSS eingetroffen ist. Eine langsame Serverantwort verschiebt daher die komplette LCP-Timeline nach hinten.
Wie lange dauert es, bis Search Console die Verbesserung zeigt?
Core-Web-Vitals-Felddaten werden über einen rollierenden Zeitraum aggregiert und aktualisieren sich deshalb nicht sofort nach dem Deployment. Nutze Lab-Traces und Real User Monitoring zur direkten Verifikation, während die Felddaten nachziehen.