Core Web Vitals: Was sie bedeuten und wie du sie verbesserst

Core Web Vitals sind Googles Metriken für die Nutzererfahrung einer Website. Sie messen, wie schnell deine Seite lädt, wie schnell sie auf Interaktionen reagiert und wie stabil das Layout beim Laden bleibt.

Seit 2021 sind Core Web Vitals ein offizieller Ranking-Faktor. Das bedeutet: Schlechte Werte können dein Google-Ranking negativ beeinflussen – und umgekehrt.

In diesem Guide erfährst du, was die drei Core Web Vitals bedeuten, wie du sie misst und wie du sie Schritt für Schritt optimierst.

💡 Das Wichtigste vorab: Core Web Vitals sind kein Hexenwerk. Mit den richtigen Maßnahmen erreichst du gute Werte – auch ohne technisches Expertenwissen. Die meisten Optimierungen sind einmalig und wirken dauerhaft.

Was sind Core Web Vitals?

Core Web Vitals sind drei spezifische Metriken, die Google für die Bewertung der User Experience (UX) einer Website heranzieht:

LCP (Largest Contentful Paint): Wie schnell wird der Hauptinhalt sichtbar?
INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Nutzerinteraktionen?
CLS (Cumulative Layout Shift): Wie stabil ist das Layout beim Laden?

Diese Werte werden von echten Chrome-Nutzern gemessen und in der Google Search Console als „Field Data“ angezeigt.

Warum sind Core Web Vitals wichtig?

Google hat Core Web Vitals 2021 als Ranking-Faktor eingeführt. Websites mit guten Werten werden bei sonst gleichen Faktoren bevorzugt. Aber noch wichtiger: Langsame, ruckelige Websites verlieren Besucher.

Laut Google-Studien:

53% der mobilen Nutzer verlassen eine Seite, die länger als 3 Sekunden lädt – ein Grund mehr für Mobile First Design
Gute Core Web Vitals korrelieren mit niedrigeren Absprungraten
E-Commerce-Seiten mit besseren Werten haben höhere Conversion-Rates

Die drei Core Web Vitals im Detail

LCP – Largest Contentful Paint

Was es misst: Die Zeit, bis das größte sichtbare Element im Viewport (meist ein Bild oder ein Textblock) vollständig geladen ist.

Zielwert: Unter 2,5 Sekunden

🟢 Gut: ≤ 2,5s
🟡 Verbesserungswürdig: 2,5s – 4s
🔴 Schlecht: > 4s

Typische Ursachen für schlechten LCP:

Große, nicht optimierte Bilder
Langsame Server-Antwortzeit
Render-blockierendes JavaScript und CSS
Langsames Webhosting

INP – Interaction to Next Paint

Was es misst: Die Zeit zwischen einer Nutzerinteraktion (Klick, Tap, Tastendruck) und dem visuellen Feedback der Seite.

⚠️ Wichtig: INP hat im März 2024 den alten FID-Wert (First Input Delay) ersetzt. Falls du ältere Guides liest, die noch FID erwähnen – die Informationen sind veraltet.

Zielwert: Unter 200 Millisekunden

🟢 Gut: ≤ 200ms
🟡 Verbesserungswürdig: 200ms – 500ms
🔴 Schlecht: > 500ms

Typische Ursachen für schlechten INP:

Schweres JavaScript, das den Main Thread blockiert
Zu viele Event Listener
Third-Party-Scripts (Analytics, Chat-Widgets, Ads)

CLS – Cumulative Layout Shift

Was es misst: Wie stark sich Layout-Elemente während des Ladens verschieben. Jeder hat das schon erlebt: Du willst auf einen Button klicken, und plötzlich springt er weg, weil ein Bild nachgeladen wurde.

Zielwert: Unter 0,1

🟢 Gut: ≤ 0,1
🟡 Verbesserungswürdig: 0,1 – 0,25
🔴 Schlecht: > 0,25

Typische Ursachen für schlechten CLS:

Bilder ohne angegebene Dimensionen (width/height)
Dynamisch geladene Werbebanner
Web Fonts, die nachträglich laden und Text verschieben
Eingebettete Inhalte (iframes) ohne reservierten Platz

Core Web Vitals messen

Es gibt mehrere Tools, um deine Core Web Vitals zu prüfen. Der wichtigste Unterschied: Lab Data vs. Field Data.

Lab Data: Simulierte Tests in einer kontrollierten Umgebung
Field Data: Echte Messwerte von Chrome-Nutzern auf deiner Website

Für Google zählen die Field Data. Allerdings brauchst du genug Traffic, um diese Daten zu sammeln.

PageSpeed Insights

PageSpeed Insights ist das offizielle Google-Tool und der beste Startpunkt:

Zeigt Field Data (falls verfügbar) und Lab Data
Gibt konkrete Optimierungsvorschläge
Separate Auswertung für Mobile und Desktop

Google Search Console

In der Google Search Console findest du unter „Core Web Vitals“ einen Überblick über alle URLs deiner Website:

