Was sind Core Web Vitals?
Core Web Vitals (CWV) sind eine Gruppe von Metriken, die Google entwickelt hat, um die tatsächliche Nutzererfahrung auf Webseiten zu messen. Sie wurden 2020 angekündigt und sind seit Mai 2021 offizieller Google-Ranking-Faktor. Im Gegensatz zu rein technischen Metriken wie TTFB oder Time to Interactive fokussieren sich Core Web Vitals auf das, was Nutzer wirklich wahrnehmen: Ladegeschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität.
Für Schweizer KMU sind CWV besonders relevant, weil der Schweizer Suchmarkt weniger kompetitiv ist als der US-Markt – hier können technische Vorteile den Unterschied zwischen Seite 1 und Seite 2 ausmachen. Nach unseren Analysen scheitern über 60 % der Schweizer KMU-Websites an mindestens einer Core-Web-Vitals-Metrik.
Die drei Core Web Vitals im Detail
Largest Contentful Paint (LCP) – Ladegeschwindigkeit
LCP misst den Zeitpunkt, zu dem das grösste sichtbare Element im Viewport vollständig gerendert wurde. Typischerweise ist das ein Hero-Bild, ein Video-Poster oder ein grosser Textblock oberhalb des Folds.
Bewertung: Gut: < 2,5s | Verbesserungsbedarf: 2,5s – 4s | Schlecht: > 4s
Häufige Ursachen für schlechten LCP: Langsame Server-Antwortzeiten (TTFB > 800ms), Render-blockierendes JavaScript und CSS, nicht optimierte oder zu grosse Bilder (das häufigste Problem), clientseitiges Rendering ohne Server-Side Rendering und fehlendes Preloading der LCP-Ressource.
Praxis-Tipp: Identifizieren Sie Ihr LCP-Element in Chrome DevTools (Performance Tab > Timings > LCP). Oft ist es ein Hero-Image. Optimieren Sie genau dieses Element: WebP-Format, korrekte Grösse, fetchpriority="high" und <link rel="preload">.
Interaction to Next Paint (INP) – Interaktivität
INP hat im März 2024 FID (First Input Delay) als Core Web Vital ersetzt. Während FID nur die erste Interaktion mass, erfasst INP die Latenz aller Interaktionen (Klicks, Taps, Tastatureingaben) und meldet den 75. Perzentil-Wert. Das ist deutlich anspruchsvoller.
Bewertung: Gut: < 200ms | Verbesserungsbedarf: 200ms – 500ms | Schlecht: > 500ms
Häufige Ursachen für schlechten INP: Lange JavaScript-Ausführung im Main Thread (Long Tasks > 50ms), Third-Party-Scripts (Analytics, Chat-Widgets, Social Plugins), grosse JavaScript-Bundles ohne Code-Splitting und synchrone DOM-Manipulationen bei Nutzerinteraktionen.
Praxis-Tipp: Nutzen Sie scheduler.yield() oder requestIdleCallback(), um lange Aufgaben in kleinere Chunks aufzuteilen. Laden Sie Third-Party-Scripts mit defer oder async. In unserer Erfahrung verbessert allein das asynchrone Laden von Google Tag Manager den INP-Wert um 100–200ms.
Cumulative Layout Shift (CLS) – Visuelle Stabilität
CLS misst unerwartete Layout-Verschiebungen, die während des gesamten Seitenlebenszyklus auftreten. Der Wert wird als Produkt aus Impact Fraction (wie viel des Viewports verschoben wird) und Distance Fraction (wie weit die Verschiebung geht) berechnet.
Bewertung: Gut: < 0,1 | Verbesserungsbedarf: 0,1 – 0,25 | Schlecht: > 0,25
Häufige Ursachen für schlechten CLS: Bilder und Videos ohne definierte width/height-Attribute, Ads, Embeds und iFrames ohne reservierten Platz, dynamisch injizierte Cookie-Banner oder Notification-Bars, Web Fonts mit FOIT/FOUT-Effekten (Text springt beim Laden der Schriftart) und nachladende Inhalte oberhalb des aktuellen Viewports.
Praxis-Tipp: Nutzen Sie die CSS-Property aspect-ratio für responsive Bilder und Embeds. Für Web Fonts: Verwenden Sie font-display: optional oder font-display: swap mit <link rel="preload"> für die wichtigste Schriftart.
Core Web Vitals messen und überwachen
Lab-Daten vs. Field-Daten
Es gibt zwei Arten von CWV-Daten: Lab-Daten (synthetische Tests unter kontrollierten Bedingungen) und Field-Daten (echte Nutzerdaten aus dem Chrome User Experience Report). Google verwendet für Rankings ausschliesslich Field-Daten. Lab-Daten sind nützlich für Debugging, aber nicht massgeblich für Rankings.
Google PageSpeed Insights
Das kostenlose Tool zeigt sowohl Lab- als auch Field-Daten an, gibt konkrete Verbesserungsvorschläge mit geschätztem Einsparpotenzial und ist der beste Startpunkt für die Analyse. Testen Sie sowohl die Mobile- als auch die Desktop-Version Ihrer Website.
Google Search Console
Der Core Web Vitals Bericht in der Search Console zeigt, wie viele URLs Ihrer Website gute, verbesserungswürdige oder schlechte CWV-Werte aufweisen. Der Bericht basiert auf echten Nutzerdaten (28-Tage-Rollup) und ist der Wert, den Google tatsächlich für Rankings verwendet. Priorisieren Sie URLs mit hohem Traffic zuerst.
Weitere Tools
Chrome DevTools: Performance Tab für detailliertes Debugging einzelner Interaktionen. Lighthouse: Automatisierte Audits mit actionable Empfehlungen. Web Vitals Extension: Chrome-Extension, die CWV in Echtzeit anzeigt während Sie browsen. CrUX Dashboard: Erstellen Sie ein Google Data Studio Dashboard mit historischen CWV-Daten Ihrer Website.
Optimierungsstrategien für jedes CWV
LCP optimieren – die 5 wirkungsvollsten Massnahmen
(1) Preloaden Sie die LCP-Ressource mit <link rel="preload">. (2) Verwenden Sie fetchpriority="high" auf dem LCP-Element. (3) Optimieren Sie Bilder: WebP-Format, korrekte Grösse, responsive srcset (mehr dazu in unserem Ladezeit-Artikel). (4) Reduzieren Sie die Server-Antwortzeit (TTFB) durch CDN und Server-Caching. (5) Eliminieren Sie Render-blockierendes CSS und JavaScript.
INP optimieren – JavaScript unter Kontrolle bringen
(1) Identifizieren Sie Long Tasks mit Chrome DevTools. (2) Teilen Sie lange JavaScript-Aufgaben in Chunks unter 50ms auf. (3) Laden Sie Third-Party-Scripts asynchron. (4) Implementieren Sie Debouncing und Throttling für Event-Handler. (5) Nutzen Sie Web Workers für rechenintensive Aufgaben abseits des Main Threads.
CLS optimieren – Layout-Verschiebungen eliminieren
(1) Definieren Sie immer width und height für alle Bilder und Videos. (2) Reservieren Sie Platz für Ads und dynamisch geladene Inhalte mit aspect-ratio oder min-height. (3) Preloaden Sie Web Fonts und nutzen Sie font-display: swap. (4) Platzieren Sie dynamische UI-Elemente (Banner, Cookie-Hinweise) am oberen Rand mit position: fixed statt im Dokumentenfluss. (5) Vermeiden Sie das Einfügen von Content oberhalb bestehender sichtbarer Inhalte.
CWV und der Schweizer Markt: Unsere Erfahrungswerte
Aus über 50 Website-Projekten für Schweizer KMU haben wir folgende Muster identifiziert: Die häufigsten CWV-Probleme in der Schweiz sind nicht optimierte WordPress-Themes mit zu vielen Plugins (LCP-Problem), Cookie-Banner, die nachgeladen werden und Layout-Shifts verursachen (CLS-Problem), und Google Tag Manager mit zu vielen Tags (INP-Problem).
Websites, die wir von einem CWV-Score unter 50 auf 90+ optimiert haben, zeigten durchschnittlich 15–25 % mehr organischen Traffic innerhalb von 3 Monaten. Die Bounce-Rate sank um 10–20 %, und die durchschnittliche Sitzungsdauer stieg um 15 %.
CWV-Optimierung: Tools und Workflow
Für eine systematische CWV-Optimierung empfehlen wir diesen Workflow: Zunächst die Chrome DevTools öffnen (F12 → Performance Tab) und eine Lighthouse-Analyse durchführen. Das identifiziert die drei grössten Performance-Bottlenecks. Dann die PageSpeed Insights API nutzen, um Feld-Daten (echte Nutzer) mit Lab-Daten (simuliert) zu vergleichen. Häufig stimmen Lab- und Feld-Werte nicht überein – das deutet auf Probleme hin, die nur bei echten Nutzern auftreten (z.B. langsame Mobilgeräte, instabile Verbindungen). Für den INP-Wert ist das Chrome Web Vitals Extension besonders hilfreich: Es zeigt in Echtzeit, welche Interaktionen lange dauern und welcher Event-Handler das Problem verursacht. Für CLS-Debugging empfehlen wir das Layout Shift Debugger Tool in Chrome DevTools, das genau zeigt, welches Element sich verschoben hat und warum.
CWV und Mobile-First: Warum Mobile-Werte entscheiden
Google verwendet seit dem Mobile-First-Indexing ausschliesslich die mobile Version Ihrer Website für Rankings. Das bedeutet: Ihre CWV-Werte auf Mobile sind die einzigen, die für SEO zählen. In der Schweiz nutzen über 60 % der Suchenden ein Smartphone – mit deutlich schwächerer Hardware als Desktop-Geräte. Ein häufiger Fehler: Websites werden auf leistungsstarken MacBooks entwickelt und getestet, wo alles schnell lädt. Auf einem mittelklassigen Android-Smartphone mit 4G-Verbindung sieht das Ergebnis oft völlig anders aus. Testen Sie Ihre Website immer auf realen Mittelklasse-Geräten oder nutzen Sie die CPU-Throttling-Funktion in Chrome DevTools (4x Slowdown), um realistische Bedingungen zu simulieren.
Core Web Vitals: Pflicht, nicht Kür
Core Web Vitals sind mehr als ein SEO-Rankingfaktor – sie sind der Massstab für professionelle Webentwicklung. Eine Webseite, die gute CWV-Werte hat, ist schnell, stabil und reagiert sofort auf Nutzerinteraktionen. Das verbessert nicht nur Rankings, sondern auch Conversion-Rates, Nutzerzufriedenheit und letztlich Ihren Umsatz. Für Schweizer KMU, die im digitalen Wettbewerb bestehen wollen, sind optimale Core Web Vitals die Grundlage für nachhaltigen Online-Erfolg.
