Core Web Vitals verbessern

Warum Core Web Vitals ein Rankingfaktor sind

Google bewertet Websites nicht nur nach Inhalt und Backlinks. Seit der Einführung des Page Experience Updates fließt auch die messbare Nutzererfahrung in die Rankings ein. Die Core Web Vitals sind dabei Googles zentrale Kennzahlen: Drei Metriken, die erfassen, wie schnell, reaktionsfreudig und visuell stabil Ihre Website ist.

Schlechte Werte bedeuten nicht automatisch einen Ranking-Verlust. Aber bei zwei inhaltlich gleichwertigen Seiten bevorzugt Google die mit besserer Nutzererfahrung. Und das ist nur der SEO-Effekt: Langsame, ruckelnde Seiten verlieren auch ohne Google-Faktor Besucher und Conversions.

Die drei Metriken im Detail

Largest Contentful Paint (LCP)

LCP misst, wie lange es dauert, bis das größte sichtbare Element im Viewport vollständig geladen ist. Das kann ein Hero-Bild, ein großer Textblock oder ein Video-Thumbnail sein.

• Gut: unter 2,5 Sekunden
• Verbesserungswürdig: 2,5 bis 4,0 Sekunden
• Schlecht: über 4,0 Sekunden

LCP ist die Metrik, die Nutzer am direktesten wahrnehmen. Eine Seite, die erst nach vier Sekunden ihren Hauptinhalt zeigt, fühlt sich langsam an – unabhängig davon, was technisch im Hintergrund passiert.

Interaction to Next Paint (INP)

INP misst die Reaktionszeit Ihrer Seite auf Nutzerinteraktionen – Klicks, Taps und Tastatureingaben. Die Metrik erfasst die gesamte Verarbeitungszeit von der Eingabe bis zur nächsten visuellen Aktualisierung. INP hat im März 2024 die alte Metrik FID (First Input Delay) vollständig abgelöst.

• Gut: unter 200 Millisekunden
• Verbesserungswürdig: 200 bis 500 Millisekunden
• Schlecht: über 500 Millisekunden

Der Unterschied zu FID: Während FID nur die erste Interaktion gemessen hat, berücksichtigt INP alle Interaktionen während des gesamten Seitenbesuchs. Die schlechteste Interaktion bestimmt den Wert.

Cumulative Layout Shift (CLS)

CLS misst unerwartete Layoutverschiebungen während des Ladens und der Nutzung einer Seite. Wenn sich Inhalte plötzlich verschieben, während Sie gerade lesen oder einen Button anklicken möchten, ist das ein CLS-Problem.

• Gut: unter 0,1
• Verbesserungswürdig: 0,1 bis 0,25
• Schlecht: über 0,25

CLS hat keinen Einheitswert – der Score ergibt sich aus der Kombination von Verschiebungsfläche und Verschiebungsdistanz. Je größer das verschobene Element und je weiter es sich bewegt, desto höher der Wert.

So messen Sie Ihre Core Web Vitals

PageSpeed Insights

Das wichtigste Einzeltool. Geben Sie Ihre URL ein und erhalten Sie sowohl Felddaten (echte Nutzermessungen) als auch Labordaten (simulierte Tests). Die Felddaten stammen aus dem Chrome User Experience Report und zeigen, wie echte Besucher Ihre Seite erleben.

Google Search Console

Der Bericht „Core Web Vitals” zeigt den Status aller URLs Ihrer Website, aufgeteilt nach Mobil und Desktop. Sie sehen sofort, wie viele URLs gut, verbesserungswürdig oder schlecht abschneiden. Besonders wertvoll: Die Search Console gruppiert URLs mit ähnlichen Problemen, sodass Sie systematisch vorgehen können.

Chrome DevTools und Lighthouse

Für die technische Analyse direkt im Browser. Lighthouse generiert einen Performance-Report mit konkreten Optimierungsvorschlägen. Die Performance-Registerkarte in DevTools zeigt im Detail, welche Ressourcen das Rendering blockieren und wo JavaScript den Hauptthread belastet.

Felddaten vs. Labordaten

Felddaten (Field Data) stammen von echten Nutzern und spiegeln die tatsächliche Erfahrung wider. Google verwendet ausschließlich Felddaten für das Ranking. Die Werte variieren je nach Gerät, Netzwerk und Standort der Nutzer.