URLs werden in „Gut“, „Verbesserungswürdig“ und „Schlecht“ gruppiert
Du siehst Trends über Zeit
Probleme werden nach Typ kategorisiert

Chrome DevTools

Für detaillierte Analysen einzelner Seiten:

Chrome öffnen → F12 (DevTools)
Tab „Lighthouse“ für einen vollständigen Audit
Tab „Performance“ für detaillierte Timeline-Analysen

Web Vitals Chrome Extension

Die Web Vitals Extension zeigt die Core Web Vitals in Echtzeit während du surfst – praktisch für schnelle Checks.

Core Web Vitals optimieren: Schritt für Schritt

LCP verbessern

Der LCP ist meist am einfachsten zu optimieren, weil die Ursachen klar sind: Große Dateien und langsame Server.

1. Bilder optimieren

Bilder sind der häufigste Grund für schlechten LCP:

WebP oder AVIF verwenden: Moderne Formate sind 30-50% kleiner als JPEG/PNG
Bilder komprimieren: Tools wie Squoosh oder TinyPNG
Responsive Images: Verschiedene Größen für verschiedene Bildschirme
Lazy Loading: Bilder außerhalb des Viewports erst bei Bedarf laden

👉 Tipp: Das LCP-Element (meist das Hero-Bild) sollte NICHT lazy-loaded werden. Es muss sofort laden.

2. Server-Antwortzeit verbessern

Die TTFB (Time to First Byte) beeinflusst den LCP direkt:

Gutes Hosting wählen: Shared Hosting ist oft zu langsam
PHP-Version aktuell halten: PHP 8.x ist deutlich schneller als PHP 7.x
Caching einsetzen: Seiten-Caching reduziert Server-Arbeit massiv
CDN nutzen: Content Delivery Networks liefern Inhalte vom nächsten Server

3. Render-Blocking Resources eliminieren

CSS und JavaScript im <head> blockieren das Rendering:

Critical CSS inline: Das CSS für den sichtbaren Bereich direkt im HTML
JavaScript defer/async: Scripts erst nach dem Rendering ausführen
Unused CSS entfernen: Viele Themes laden mehr CSS als nötig

INP verbessern

INP-Optimierung ist technisch anspruchsvoller, aber mit den richtigen Maßnahmen machbar.

1. JavaScript optimieren

Code-Splitting: Nur das JavaScript laden, das wirklich gebraucht wird
Long Tasks aufbrechen: Tasks > 50ms blockieren den Main Thread
Web Workers nutzen: Schwere Berechnungen in separate Threads auslagern

2. Third-Party-Scripts reduzieren

Jedes externe Script (Analytics, Chat-Widgets, Social Embeds) kostet Performance:

Nur das Nötige laden: Brauchst du wirklich alle Tracking-Pixel?
Scripts verzögert laden: Nach dem initialen Rendering
Leichtere Alternativen: Google Analytics 4 statt Universal Analytics

3. Event Handler optimieren

Debouncing/Throttling: Nicht jedes Scroll- oder Resize-Event verarbeiten
Passive Event Listeners: Für Touch- und Scroll-Events

CLS verbessern

CLS-Probleme sind oft die am einfachsten zu behebenden – wenn man weiß, wo sie entstehen.

1. Bild-Dimensionen immer angeben

Setze width und height direkt im img-Tag oder nutze aspect-ratio in CSS. So reserviert der Browser den Platz, bevor das Bild geladen ist.

2. Platz für dynamische Inhalte reservieren

Werbebanner: Container mit fester Höhe definieren
Einbettungen: iframes mit width/height
Skeleton Screens: Platzhalter während des Ladens

3. Web Fonts optimieren

Fonts können Layout Shifts verursachen, wenn sie den Text unterschiedlich rendern:

font-display: swap: Zeigt Fallback-Font bis der Webfont geladen ist
Fonts preloaden: Mit <link rel=“preload“ as=“font“>
Weniger Font-Varianten: Jede Schriftstärke ist eine extra Datei

4. Animationen ohne Layout Shifts

transform statt top/left: CSS transforms verursachen keine Layout Shifts
Elemente nicht dynamisch einfügen: Oder Platz vorher reservieren

Core Web Vitals für WordPress optimieren

WordPress-Websites haben spezifische Herausforderungen – aber auch gute Lösungen. Wer bei der Webentwicklung von Anfang an auf Performance achtet, spart sich später viel Arbeit.

Empfohlene Plugins

Caching & Performance:

WP Rocket (Premium, aber das beste Allround-Plugin)
LiteSpeed Cache (kostenlos, wenn dein Host LiteSpeed nutzt)
W3 Total Cache (kostenlos, mehr Konfiguration nötig)

Bildoptimierung:

Imagify (automatische Komprimierung + WebP)
ShortPixel (ähnlich, gute kostenlose Stufe)
EWWW Image Optimizer (lokale Komprimierung möglich)

Asset-Optimierung:

Perfmatters (Premium, Script-Manager + viele Tweaks)
Asset CleanUp (kostenlos, deaktiviert unnötige Scripts pro Seite)

