So verbessern Sie LCP (Largest Contentful Paint)
LCP misst, wann das größte Element im sichtbaren Bereich fertig gerendert ist. Ein guter LCP liegt bei 2,5 Sekunden oder weniger im 75. Perzentil. Die meisten LCP-Probleme kommen von einer langsamen Serverantwort, blockierenden Ressourcen oder einem nicht optimierten Hero-Bild. Das bringt am meisten, grob nach Wirkung sortiert:
- Liefern Sie das LCP-Element schnell aus: bei einem Bild komprimieren Sie es, nutzen ein modernes Format wie AVIF oder WebP, setzen feste Breite und Höhe und fetchpriority high, damit der Browser es zuerst lädt.
- Senken Sie die Serverantwortzeit (TTFB): cachen Sie HTML am Edge, nutzen Sie ein CDN und vermeiden Sie langsame Datenbankaufrufe im kritischen Pfad. Ein TTFB über 800ms macht einen guten LCP fast unmöglich.
- Entfernen Sie blockierendes CSS und JavaScript: betten Sie kritisches CSS inline ein, verzögern Sie den Rest und vermeiden Sie synchrone Drittanbieter-Skripte above the fold.
- Laden Sie die LCP-Ressource vor: fügen Sie einen Preload-Link für das Hero-Bild oder die Schrift hinzu, damit sie geladen wird, bevor der Browser sie im DOM entdeckt.
- Lazy-loaden Sie das LCP-Bild nicht: Lazy-Loading des Hero-Bilds above the fold verzögert es. Nutzen Sie Lazy-Loading nur below the fold.
Beispiel: das LCP-Bild vorladen und priorisieren
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" width="1200" height="600" fetchpriority="high" alt="Hero image">
So verbessern Sie INP (Interaction to Next Paint)
INP hat First Input Delay im März 2024 als Core Web Vital abgelöst. Es misst, wie schnell die Seite über den gesamten Besuch hinweg auf Interaktionen reagiert, nicht nur auf die erste. Ein guter INP liegt bei 200ms oder weniger im p75. INP-Probleme sind fast immer lange Tasks im Main-Thread. So verbessern Sie es:
- Teilen Sie lange Tasks auf: zerlegen Sie Arbeit, die länger als 50ms dauert (ein Long Task), in kleinere Stücke und geben Sie den Main-Thread frei, damit Eingaben dazwischen verarbeitet werden.
- Verschieben Sie nicht dringende Arbeit: nehmen Sie Analytics, Hydration und schwere Berechnungen aus dem Interaktionspfad, etwa mit requestIdleCallback oder erst nach dem Paint der Interaktion.
- Liefern Sie weniger JavaScript aus: teilen Sie Code nach Route auf und entfernen Sie ungenutzte Drittanbieter-Skripte, die den Main-Thread blockieren.
- Halten Sie Event-Handler leicht: entprellen Sie teure Updates und vermeiden Sie Layout-Thrashing in Handlern, damit eine Interaktion schnell rendern kann.
- Verlagern Sie schwere Berechnungen in einen Web Worker, damit sie den Main-Thread während einer Interaktion nie blockieren.
So verbessern Sie CLS (Cumulative Layout Shift)
CLS misst unerwartete Layout-Bewegungen während des Ladens. Ein guter CLS liegt bei 0,1 oder weniger. Verschiebungen entstehen fast immer durch Inhalte, die ohne reservierten Platz laden. So beheben Sie es:
- Setzen Sie feste Breite und Höhe oder eine aspect-ratio auf Bilder, Videos und Embeds, damit der Browser ihren Platz reserviert, bevor sie laden.
- Reservieren Sie Platz für Anzeigen, Banner und Embeds mit einer min-height, damit spät ladende Inhalte die Seite nicht nach unten schieben.
- Laden Sie Schriften vor und nutzen Sie font-display optional oder eine eng passende Fallback-Schrift, um den Shift durch einen späten Web-Font-Wechsel zu vermeiden.
- Fügen Sie niemals Inhalte über bestehenden Inhalten ein, außer als direkte Reaktion auf eine Nutzerinteraktion.
- Animieren Sie mit transform und opacity, nicht mit Eigenschaften, die Layout auslösen, wie top, left, width oder height.
WordPress Core Web Vitals
WordPress-Seiten scheitern an Core Web Vitals meist aus denselben wenigen Gründen: schwere Themes, nicht optimierte Bilder, blockierendes Plugin-CSS und -JS und langsames Hosting. Die wirkungsvollsten Maßnahmen:
- Fügen Sie Page-Caching hinzu, über ein Caching-Plugin oder einen Cache auf Hosting-Ebene, damit HTML schnell ausgeliefert wird, plus ein CDN für Assets. Das allein behebt oft den LCP.
- Optimieren Sie Bilder mit einem modernen Bild-Plugin, das AVIF oder WebP liefert, korrekt skaliert und nur below the fold lazy-loadet.
- Reduzieren Sie Plugin-Ballast: jedes Plugin, das auf jeder Seite CSS oder JS einbindet, schadet INP und LCP. Prüfen Sie und entfernen Sie, was Sie nicht brauchen.
- Wählen Sie ein leichtgewichtiges Theme und vermeiden Sie Page-Builder, die große Mengen an CSS und JavaScript ausliefern.
- Wechseln Sie das Hosting, wenn der TTFB hoch ist. Günstiges Shared Hosting kann oft keinen guten LCP liefern, egal was Sie auf der Seite optimieren.
Beeinflussen Core Web Vitals das SEO?
Ja. Core Web Vitals sind Teil der Page-Experience-Signale von Google und können das Ranking beeinflussen, am deutlichsten als Tie-Breaker zwischen Seiten ähnlicher Relevanz und Qualität. Sie sind kein Allheilmittel, das Inhalt und Links aufwiegt, aber schlechte Werte können eine Seite ausbremsen, und gute Werte nehmen einen Nachteil weg.
Der größere Gewinn ist meist kommerziell. Schnellere, stabilere Seiten konvertieren besser und haben weniger Absprünge, daher zahlt sich die Verbesserung der Core Web Vitals oft im Umsatz aus, bevor sie sich im Ranking auszahlt. Google misst das Signal anhand echter Felddaten aus CrUX, daher bewegen reine Labor-Fixes, die echte Nutzer nie erreichen, nichts.
Verwandt: Core Web Vitals Checker · What are Core Web Vitals · Page Speed Monitoring