Core Web Vitals: Wie Google die Nutzererfahrung deiner Website misst

Google Core Web Vitals sind ein paar Kennzahlen, die die tatsächliche Nutzererfahrung in Bezug auf Ladegeschwindigkeit, Interaktivität und visuelle Stabilität einer Webseite messen. Diese Kennzahlen beeinflussen direkt die Rankings in der Google-Suche und sind ein Maßstab dafür, wie Besucher die Leistung deiner Website wahrnehmen.

In diesem Artikel erklären wir dir, was Core Web Vitals sind, wie sie deine Suchrankings beeinflussen und was du tun kannst, um sie zu verbessern.

Was sind Core Web Vitals?

Core Web Vitals sind drei bestimmte Kennzahlen, die Google nutzt, um die allgemeine Nutzererfahrung einer Webseite zu checken. Sie sind Teil der Page Experience Signals von Google, zu denen auch die Mobilfreundlichkeit, sicheres Surfen, HTTPS-Sicherheit und Richtlinien für aufdringliche Interstitials gehören.

Page Experience Signals zeigen, wie Leute die Interaktionsqualität mit einer Webseite sehen. Gute Core Web Vitals-Werte helfen dabei, in den Google-Suchergebnissen besser gefunden zu werden, während schlechte Werte deine Website daran hindern können, ihr Ranking-Potenzial voll auszuschöpfen.

Die drei Core Web Vitals-Kennzahlen sind Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS).

Größte inhaltsreiche Malfläche (LCP)

LCP misst, wie schnell eine Seite geladen wird. Genauer gesagt, wird gemessen, wie lange es dauert, bis das größte sichtbare Inhaltselement im Ansichtsfenster angezeigt wird, nachdem jemand die URL aufgerufen hat.

Das größte Element ist normalerweise ein Hero-Bild, ein Video-Miniaturbild oder ein großes Textelement auf Blockebene. Dieses Element ist wichtig, weil es den Besuchern zeigt, dass die Seite tatsächlich geladen wird und Inhalte liefert.

Zielschwelle: LCP sollte innerhalb von 2,5 Sekunden nach dem Start des Seitenladens passieren.

Interaktion bis zur nächsten Malung (INP)

Im März 2024 hat INP die First Input Delay (FID) als offizielle Messgröße für die Reaktionsfähigkeit abgelöst. Während FID nur die Verzögerung gemessen hat, bevor der Browser die erste Benutzerinteraktion verarbeiten konnte, gibt INP ein besseres Bild von der Reaktionsfähigkeit, indem es alle Interaktionen während der gesamten Sitzung eines Benutzers misst.

INP verfolgt drei Teile jeder Interaktion:

• Eingabeverzögerung: Die Zeit zwischen der Interaktion eines Benutzers und dem Start der Ausführung von Ereignisbehandlungsroutinen.
• Verarbeitungszeit: Wie lange dauert es, bis der Event-Handler-Code ausgeführt wird?
• Verzögerung bei der Darstellung: Die Zeit zwischen dem Abschluss der Verarbeitung durch die Handler und der Anzeige der visuellen Aktualisierung im Browser.

Der endgültige INP-Wert zeigt die längste Interaktion an, die während eines Seitenbesuchs beobachtet wurde, und gibt dir einen Einblick in die schlechteste Reaktionsfähigkeit, die deine Besucher erleben können.

Zielschwelle: Seiten sollten einen INP von maximal 200 Millisekunden haben. Werte zwischen 200 und 500 ms müssen verbessert werden, und alles über 500 ms ist echt schlecht.

Kumulative Layoutverschiebung (CLS)

CLS checkt, wie stabil eine Seite aussieht, indem es nach unerwarteten Layout-Änderungen während der gesamten Lebensdauer der Seite Ausschau hält.

Ein CLS-Wert kann zwischen null und einer beliebigen positiven Zahl liegen. Null heißt, dass keine unerwarteten Seitenverschiebungen passiert sind, während höhere Zahlen auf mehr visuelle Instabilität hindeuten. Layoutverschiebungen nerven Nutzer, wenn sie aus Versehen auf das falsche Element klicken, weil sich der Inhalt im letzten Moment verschoben hat.

Zielschwelle: Seiten sollten einen CLS-Wert von 0,1 oder weniger haben.

Tools zur Messung der Google Core Web Vitals

Deine aktuellen Ergebnisse zu kennen, ist der erste Schritt zur Verbesserung. Google hat ein paar kostenlose Tools, mit denen du die Leistung von Core Web Vitals messen kannst.

PageSpeed Insights

PageSpeed Insights checkt den Inhalt jeder Webseite und macht einen detaillierten Bericht mit Verbesserungsvorschlägen. Das Tool zeigt sowohl Daten von echten Chrome-Nutzern als auch Labordaten von simulierten Seitenaufrufen an.

Gib einfach eine beliebige URL ein, um deine LCP-, INP- und CLS-Werte zusammen mit praktischen Empfehlungen zu sehen. Der einzige Nachteil ist, dass jede URL manuell überprüft werden muss.

Google Search Console Bericht zu Core Web Vitals

Der Bericht „Core Web Vitals“ in der Google Search Console zeigt, wie deine Seiten laufen, basierend auf echten Nutzungsdaten von Chrome-Nutzern.

Dieser Bericht sortiert die URL-Performance nach Status (Gut, Verbesserungswürdig, Schlecht), Metriktyp und URL-Gruppen mit ähnlichen Webseiten. Nur indizierte URLs werden im Bericht angezeigt, was ihn super nützlich macht, um die Performance-Muster der ganzen Website zu verstehen.