⚠️ Weniger ist mehr: Installiere nicht fünf Caching-Plugins gleichzeitig. Ein gutes Plugin (z.B. WP Rocket) deckt meist alles ab.

Theme-Auswahl

Nicht jedes WordPress-Theme ist für Performance optimiert:

Vermeide Page Builder-Bloat: Elementor, Divi & Co. laden viel JavaScript
Block-Themes nutzen: Der WordPress Block Editor ist leichter als die meisten Page Builder
Theme-Bewertungen prüfen: Suche nach Performance-Reviews vor dem Kauf

Hosting-Einfluss

Das Hosting ist der Flaschenhals, den kein Plugin kompensieren kann:

Managed WordPress Hosting: Anbieter wie Raidboxes, Kinsta oder WP Engine sind auf WordPress optimiert
PHP 8.x: Deutlich schneller als ältere Versionen
Server-Standort: Ein Server in Deutschland für deutsche Besucher
SSD-Speicher: Standard, aber bei Billig-Hostern nicht immer gegeben

Mehr zum Thema Hosting und Performance in unserem Artikel über WordPress Wartung und Kosten.

Häufige Fehler vermeiden

Fehler 1: Nur auf Lab Data schauen

PageSpeed Insights zeigt oft 90+ im Lab, aber die Field Data sind rot. Was zählt, sind die echten Nutzerdaten.

Fehler 2: Zu viele Plugins installieren

Jedes Plugin fügt Code hinzu. Auch „Performance-Plugins“ können die Performance verschlechtern, wenn zu viele gleichzeitig laufen.

Fehler 3: Caching bei dynamischen Inhalten

E-Commerce-Seiten, Warenkorb, Login-Bereiche – hier kann Caching Probleme verursachen. Die Konfiguration muss passen.

Fehler 4: Mobile vergessen

Die meisten Besucher kommen mobil. Core Web Vitals werden primär auf Mobilgeräten gemessen. Teste immer Mobile First.

Fazit

Core Web Vitals sind kein optionales Nice-to-have, sondern ein wichtiger Faktor für Rankings und User Experience. Die gute Nachricht: Mit den richtigen Maßnahmen sind gute Werte erreichbar.

Die wichtigsten Hebel:

Bilder optimieren – Größter Impact auf LCP
Gutes Hosting – Die Basis, die kein Plugin ersetzen kann
Caching aktivieren – Reduziert Server-Last und Ladezeit
Unnötige Scripts entfernen – Weniger JavaScript = schnellere Reaktion
Dimensionen für Bilder angeben – Verhindert Layout Shifts

Wenn du WordPress nutzt, ist ein Plugin wie WP Rocket kombiniert mit Imagify ein guter Start. Für komplexere Optimierungen oder wenn du unsicher bist, hilft eine professionelle Analyse durch eine erfahrene WordPress-Agentur.

🚀 Du brauchst Unterstützung bei der Performance-Optimierung? Wir analysieren deine Website und setzen die nötigen Maßnahmen um. Mehr zu unseren WordPress-Wartungspaketen.

FAQ: Core Web Vitals

Was sind Core Web Vitals?

Core Web Vitals sind drei von Google definierte Metriken für die Nutzererfahrung: LCP (Ladezeit des Hauptinhalts), INP (Reaktionszeit auf Interaktionen) und CLS (Layoutstabilität). Sie werden seit 2021 als Ranking-Faktor verwendet.

Wie messe ich meine Core Web Vitals?

Am einfachsten mit PageSpeed Insights (pagespeed.web.dev). Für einen Überblick über alle Seiten nutze den Core Web Vitals Report in der Google Search Console. Beide Tools sind kostenlos.

Was ist ein guter LCP-Wert?

Ein LCP unter 2,5 Sekunden gilt als gut. Zwischen 2,5 und 4 Sekunden ist verbesserungswürdig, über 4 Sekunden ist schlecht. Der LCP misst, wann das größte sichtbare Element (meist ein Bild) vollständig geladen ist.

Was ist der Unterschied zwischen INP und FID?

INP (Interaction to Next Paint) hat im März 2024 den älteren FID (First Input Delay) als Core Web Vital ersetzt. INP misst die Reaktionszeit über alle Interaktionen während des Seitenbesuchs, während FID nur die erste Interaktion maß.

Warum sind meine Core Web Vitals auf Mobile schlechter?

Mobile Geräte haben weniger Rechenleistung und oft langsamere Netzwerkverbindungen. Außerdem sind die Grenzwerte für Mobile strenger. Optimiere immer zuerst für Mobile, dann profitiert auch Desktop.

Kann ich Core Web Vitals mit Plugins verbessern?

Ja, Caching-Plugins (WP Rocket, LiteSpeed Cache) und Bildoptimierungs-Plugins (Imagify, ShortPixel) können die Werte deutlich verbessern. Aber: Gutes Hosting und ein schlankes Theme sind die Basis, die kein Plugin ersetzen kann.