Skip to content

Googles Core Web Vitals ab 2024

von Sophie Heßmer am

Googles Core Web Vitals ab 2024

Sie wollen Ihrer Webseite zu einer besseren Webperformance verhelfen? Dabei können Ihnen die "Core Web Vitals" helfen! In einer Welt, in der das Internet unaufhörlich fortschreitet, sind diese Metriken der Schlüssel zur Gestaltung einer herausragenden Nutzererfahrung.  Die Core Web Vitals wurden von Google zur Steigerung der Benutzerfreundlichkeit von Internetseiten entwickelt und sind nicht nur unverzichtbar für eine optimale User Experience, sondern auch ein zentraler Faktor für effektive Suchmaschinenoptimierung (SEO) und die Platzierung einer Webseite im Google Ranking. Somit spielen Sie besonders für Webentwickler und Webseiten-Besitzer eine große Rolle. Damit Ihre Seite bei diesen Einheiten gut abschneidet, wollen wir Ihnen mit diesem Beitrag helfen, die Metriken besser zu verstehen, messen und optimieren zu können.

 

Was sind Core Web Vitals?

Im Mai 2020 hat Google die Core Web Vitals eingeführt, welche zusammen mit weiteren Werten ab Juni 2021 den Ranking-Faktor Page Experience ausmachen. Dies sind Messwerte, die dabei helfen sollen, das Internet und die Nutzerfreundlichkeit von Seiten zu verbessern. Sie umfassen Aspekte, die für die Benutzererfahrung besonders wichtig sind und die Page Experience sowie Webseitenleistung quantifizieren können. Die drei Core Web Vitals konzentrieren sich auf die Bereiche Ladezeit, Stabilität der Inhalte und Interaktivität einer Internetseite. Zu finden sind diese in der Google Search Console. Sie spielen hauptsächlich in den folgenden Bereichen eine wichtige Rolle: 

  • Verbesserung der Benutzererfahrung: Die Core Web Vitals helfen Entwicklern und Website-Betreibern zu verstehen, wie Besucher ihre Website wahrnehmen. Indem sie Metriken wie die Ladegeschwindigkeit, Interaktivität und visuelle Stabilität sichtbar gemacht werden, können Entwickler gezielte Verbesserungen vornehmen, um das Nutzererlebnis zu optimieren.
  • Einfluss auf die Suchmaschinen-Rankings: Google verwendet die Core Web Vitals als Teil seiner Ranking-Algorithmen. Websites, die in diesen Metriken gut abschneiden, können eine höhere Platzierung in den Suchergebnissen erreichen. Daher sind sie ein wichtiger Faktor für SEO-Strategien.
  • Website-Leistungsanalyse: Die Core Web Vitals bieten konkrete und messbare Daten zur Leistung einer Website. Dies ermöglicht es Website-Betreibern, Leistungsprobleme zu identifizieren und zu beheben, was zu einer schnelleren und reibungsloseren Website führt.
  • Mobile Benutzerfreundlichkeit: Da immer mehr Menschen das Internet über mobile Geräte nutzen, sind die Core Web Vitals besonders wichtig, um sicherzustellen, dass Websites auf mobilen Geräten gut funktionieren. 
  • Entwicklung von Best Practices: Die Core Web Vitals fördern die Entwicklung von Best Practices im Webdesign und in der Webentwicklung, indem sie ein klares Verständnis darüber vermitteln, was eine gute Benutzererfahrung ausmacht.
  • Langfristige Website-Wartung: Indem sie Trends und Muster in der Webseitenleistung aufzeigen, helfen die Core Web Vitals Website-Betreibern, ihre Seiten langfristig benutzerfreundlich und aktuell zu halten.

Insgesamt tragen die Core Web Vitals dazu bei, das Internet für Benutzer schneller, zugänglicher und angenehmer zu machen. Seit ihrer Einführung spielen sie eine wichtige Rolle in der Webentwicklung und Suchmaschinenoptimierung, da sie direkt beeinflussen, wie Google die Benutzerfreundlichkeit einer Webseite bewertet und sie in den Suchergebnissen einstuft. Dadurch sind sie ein wichtiger Bestandteil moderner Webentwicklung und dem digitalen Marketing.

 

Core Web Vitals-Messwerte 

Largest Contentful Paint (LCP)