Labordaten (Lab Data) werden in einer kontrollierten Umgebung gemessen – simulierte Netzwerkbedingungen, definiertes Geräteprofil. Labordaten sind reproduzierbar und eignen sich hervorragend für die Fehlersuche, sagen aber nichts über die reale Nutzererfahrung aus.

Optimieren Sie anhand der Labordaten, validieren Sie die Ergebnisse über die Felddaten.

LCP verbessern

Hero-Bild optimieren

Das Hero-Bild ist oft das größte Element im Viewport und damit der häufigste LCP-Auslöser. Komprimieren Sie das Bild (WebP oder AVIF statt JPEG/PNG), verwenden Sie responsive Bilder mit srcset und laden Sie das Hero-Bild mit hoher Priorität.

Kritische Ressourcen vorladen

Verwenden Sie <link rel="preload"> für Ressourcen, die für den LCP entscheidend sind: das Hero-Bild, die Hauptschriftart, kritisches CSS. So beginnt der Browser den Download sofort, statt auf die Entdeckung im HTML zu warten.

CDN einsetzen

Ein Content Delivery Network verkürzt die physische Distanz zwischen Server und Nutzer. Statische Ressourcen – Bilder, CSS, JavaScript – werden von einem Server in der Nähe des Nutzers ausgeliefert. Das reduziert die Latenz und verbessert den LCP direkt.

TTFB reduzieren

Die Time to First Byte ist die Zeit vom Absenden der Anfrage bis zum ersten empfangenen Byte. Ein hoher TTFB verzögert alles Weitere. Ursachen: langsame Datenbankabfragen, fehlender Server-Cache, überlasteter Shared Hosting, kein HTTP/2 oder HTTP/3.

Critical CSS inlinen

Betten Sie das CSS für den sichtbaren Bereich (Above the Fold) direkt im <style>-Tag des HTML ein. So muss der Browser nicht auf den Download einer externen CSS-Datei warten, bevor er den Inhalt rendern kann.

INP verbessern

JavaScript-Ausführung reduzieren

Große JavaScript-Bundles blockieren den Hauptthread und verzögern die Reaktion auf Nutzerinteraktionen. Identifizieren Sie die größten Skripte mit dem Coverage-Tab in Chrome DevTools und entfernen Sie ungenutzten Code.

Task Splitting

Lange JavaScript-Aufgaben (Long Tasks > 50ms) blockieren den Hauptthread. Teilen Sie sie in kleinere Abschnitte auf, die dem Browser erlauben, zwischendurch auf Nutzereingaben zu reagieren. Verwenden Sie requestIdleCallback() oder setTimeout() für nicht-kritische Aufgaben.

Hauptthread entlasten

Vermeiden Sie synchrone Layout-Berechnungen (Forced Reflows), komplexe DOM-Manipulationen und tief verschachtelte Event-Handler. Verwenden Sie Web Worker für rechenintensive Aufgaben, die keine DOM-Interaktion benötigen.

Skripte verzögert laden

Laden Sie nicht-kritisches JavaScript mit defer oder async. Third-Party-Skripte wie Analytics, Chat-Widgets oder Social-Media-Einbindungen sollten erst nach dem initialen Seitenaufbau geladen werden. Erwägen Sie Lazy Loading für Skripte, die erst bei Nutzerinteraktion benötigt werden.

CLS verbessern

Feste Abmessungen für Medien

Geben Sie für alle Bilder und Videos explizite width- und height-Attribute an. Der Browser reserviert den Platz im Layout, bevor das Medium geladen ist – keine Verschiebung mehr.

<img src="bild.webp" width="800" height="450" alt="Beschreibung" />

font-display: swap mit Fallback

Webfonts verursachen häufig CLS, wenn sie nachgeladen werden und der Text plötzlich seine Größe oder Position ändert. Verwenden Sie font-display: swap in Kombination mit einer Fallback-Schrift ähnlicher Metrik. Tools wie „fontpie” oder die CSS-Eigenschaft size-adjust helfen, den Größenunterschied zwischen Fallback und Webfont zu minimieren.

Dynamischen Content vermeiden

Fügen Sie keine Inhalte oberhalb des sichtbaren Bereichs ein, nachdem die Seite gerendert wurde. Cookie-Banner, Newsletter-Popups oder nachladende Werbe-Banner sind häufige CLS-Verursacher. Reservieren Sie feste Platzhalter für dynamische Elemente oder laden Sie sie außerhalb des sichtbaren Bereichs.

Werbeplätze dimensionieren

