Core Web Vitals

Core Web Vitals sind Googles offizielle Messwerte für die Nutzererfahrung einer Webseite: Sie quantifizieren Ladegeschwindigkeit, Reaktionszeit und visuelle Stabilität – und sind seit 2021 direkte Rankingfaktoren.

Rubrik: Online-Marketing & Content · Unterrubrik: SEO · Niveau: Einsteiger Synonyme / Auch bekannt als: Web Vitals, Seitennutzungssignale, Page Experience Signals

Was sind Core Web Vitals?

Im Mai 2020 stellte Google das Konzept der Core Web Vitals vor – drei spezifische Metriken, die messen, wie schnell und angenehm sich eine Webseite für echte Nutzerinnen verhält. Im Juni 2021 wurden diese Metriken als Teil des Page Experience Updates zu offiziellen Rankingfaktoren.

Die Idee dahinter: Technik soll nicht nur für Crawler gut sein, sondern primär für Menschen. Seiten, die langsam laden, unerwartet springen oder langsam auf Klicks reagieren, frustrieren Nutzende – und das soll sich im Ranking widerspiegeln.

Die drei Core Web Vitals sind:

• LCP – Largest Contentful Paint: Wie schnell lädt der Hauptinhalt?
• INP – Interaction to Next Paint: Wie schnell reagiert die Seite auf Eingaben?
• CLS – Cumulative Layout Shift: Wie stabil ist das Layout beim Laden?

Erklärung

LCP – Largest Contentful Paint

Was es misst: Die Zeit, bis das größte sichtbare Element im sichtbaren Bereich (Viewport) vollständig geladen ist. Das kann ein Bild, ein Video-Thumbnail, ein großes Textblock oder eine Hintergrundgrafik sein.

Warum es wichtig ist: LCP spiegelt wider, wann eine Seite für Nutzende „nutzbar" wirkt. Wenn das Hauptinhalt-Element lange braucht, entsteht das Gefühl einer langsamen Seite – auch wenn andere Teile bereits geladen sind.

Zielwerte:

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

Häufige Ursachen für schlechte LCP-Werte:

• Zu große, nicht optimierte Bilder
• Langsame Server-Antwortzeiten
• Render-blockierende Ressourcen (JavaScript, CSS)
• Fehlendes Content Delivery Network (CDN)

Optimierungsmaßnahmen:

• Bilder in modernem Format (WebP, AVIF) bereitstellen
• Bilder-Dimensionen im HTML angeben (verhindert Layout-Verschiebungen)
• Das LCP-Element per <link rel="preload"> vorausladen
• Server-Antwortzeiten verbessern (schnelles Hosting wählen)
• CDN einsetzen, um Inhalte geografisch nah bei Nutzenden auszuliefern

INP – Interaction to Next Paint

Was es misst: Die Reaktionszeit der Seite auf Nutzereingaben – Klicks, Tippen, Scrollen. INP misst die Zeit vom Auslösen einer Interaktion bis zur nächsten visuellen Aktualisierung der Seite.

Hintergrund: INP ersetzte im März 2024 den bisherigen Messwert FID (First Input Delay), der nur die erste Interaktion auf einer Seite maß. INP ist umfassender und misst alle Interaktionen während des gesamten Seitenbesuchs.

Zielwerte:

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

Häufige Ursachen für schlechte INP-Werte:

• Zu viel JavaScript, das den Main Thread blockiert
• Schwere Third-Party-Skripte (Tracking, Werbeanzeigen, Chat-Widgets)
• Aufwendige DOM-Manipulationen

Optimierungsmaßnahmen:

• JavaScript-Menge reduzieren, Code aufteilen (Code Splitting)
• Third-Party-Skripte lazy laden oder einschränken
• Aufgaben, die den Main Thread blockieren, in Web Workers auslagern

CLS – Cumulative Layout Shift

Was es misst: Wie stark sich der sichtbare Inhalt einer Seite während des Ladevorgangs unerwartet verschiebt. Wenn zum Beispiel ein Bild nachladen und dabei Text nach unten drückt, oder eine Werbeanzeige plötzlich erscheint und den Lesefluss unterbricht.

Warum es wichtig ist: Layout-Verschiebungen sind für Nutzende frustrierend – besonders wenn man gerade auf einen Link klickt, der sich verschoben hat, und stattdessen auf etwas anderem landet.

Zielwerte:

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

Häufige Ursachen für hohe CLS-Werte:

• Bilder und Videos ohne festgelegte Dimensionen (width/height im HTML)
• Dynamisch eingefügte Inhalte oberhalb vorhandener Inhalte
• Web-Fonts, die zu spät laden und Layout-Verschiebungen verursachen

Optimierungsmaßnahmen:

• Immer width und height für Bilder und Videos im HTML angeben
• Für dynamische Inhalte (Anzeigen) Platzhalter mit fester Größe reservieren
• font-display: swap für Web-Fonts einsetzen