Diese Metrik erfasst die Zeit, bis das Rendern des größten sichtbaren Inhaltsstücks auf der Seite abgeschlossen ist. Dieses ist oft ein großes Bild, ein Video oder ein bedeutender Textblock. Zudem ist sie ein Indikator für die wahrgenommene Ladegeschwindigkeit aus der Perspektive des Benutzers, da es anzeigt, wie schnell die Hauptinhalte einer Seite für einen Benutzer sichtbar werden. Ein schneller LCP-Wert deutet darauf hin, dass die Seite zügig lädt.

Cumulative Layout Shift (CLS)

Der CLS misst im Rahmen der Core Web Vitals die visuelle Stabilität der Seite. Sie bewertet, wie oft und in welchem Umfang Elemente auf der Seite während des Ladens ihre Position verändern. Unerwartete Layoutverschiebungen können für Benutzer frustrierend sein, insbesondere wenn sie versehentlich auf etwas klicken, das sich bewegt hat. Ein niedriger CLS-Wert ist wünschenswert, da er eine stabile und vorhersehbare Benutzererfahrung bedeutet. 

First Input Delay (FID) 

Diese Metrik bewertet die Interaktivität und Reaktionsfähigkeit der Webseite. Sie gibt die Zeit von der ersten Interaktion eines Benutzers mit einer Webseite wie dem Klicken auf einen Link oder das Drücken eines Buttons bis zum Zeitpunkt, an dem der Browser auf diese Eingabe reagieren kann, an. Ein niedriger FID-Wert ist deutet darauf hin, dass die Seite schnell auf Benutzerinteraktionen reagiert.

Interaction to Next Paint (INP)

Der Interaction to Next Paint (INP) ist eine neue Metrik, die ab März 2024 den First Input Delay (FID) ersetzen wird. INP beurteilt die Reaktionsfähigkeit einer Seite, indem es erfässt, wann eine Seite auf Klick-, Tippen- und Tastatureingaben reagiert. Er bezieht dabei sowohl die Verzögerung des Inputs als auch die Verarbeitungszeit und die Präsentationsverzögerung bis zum nächsten Bildaufbau (Paint) nach einer Interaktion mit ein. Der INP beobachtet alle Interaktionen während eines Seitenbesuchs, wobei der endgültige INP-Wert am Ende über die längste Interaktion aus dieser Reihe berichtet. Dadurch bietet er eine umfassendere Einschätzung der Benutzererfahrung als der FID.

 

Core Web Vitals messen

Die Core Web Vitals von Google werden in der Regel auf zwei Arten gemessen: über Felddaten (Real-User-Monitoring/ RUM) und Labordaten (synthetische Tests). Felddaten reflektieren die tatsächliche Benutzererfahrung, während Labordaten helfen, spezifische technische Probleme zu identifizieren und zu beheben. Die folgende Tabelle macht sichtbar, was bei jeder Core Web Vital worüber gemessen wird: 

Core Web Vital

Was erfasst wird

Messarten

Largest Contentful Paint

Ladeleistung

Feld- und Labordaten

Cumulative Layout Shift

visuelle Stabilität

Feld- und Labordaten

First Input Delay

Interaktivität 

Felddaten

Interaction to Next Paint

Interaktivität

Felddaten

Zusammenfassung der Messungsarten

FID und INP können nur über Felddaten erfasst und in keiner Laborsituation simuliert werden, da sie die Interaktivität einer Seite aus der Sicht echter Benutzer bewerten. Dies erfolgt in der Regel über Browser-APIs oder spezielle RUM (Real User Monitoring) Tools. Als Alternative dazu können Entwickler auf ähnliche Metriken wie Total Blocking Time (TBT) oder Time to Interactive (TTI) in synthetischen Testtools zurückgreifen, um Einblicke in mögliche Interaktivitätsprobleme zu erhalten.

Die gemessenen Werte können je nach Art der Seite, den verwendeten Geräten und den Netzwerkbedingungen variieren. Deshalb ist es wichtig, ein breites Spektrum an Benutzererfahrungen zu berücksichtigen. Für die Messung und Analyse können verschiedene Tools verwendet. Im folgenden stellen wir Ihnen die Verwendung der drei bekanntesten Tools Google PageSpeed Insights, Google Search Console und Chrome User Experience Report (CrUX) vor: 