Wenn Ihre Website Werbung einblendet, definieren Sie feste Größen für die Ad-Slots. Ohne feste Dimensionen verschiebt das Einblenden einer Anzeige den gesamten darunterliegenden Inhalt.

Übergreifende Optimierungen

Third-Party-Skripte auditieren

Tracking-Pixel, Chat-Widgets, A/B-Testing-Tools, Social-Media-Einbindungen – jedes dieser Skripte belastet alle drei Metriken. Erstellen Sie eine Liste aller Drittanbieter-Skripte und bewerten Sie: Wird dieses Skript benötigt? Kann es verzögert geladen werden?

Performance-Budgets definieren

Setzen Sie feste Grenzen für Seitengröße, Anzahl der Requests und JavaScript-Größe. Ein Performance-Budget verhindert, dass Ihre Werte nach der Optimierung schleichend wieder schlechter werden.

WordPress-spezifische Tipps

WordPress-Websites haben häufig CWV-Probleme durch überladene Themes und zu viele Plugins. Gezielte Maßnahmen:

• Caching-Plugin einsetzen (WP Rocket, W3 Total Cache oder LiteSpeed Cache) für reduzierten TTFB
• Bildoptimierung automatisieren (ShortPixel, Imagify oder EWWW) für WebP-Konvertierung und Kompression
• Unused CSS entfernen mit der CSS-Bereinigung in WP Rocket oder PurifyCSS
• Plugin-Audit durchführen: Jedes Plugin lädt CSS und JavaScript. Deaktivieren Sie alles, was Sie nicht aktiv nutzen.
• Theme wechseln: Überladene Multipurpose-Themes (Avada, Divi) laden oft 500 KB+ an Assets. Leichtgewichtige Themes wie GeneratePress liefern bessere Ausgangswerte.
• PHP-Version aktualisieren: PHP 8.x ist deutlich schneller als PHP 7.x und kann den TTFB um 20–30 Prozent verbessern.

Checkliste: Core Web Vitals optimieren

• Aktuelle Werte in PageSpeed Insights und Search Console prüfen
• Felddaten und Labordaten getrennt bewerten
• Hero-Bild komprimieren und als WebP/AVIF bereitstellen
• Kritische Ressourcen mit preload vorladen
• Critical CSS inlinen für Above-the-Fold-Bereich
• CDN für statische Ressourcen einsetzen
• TTFB unter 800ms bringen (Server-Cache, HTTP/2)
• JavaScript-Bundles analysieren und ungenutzten Code entfernen
• Long Tasks identifizieren und aufteilen (Task Splitting)
• Third-Party-Skripte auditieren und verzögert laden
• Feste Abmessungen für alle Bilder und Videos setzen
• font-display: swap mit passender Fallback-Schrift verwenden
• Keine dynamischen Inhalte oberhalb des Folds einfügen
• Werbeplätze mit festen Dimensionen versehen
• Performance-Budget definieren und überwachen
• Monatlich Felddaten in Search Console kontrollieren

Wann professionelle Hilfe sinnvoll ist

Grundlegende Optimierungen – Bildkompression, Caching, Plugin-Audit – können Sie selbst durchführen. Professionelle Unterstützung lohnt sich in diesen Fällen:

• Werte bleiben trotz Optimierungen im roten Bereich: Oft steckt das Problem tief in der Theme-Architektur, in der Serverkonfiguration oder in einem schlecht programmierten Plugin.
• INP-Probleme durch komplexe JavaScript-Logik: Task Splitting und Main-Thread-Optimierung erfordern Entwickler-Know-how.
• CLS durch dynamische Werbeeinbindungen: Die korrekte Dimensionierung von Ad-Slots erfordert Zusammenarbeit mit dem Werbenetzwerk und technische Anpassungen.
• Nach einem Relaunch oder Theme-Wechsel: Neue Themes und CMS-Versionen verändern die Performance-Charakteristik Ihrer Website grundlegend.
• Wenn Sie keine Felddaten haben: Bei Websites mit wenig Traffic liefert CrUX keine Daten. Die Optimierung muss dann rein über Labordaten und technische Analyse erfolgen.

In meiner Arbeit als SEO-Freelancer analysiere ich regelmäßig Core Web Vitals und setze gezielte Optimierungen um – immer mit Fokus auf die Maßnahmen mit dem größten Hebel.

Ihre Core Web Vitals brauchen Verbesserung? Sprechen Sie mich an — ich optimiere Ihre Website für bessere Nutzererfahrung und Rankings.