Messung der Core Web Vitals

Google PageSpeed Insights

pagespeed.web.dev – kostenloses Tool, das sowohl Lab-Daten (simulierter Test) als auch Field-Daten (echte Nutzerdaten aus dem Chrome User Experience Report, CrUX) anzeigt. Für das Google-Ranking sind ausschließlich Field-Daten relevant – Lab-Daten sind Orientierungswerte.

Google Search Console

Unter Berichte → Seitennutzungsfreundlichkeit zeigt die Search Console, wie viele Seiten der eigenen Website die Core Web Vitals-Schwellenwerte erfüllen oder unterschreiten. Hier werden Probleme gruppiert und priorisiert angezeigt.

Lighthouse (im Browser)

Das in Chrome-DevTools eingebaute Lighthouse-Tool führt einen schnellen Audit der Seite durch und bewertet Performance, Barrierefreiheit, SEO und Best Practices. Gibt konkrete Verbesserungsvorschläge.

WebPageTest

Kostenloses Tool unter webpagetest.org für detaillierte Ladezeit-Analysen aus verschiedenen Standorten und Geräten weltweit.

Beispiele

1. Bildoptimierung verbessert LCP drastisch: Eine Fotografin-Website hatte ein unkomprimiertes Hero-Bild (8 MB). Nach Konvertierung zu WebP (400 KB) und Lazy Loading sank der LCP von 7,2 auf 1,8 Sekunden – Ranking verbesserte sich.
2. CLS durch fehlende Bildabmessungen: Eine Nachrichtenwebsite zeigte beim Laden Artikel-Thumbnails ohne definierte Größen. Texte sprangen beim Laden mehrfach. Nach Hinzufügen von width und height zu allen Bildern sank der CLS auf 0,04.
3. INP-Problem durch Chat-Widget: Ein Online-Magazin hatte einen INP-Wert von 650 ms. Das Ursache war ein umfangreiches Live-Chat-Widget. Nach Umstellung auf Lazy Loading des Widgets sank der INP auf 180 ms.
4. CDN verbessert LCP für internationale Besucher: Eine deutschsprachige Medienplattform hatte gute LCP-Werte für deutsche Nutzerinnen, aber schlechte für Österreich und die Schweiz. Nach Einbindung eines CDN verbesserten sich die Werte standortübergreifend.
5. Schrift-FOUT behebt CLS: Ein Blog nutzte Google Fonts ohne font-display-Einstellung. Beim Laden sprang das Layout, wenn die Web-Schrift die System-Schrift ersetzte. Nach Ergänzung von font-display: optional verschwand das Problem.

In der Praxis

Empfohlener Optimierungsprozess:

1. Ist-Stand messen: PageSpeed Insights und Search Console aufrufen, Field-Daten dokumentieren
2. Prioritäten setzen: Welcher Wert ist am schlechtesten? Mit dem größten Problem beginnen
3. Techniker einbeziehen: Für Server-Konfiguration, JavaScript-Optimierung und CDN-Einrichtung oft Entwickler-Know-how nötig
4. Fortschritt messen: Nach Änderungen 4–6 Wochen warten, bis neue Field-Daten im CrUX aktualisiert sind
5. Regelmäßig wiederholen: Core Web Vitals-Werte nach neuen Plugin-Updates, Content-Ergänzungen oder Design-Änderungen neu prüfen

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie stark beeinflussen Core Web Vitals das Ranking tatsächlich? Google hat Core Web Vitals als Tiebreaker-Signal beschrieben: Bei ansonsten gleich gut bewerteten Seiten gewinnt die mit besseren Core Web Vitals. Für stark umkämpfte Keywords reichen gute Core Web Vitals allein nicht für Top-Rankings – Content und Backlinks bleiben dominierender. Für technisch ähnliche Seiten kann es jedoch entscheidend sein.

Muss ich Entwicklerkenntnisse haben, um Core Web Vitals zu verbessern? Für einfache Maßnahmen wie Bildoptimierung (WebP-Konvertierung, Dimensionen angeben) braucht man keine tiefen Programmierkenntnisse – das können auch Website-Betreiber selbst erledigen. Für JavaScript-Optimierung, Server-Konfiguration und CDN-Einrichtung empfiehlt sich die Zusammenarbeit mit Webentwicklern.

Verwandte Einträge

• Technisches SEO – Alle technischen Rankingfaktoren im Überblick
• Google-Ranking-Faktoren – Das vollständige Rankingfaktor-Spektrum
• SEO-Grundlagen – Einführung in Suchmaschinenoptimierung

Weiterführend

• Google Search Central: Core Web Vitals (Google, 2024)
• Google: The Science Behind Web Vitals (Google Chrome Developers Blog, 2023)
• Pollard, Barry: Web Performance in the Field (web.dev, 2024)
• Lighthouse Dokumentation: developer.chrome.com/docs/lighthouse (Google, 2024)