Google's PageSpeed Insights

Startseite Pagespeed Insights
1 Die Startseite von PageSpeed Insights
PageSpeed Insights mit Webadresse
2 Geben Sie nun die Webadresse ein, die Sie analysieren wollen
PageSpeed Insights Übersicht 1
3 PageSpeed Insights Übersicht 1
PageSpeed Insights Übersicht 2
4 PageSpeed Insights Übersicht 2
PageSpeed Insights Verbesserungsvorschläge
5 Verbesserungsvorschläge von PageSpeed Insights, die jedoch nur von Developern oder Fachkräften umgesetzt werden können

 

Google Search Console

Google Search Console Startseite-1
1 Das Dashboard von CrUX
Google Search Console mit Webadresse
2 Geben Sie nun die Webadresse ein, die Sie analysieren wollen
Google Search Console
3 Core Web Vitals-Bericht in der Search Console

 

Chrome User Experience Report (CrUX)

CrUX Startseite
1 Das CrUX-Dashboard, um eine Webseite zu analysieren
CrUX mit Webadresse
2 Als Nächstes müssen Sie die Webadresse eingeben, die Sie analysieren wollen 
CrUX Übersicht
3 Das Dashboard von CrUX

Zusammenfassend werden die Werte der Core Web Vitals durch eine Kombination aus realen Benutzerdaten und simulierten Tests in Erfahrung gebracht, um ein umfassendes Bild der Leistung und Benutzerfreundlichkeit einer Webseite zu erhalten. Für Website-Betreiber und Entwickler ist es wichtig, beide Arten von Daten zu berücksichtigen. Felddaten geben einen realistischen Einblick, wie Benutzer die Seite in verschiedenen Situationen und auf verschiedenen Geräten erleben, während Labordaten hilfreich sind, um spezifische Probleme zu identifizieren und zu lösen. Tools wie PageSpeed Insights und Google Lighthouse simulieren beispielsweise das Laden einer Seite in einer kontrollierten Umgebung und messen so die Labordaten. Des Weiteren ist es wichtig zu beachten, dass sich Core Web Vitals im Laufe der Zeit und mit Änderungen an der Seite ändern können und deshalb stetig überwacht werden müssen.

 

Core Web Vitals optimieren 

Alle Core Web Vitals-Metriken werden von Google als Rankingfaktoren verwendet. Eine Optimierung dieser kann deshalb dazu führen, eine sichtbar höhere Platzierung in den Suchergebnissen zu erreichen. Technische Anpassungen sollten jedoch immer mit dem Fokus auf die Verbesserung der Benutzererfahrung durchgeführt werden. Optimierungen können in den meisten Fällen nur von Developern oder Menschen, die sich sehr gut mit der Materie auskennen, vorgenommen werden. Jede Core Web Vitals-Metrik hat spezifische Schwellenwerte, die bestimmen, was als gut, verbesserungsbedürftig oder schlecht angesehen wird. Diese Schwellenwerte sollten als Ziele für die Optimierung verwendet werden.

Core Web Vitals Übersicht

Richtwerte für die Core Web Vitals

Largest Contentful Paint: Um den LCP zu verbessern, sollten Webentwickler die Ladezeiten von großen Inhaltselementen optimieren. Verwenden Sie moderne Bildformate wie WebP, setzen Sie komprimierte Bilder ein und implementieren Sie Lazy Loading. Nutzen Sie zudem schnelle Hosting-Dienste, implementieren Sie Caching und optimieren Sie die Serverantwortzeit. Eine weitere Möglichkeit ist die Priorisierung des Ladens von kritischen Ressourcen (wie CSS und JavaScript), um den Prozess des Renders zu beschleunigen.

Cumulative Layout Shift: Um den CLS zu verbessern, sollten Entwickler zum einen darauf achten, dass die Größe von Bildern und anderen Medienelementen explizit angegeben wird, um unerwartete Layoutverschiebungen zu vermeiden. Zum Anderen sollten Inhalte, die dynamisch geladen werden, so platziert werden, dass sie das bestehende Layout nicht verschieben. Es können auch Techniken implementiert werden, um das "Flackern" von unsichtbaren Texten (FOIT) oder unformatierten Texten (FOUT) zu vermeiden.

