Maxi Becher, Frontend Entwickler*in 30.06.2021

Websites optimieren mit Core Web Vitals

Core Web Vitals

Eine schlechte Performance von Webseiten ist ärgerlich, kann jedoch mit einigen Mitteln vermieden werden. Um dies zu erreichen, muss aber zunächst Konsens darüber herrschen, an welchen Stellen wirklich Verbesserungspotenzial besteht und wie man dieses letztlich ausschöpfen kann.

Bis vor etwa einem Jahr war es aufgrund fehlender Standardisierung nicht immer leicht, einheitlich den Bedarf zu erkennen und deutlich zu machen. Zu unterschiedlich waren die Tools und Metriken, die uns die Messungen ermöglichen sollten, zu vielfältig die Empfehlungen und Ergebnisse.

Um dieses Problem zu lösen, hat das Unternehmen Google gemeinsam mit dem World Wide Web Consortium (W3C) einen Standard zur Erfassung der Website Performance entwickelt: eine Reihe von Metriken, die sogenannten Core Web Vitals, welche unabhängig vom verwendeten Analyse-Tool ausschlaggebende Informationen über die aktuelle Website geben sollen. Diese werden regelmäßig re-evaluiert und garantieren sowohl Aktualität als auch Verlässlichkeit, da sie nicht von einem auf den anderen Tag anders funktionieren, sondern in regelmäßigen Zeitintervallen neu beurteilt werden.

Neben den Web Vitals spielen auch weiterhin Faktoren wie Barrierefreiheit und SEO eine Rolle für das Ranking einer Website auf Google und Co. Allerdings wirken sich die Web Vitals bereits jetzt stark auf die Bewertung aus, sodass man sie keinesfalls vernachlässigen sollte.

Die Web Vitals – eine kurze Übersicht

Für alle Vitals gilt: Je geringer der Wert, umso besser. Die Daten unterteilen sich in sogenannte Feld- und Labordaten. Labordaten sind wie bisher künstliche (emulierte) Testergebnisse, die sozusagen im Labor entstehen. Felddaten hingegen bestehen aus Daten, die anonym gesammelt werden und die tatsächlichen Werte und Erfahrungen der User widerspiegeln.

Die Core Web Vitals setzen sich aktuell wie folgt zusammen:

Ladezeit: Largest Contentful Paint (LCP)

Diese Kennzahl gibt an, wie viel Zeit das größte Inhaltselement der Seite benötigt, um geladen zu werden. Es geht also um die wahrgenommene Ladedauer der Seite bzw. der Applikation. Das größte Element kann ein Bild, ein Video oder ein reiner Textblock sein. Meistens handelt es sich hierbei gleichzeitig um das Element, das zum Schluss geladen wird.

Alle Werte unter 2,5 Sekunden sind gut, alles darüber verbesserungswürdig bis schlecht. Somit sollte also die Seite innerhalb von max. 2,5 Sekunden vollständig geladen haben, was auch der Absprungrate aus diversen Studien entspricht (3 Sekunden).

Interaktivität: First Input Delay (FID)

Beim FID geht es um die Zeit zwischen einer erstmaligen Interaktion, etwa einem Klick auf einen Link oder einem Tastenanschlag, und der davon hervorgerufenen Reaktion des Browsers. Aktionen wie Scrollen oder Zoomen haben auf diese Metrik hingegen keine Auswirkungen, da es sich nicht um eine direkte Interaktion mit dem Inhalt der Seite handelt.

Hierbei lautet das Ziel, die Eingabe-Verzögerungen möglichst gering zu halten. Ein guter Wert liegt unter 100 Millisekunden, alles darüber nehmen die Nutzer*innen wahr, die User Experience leidet.

Visuelle Stabilität: Cumulative Layout Shift (CLS)

Das letzte Core Web Vital zeigt auf, wie visuell stabil eine Seite bei einer Interaktion bleibt. Ziel ist es, Verschiebungen im Layout zu entdecken, die etwa durch Nachladen eines Elements ausgelöst werden.


Der Wert für den sogenannten „Layout Shift Score“ sollte unter 0,1 bleiben, alles darüber ist verbesserungswürdig. Ab einem Wert größer als 0,25 gilt er als schlecht.
Diese Kennzahl berechnet sich aus dem Prozentbereich des Bildschirms, der von der Verschiebung betroffen ist, sowie der Bildschirmhöhe, um die das Element verschoben wurde.

Fazit

Die neuen KPIs bringen Einheitlichkeit und Struktur und helfen uns als Agentur dabei, Schritte zur Verbesserung von Websites und Apps einzuleiten. Diese sind wichtig, um eine gute Usability der Seiten zu gewährleisten und damit auch möglichst viele Besucher*innen auf den Seiten zu halten. Es lohnt sich also, sich mit diesen (aber auch den anderen) Metriken auseinanderzusetzen. Unseren Kunden können wir auf dieser Basis zu einer besseren Performance ihrer Webauftritte verhelfen.