Chrome User Experience Bericht

Der Chrome User Experience Report (CrUX) liefert echte Nutzererfahrungsdaten von Chrome-Nutzern, die zugestimmt haben, anonymisierte Browsing-Daten zu teilen. Dieser Datensatz ist die Grundlage für die in PageSpeed Insights angezeigten Felddaten und dient als offizielle Datenquelle von Google für die Bewertung der Core Web Vitals.

Du kannst über BigQuery auf CrUX-Daten zugreifen, um sie genauer zu analysieren, oder sie indirekt über PageSpeed Insights und die Search Console nutzen.

Wie du die Core Web Vitals verbesserst

Wenn deine Werte unter die empfohlenen Schwellenwerte fallen, kannst du sie mit gezielten Optimierungen wieder in den grünen Bereich bringen.

Tipps zur Verbesserung der Beladung (LCP)

Häufige Gründe für schlechte LCP-Werte sind langsame Server-Reaktionszeiten, JavaScript und CSS, die das Rendern blockieren, langsame Ladezeiten von Ressourcen und Engpässe beim clientseitigen Rendern.

Optimierungsstrategien:

• Entferne unnötige Skripte von Drittanbietern, die das Laden der Seite verlangsamen.
• Wechsel zu einem schnelleren Webhosting mit besseren Server-Reaktionszeiten
• Lazy Loading einrichten, damit Bilder erst geladen werden, wenn die Nutzer zu ihnen scrollen.
• Verwende moderne Bildformate wie WebP oder AVIF mit der richtigen Komprimierung.
• Lade wichtige Ressourcen, die über der Falz erscheinen, vorab.
• Nutze ein Content Delivery Network (CDN), um Assets von Orten aus bereitzustellen, die näher an deinen Besuchern liegen.

Hol dir ein schnelleres Webhosting. Die Reaktionszeit des Servers beeinflusst direkt den LCP. Wenn dein aktueller Host eine langsame Time to First Byte (TTFB) hat, hilft da auch keine Frontend-Optimierung. Die Performance-ServerInMotion Hosting habenSSD und Caching auf Serverebene, damit deine Seiten schneller laden.

Tipps zur Verbesserung der Interaktivität (INP)

Eine hohe JavaScript-Ausführung ist der Hauptgrund für schlechte INP-Werte. Wenn JavaScript den Hauptthread des Browsers belegt, kann er nicht auf Benutzerinteraktionen reagieren.

Optimierungsstrategien:

• Teile lange JavaScript-Aufgaben in kleinere Teile auf, die dem Hauptthread überlassen werden.
• Nicht unbedingt notwendiges JavaScript erst nach dem ersten Laden der Seite ausführen
• Entferne nicht genutzten Code durch Tree Shaking und Code Splitting.
• Mach die DOM-Größe so klein wie möglich, weil große DOM-Bäume das Rendern und die Interaktionsverarbeitung verlangsamen.
• Benutze requestAnimationFrame für Animationen statt setInterval.
• Denk mal über Web Workers nach, um aufwendige Verarbeitungsprozesse aus dem Hauptthread rauszuholen.
• Überprüfe Skripte von Drittanbietern und lösche alle, die nicht unbedingt nötig sind.
• Browser-Caching einrichten, um wiederkehrende Besuche schneller zu machen

Tipps zur Verbesserung der visuellen Stabilität (CLS)

Layoutverschiebungen passieren meistens, wenn Bilder ohne genaue Maße, Anzeigen und eingebettete Inhalte ohne reservierten Platz geladen werden, Inhalte dynamisch eingefügt werden und Webfonts unsichtbare Textblitze verursachen.

Optimierungsstrategien:

• Vergiss nicht, immer die Breite und Höhe von Bildern und Videos anzugeben.
• Reserviere Platz für Werbeplätze, bevor sie geladen werden.
• Lade die Schriftarten vor und benutze „font-display: optional“ oder „font-display: swap“, um Layoutverschiebungen während des Ladens der Schriftarten zu vermeiden.
• Vermeide es, Inhalte über bereits vorhandene Inhalte einzufügen, nachdem die Seite mit dem Rendern angefangen hat.
• Verwende CSS-Transformations-Eigenschaften für Animationen, statt Eigenschaften, die eine Neuberechnung des Layouts auslösen.

Warum Core Web Vitals für dein Unternehmen wichtig sind

Google nutzt das 75. Perzentil der Daten von echten Nutzern, um die Core Web Vitals zu bewerten. Das heißt, mindestens 75 % deiner Besucher müssen Werte innerhalb der „guten“ Schwelle erreichen, damit deine Seiten bestehen.

Websites, die die Core Web Vitals-Benchmarks erfüllen, haben oft bessere Platzierungen in Suchergebnissen, niedrigere Absprungraten und höhere Interaktionskennzahlen. Schlechte Ergebnisse sorgen für eine frustrierende Nutzererfahrung, die Besucher zu Websites von Mitbewerbern mit schnelleren, stabileren Seiten treibt.

Die Verbesserung der Core Web Vitals ist kein einmaliges Projekt. Regelmäßige Überwachung und Optimierung sollten Teil deiner laufenden Website-Wartungsroutine werden. Überprüfe nach jeder größeren Website-Aktualisierung deine LCP-, INP- und CLS-Metriken und behebe etwaige Rückschritte, bevor sie sich auf deine Besucher und Suchrankings auswirken.

Für genauere technische Infos zu jeder Metrik check einfach die offizielle Web Vitals-Dokumentation von Google.