First Input Delay: Um den FID zu verbessern, können Entwickler Techniken zum einen das JavaScript optimieren. Minimieren Sie zum Beispiel das JavaScript, verzögern Sie das Laden von nicht-kritischen JavaScript-Dateien und entfernen Sie unnötigen Code. Werkzeuge wie der Coverage-Tab in Chrome DevTools können dabei helfen, ungenutzten Code zu identifizieren. Zudem ist es empfehlenswert, mit Code-Splitting zu arbeiten und größere JavaScript-Bündel in kleinere, verwaltbare Stücke aufzuspalten, um die Ausführungszeiten zu reduzieren. Eine weitere Möglichkeit ist die Verwendung von Web Workers. Dabei werden rechenintensive Aufgaben in Web Workers verlagert, um den Haupt-Thread frei zu halten. Laut Google ist ein Wert unter 100 Millisekunden ein guter Wert.

Interaction to Next Paint: Um den Interaction to Next Paint (INP) zu optimieren, können verschiedene Ansätze verfolgt werden. Es sollten Techniken wie Code-Splitting, Optimierung des JavaScript-Codes, Content Delivery Network (CDN), Web Workers für rechenintensive Aufgaben, Verzögerung des Ladens von nicht-kritischer Ressourcen, das effiziente Laden von Bildern und Medien sowie die Optimierung von Third-Party-Scripts. Jede Anpassung, die die Reaktionsfähigkeit der Webseite verbessert, wirkt sich positiv auf die Nutzerfreundlichkeit aus.

Eine Verbesserung der Core Web Vitals sollte als kontinuierlicher Prozess betrachtet werden, nicht als einmalige Aufgabe. Webtechnologien und -praktiken entwickeln sich ständig weiter, und es ist wichtig, am Ball zu bleiben. Konzentrieren Sie sich bei der Verbesserung der Webseite zudem vorwiegend auf die Benutzererfahrung und nicht nur auf die Metrikwerte und stellen Sie sicher, dass Ihre Website auf Desktop und Mobile gut funktioniert.

 

growth pilots Angebot

Sie wollen ebenfalls Ihre Webseite verbessern und wissen nicht wie? Dann nehmen Sie doch gerne Kontakt mit uns auf! Wir unterstützen Sie gerne bei allen Fragen rund um die Themen SEO, SEA, HubSpot, Content Erstellung sowie Reporting & Monitoring von diesem, Customer Journey, Buyer Persona und mehr! Wir greifen dabei auf jahrelange Erfahrung mit verschiedenen Formen von Marketing im B2B Bereich zurück, um Ihnen und Ihrem Unternehmen zum Erfolg zu verhelfen.

Mehr zu unseren Angeboten finden Sie auf unserer Webseite und natürlich im direkten Kontakt. Wir freuen uns darauf, Sie kennenzulernen!

Bereit für mehr Erfolg online?   Wir helfen Ihnen – jetzt anfragen!

 

Fazit

Google Core Web Vitals sind wichtige Metriken, um die Qualität der User Experience auf einer Website zu erfassen. Sie werden hauptsächlich in den Bereichen der Webentwicklung, Benutzererfahrung und Suchmaschinenoptimierung (SEO) eingesetzt.  

Durch gute Core Web Vitals können Sie die Performance Ihrer Website und damit neben der Nutzererfahrung vor allem Ihr Ranking bei der Google Suche deutlich verbessern. Um aktuell zu bleiben, müssen Sie sich stetig fortbilden und Ihre Core Web Vitals im Blick behalten, denn das Internet und der Markt verändern sich ununterbrochen weiter.

 

weitere Quellen: 

Cloudflare Blog: https://blog.cloudflare.com/inp-get-ready-for-the-new-core-web-vital/ 

Core Web Vitals-Bericht von Google: https://support.google.com/webmasters/answer/9205520?hl=de 

INP-Werte: https://www.hostpress.de/blog/core-web-vitals-inp/#:~:text=Der%20Wert%20des%20Interaction%20to%20Next%20Paint-Wertes%20setzt,verbessert%20werden%20%C3%BCber%20500%20Millisekunden%20%E2%80%93%20schlechte%20Reaktionsgeschwindigkeit 

Neil Patel Blog zu INP: https://neilpatel.com/blog/inp/