Web Vitals

Was sind Web Vitals?

Unter dem Begriff Web Vitals fasst Google eine neue Initiative zur einheitlichen Bewertung von Qualitätssignalen einer Website zusammen. Das Ziel ist, Geschäftsführern, Marketern und Entwicklern einheitliche Kennzahlen zur Verfügung zu stellen, um die User Experience einer Website zu maßgeblich zu verbessern.

In den vergangenen Jahren hat Google zahlreiche Tools bereitgestellt, mit denen die Website Performance gemessen und kontrolliert werden konnte. Die Menge der verschiedenen Tools und Metriken sorgte für Verwirrung und intuitiv zu bedienen waren diese Tools auch nicht immer. Mit der Web Vitals Initiative möchte Google Websitebetreiber dabei unterstützen, sich auf die wichtigsten Kennzahlen für eine technisch gesunde Website zu fokussieren. Mit den Core Web Vitals (LCP, FID und CLS), die jede Webpage betreffen und in einigen Google-Tools eingebunden werden, lassen sich bestimmte Facetten der User Experience messen und analysieren.

1. Ladezeit – Largest Contentful Paint – LCP (Loading)
2. Interaktionsbereitschaft – First Input Delay – FID (Interactivity)
3. Visuelle Stabilität – Cumulative Layout Shift - CLS (Visual stability)

Laut Google entwickeln sich die Metriken rund um die Core Web Vitals in der nächsten Zeit weiter. In 2020 liegt der Fokus auf den drei vorgestellten Bereichen zur Verbesserung der User Experience. Erfassen Sie mit den folgenden Developer Tools die Metriken der Core Web Vitals.

Linkliste zu den Tools, um die Web Core Vitals zu analysieren:

1. PageSpeed Insights
2. Chrome UX Report
3. Google Search Console
4. Chrome DevTools
5. Lighthouse
6. Web Vitals Extension

Wie interpretiere ich Core Web Vitals?

LCP – Largest Contentful Paint

Der Largest Contentful Paint gibt an, zu welchem Zeitpunkt nach dem Aufruf einer Webseite die Hauptinhalte geladen sind.

Die Hauptursachen für einen schlechten LCP-Wert und die damit verbundene Verhinderung einer guten User Experience stellen häufig langsame Serverantwortenzeiten, blockierendes Rendering von JavaScript und CSS-Dateien oder langsame Ladezeiten von Ressourcen und clientseitiges Rendering dar.

FID – First Input Delay

Mit dem First Input Delay lässt sich ablesen, ab wann ein Nutzer zum ersten Mal mit einer Seite interagieren kann bzw. ab wann eine Seite auf Nutzereingaben reagiert.

Ein schlechter FID-Wert entsteht oft bei der Ausführung von vielen JavaScript-Elementen, wenn Ihre Website geladen wird. Während der Ausführung von JS-Dateien im Main Thread, kann der Browser nicht auf die Anfragen des Nutzers reagieren. Daraus resultiert ein schlechter FID-Wert, der die User Experience beeinträchtigt. Durch die Optimierung und Kompilierung von JavaScript-Elementen lässt sich der First Input Delay verbessern.

Haben Sie die Core Web Vitals Ihrer Website analysiert und Verbesserungspotenzial erkannt? Wir übernehmen die Optimierung für Sie. Buchen Sie jetzt Ihre Website Performance Optimierung und überzeugen mit einer besseren UX.

CLS – Cumulative Layout Shift

Der Cumulative Layout Shift beschreibt, wie konsistent und stabil ein einmal dargestelltes Layout ist bzw. wie lange es sich beim Laden der Webseite verändert.

Konkret gibt der CLS an, wie stark sich der sichtbare Inhalt in der Ansicht verschiebt und wie weit die betroffenen Elemente verschoben wurden.

Sie kennen es bestimmt. Nach dem Websiteaufruf eines Nachrichtenportals wollen Sie unmittelbar mit der Seite interagieren. Was passiert? Die Inhalte der Seite verschieben sich, rutschen weiter nach unten und machen Platz für Werbeanzeigen und Werbeblöcke. Ihr Klick landet im Leeren oder auf einer der nervigen Anzeigen. Sie bewerten die User Experience der Seite als grauenhaft. 😃

Lassen Sie uns die CLS-Metrik gemeinsam mithilfe zwei beispielhafter Visualisierungen berechnen, damit Sie verstehen, wie sich diese Kennzahl zusammensetzt. Der Layout Shift Score setzt sich aus der Impact Fraction und Distance Fraction zusammen.

Impact Fraction x Distance Fraction = Layout Shift Score

Impact Fraction

In diesem Beispiel bestehen 50% des Viewports aus Content. Der Content verschiebt sich um 25% nach unten. Das bedeutet, dass 75% des gesamten Viewports durch die Verschiebung des Contents betroffen sind. Die Impact Fraction (Kennzahl, wie viel Prozent des Bildschirms insgesamt zwischen zwei Frames bewegt werden) beträgt in unserem Beispiel 0,75.

Distance Fraction

Die Distance Fraction misst die Entfernung bzw. Distanz, die Elemente auf Webseite in Relation zum Viewport weiterwandern. Die Berechnung ist schnell erledigt. Da sich der Viewports in unserem Beispiel um 25% verschoben hat, beträgt die Distance Fraction 0,25.

Let’s do the math 👨‍🔬 Folgen wir der Formel Impact Fraction x Distance Fraction = Layout Shift Score entsteht folgende Rechnung.

0,75 x 0,25 = 0,1875

An der ein oder anderen Stelle lassen sich Optimierungspotenziale finden und umsetzen, um aus der Zone „Needs Improvement“ in „Good“ zu rutschen.

Jetzt wissen Sie, wie sich der CLS-Wert zusammensetzt und berechnet wird. Die eigentliche Arbeit der Berechnung können Sie aber gerne Googleüberlassen. Nutzen Sie die verschiedenen Developer Tools, um den Cumulative Layout Shift Ihrer Webseiten zu berechnen und verbessern so die User Experience.

Überzeugen Sie mit einer Benutzererfahrung, die in Erinnerung bleibt und erfüllen alle einschlägigen technischen Anforderungen von Google. Buchen Sie jetzt Ihre Website Performance Optimierung.

Fazit

Die Optimierung Ihrer Website und die Verbesserung der Benutzererfahrung ist der Schlüssel zum langfristigen Erfolg Ihrer Website. Unabhängig davon, ob Sie Geschäftsinhaber, Vermarkter oder Entwickler sind, können Sie nun mit dem Wissen zu den Core Web Vitals Analysen durchführen und Optimierungsmöglichkeiten identifizieren, die Ihre Website-User-Experience verbessern. Halten Sie sich über die Web Vitals Initiative auf dem Laufenden und beginnen schon heute mit der Verbesserung Ihrer UX. Wir lieben eine gute User Experience. Sie auch? ❤

Dann lassen Sie es uns gemeinsam angehen.