Web Vitals – was sie sind, warum sie so wichtig sind und wie man sie misst.

In unserem heutigen extrem wettbewerbsorientierten und digitalisierten Geschäftsumfeld ist das Anwendererlebnis wichtiger denn je. Eine unzulänglich optimierte, fehlerhafte oder langsame Website kann die Conversion und das Ranking der Suchergebnisse erheblich beeinträchtigen.

Web Vitals liefern wichtige Erkenntnisse zum Anwendererlebnis auf eurer Website. Nur wenn ihr versteht, was sie messen – und wie sie gemessen werden –, könnt ihr Verbesserungsbereiche identifizieren und das Erlebnis für eure Besucherinnen und Besucher verbessern.

Diese Metriken sind wichtig für Entwicklerinnen und Entwickler, die wissen müssen, auf welche Aspekte einer Website sie sich konzentrieren müssen, und für UX-Designer, die Metriken zur Verbesserung des Anwendererlebnisses benötigen – aber auch für Unternehmen, die die Conversion steigern möchten.

Die Messung der Qualität des Anwendererlebnisses ist entscheidend, um eine hochwertige Website sicherzustellen und die Performance zu verbessern. Doch es ist nicht immer klar, was die Metriken sind oder wie sie zu evaluieren sind. Vielleicht wisst ihr nicht, welche Teile einer Website für das Anwendererlebnis wichtig sind, oder ihr seid euch nicht sicher, wie sich Web Vitals genau auf das Suchmaschinen-Ranking auswirken. Die Identifizierung von Schlüsselmetriken und Definition ihrer Funktion und ihrer Benchmarks helfen euch, Schwerpunktbereiche zu ermitteln und ein Ziel für eure Bemühungen festzulegen.

In diesem Artikel untersuchen wir die wichtigsten Web Vitals, die ihr verstehen müsst, um ein hervorragendes Erlebnis für eure Anwendenden zu entwickeln. Unsere Themen:

• Was sind Web Vitals?
• Warum sind Web Vitals so wichtig?
• Wie werden Web Vitals gemessen?
• Wie werden Web Vitals effektiv genutzt?

Was sind Web Vitals?

Web Vitals sind standardisierte Metriken zur Quantifizierung des Anwendererlebnisses einer Website basierend auf einer Reihe von Faktoren, die Google für wichtig erachtet. Die Core Web Vitals von Google wurden 2020 eingeführt und bestehen aus drei spezifischen Messungen zu Seitengeschwindigkeit und Anwenderinteraktion:

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

Mit jedem Core Web Vital-Wert wird ein bestimmter Teil des Anwendererlebnisses auf einer Website gemessen und evaluiert: Ladegeschwindigkeit, Reaktionsgeschwindigkeit und visuelle Stabilität. Sehen wir uns das einmal genauer an.

1. Largest Contentful Paint (LCP).

Eine wichtige, anwendungsorientierte Metrik zur Bewertung der Performance über die gesamte Website hinweg. Largest Contentful Paint stellt dar, wie schnell der Haupt-Content einer Web-Seite nach Beginn des Ladevorgangs sichtbar wird. LCP misst die Zeitdauer, bis das größte Inhaltselement der Seite gerendert ist, sei es ein Video, komplexe Bilder oder ein Textblock.

Eine Website mit einer LCP-Zeit von weniger als 2,5 Sekunden wird als gut („Good“) bewertet. Zwischen 2,5 und 4 Sekunden gilt sie als verbesserungswürdig („Needs Improvement“), ab 4 Sekunden erhält die Website die Note „schlecht“ („Bad“).

2. First Input Delay (FID).

First Input Delay ist eine Metrik, die berechnet, wie lange es dauert, bis der Browser auf die erste Client-Anfrage reagiert. Mit anderen Worten: FID misst die Zeit von der ersten Benutzerinteraktion mit einer Site bis zur tatsächlichen Antwort des Browsers.

Messbare Interaktionen könnten das Klicken auf einen Navigations-Link, das Tippen auf einen Button, das Auswählen von Menüoptionen, das Eingeben von Text in ein Feld oder Ähnliches sein. Für ein gutes Anwendererlebnis sollten Seiten einen FID von höchstens 100 Millisekunden aufweisen.

3. Cumulative Layout Shift (CLS).

Das dritte Core Web Vital-Element ist Cumulative Layout Shift, das das Anwendererlebnis basierend auf der wahrgenommenen visuellen Stabilität beim Laden einer Seite evaluiert. CLS misst unerwartete Layout-Verschiebungen – also wie stark Content-Elemente sich bewegen – während des Ladens einer Seite.

Ein schlechter CLS-Wert würde sich ergeben, wenn beim Laden eines Banners die Seite plötzlich nach unten springen würde. Für ein gutes Anwendererlebnis sollten Seiten einen CLS von höchstens 0,1 aufweisen.

Andere Web Vitals.

Neben den drei genannten gibt es noch viele weitere bedeutende Web Vitals. Hier sind einige der gängigsten Web-Metriken, die ihr kennen und nachverfolgen solltet:

• Time to First Byte (TTFB) gibt die Reaktionsgeschwindigkeit des Webservers an. Es misst die Dauer von der HTTP-Anfrage durch Benutzende, bis das erste Byte der Seite vom Client-Browser empfangen wird. Idealerweise sollte die TTFB-Geschwindigkeit weniger als 200 Millisekunden betragen.
• First Contentful Paint (FCP) misst die Zeit von dem Augenblick, in dem die Seite zu laden beginnt, bis zum dem, wenn der erste Content auf dem Bildschirm sichtbar ist. Es ist eine wichtige Metrik, da sie Benutzenden ein erstes Feedback liefert, dass die Seite wirklich geladen wird. Ein guter FCP-Wert liegt bei maximal 1,8 Sekunden.
• Time to Interactive (TTI) bewertet die Ladegeschwindigkeit, indem die Dauer bis zur vollständigen Interaktivität einer Seite gemessen wird. Ein zufriedenstellender TTI-Wert liegt bei höchstens 3,8 Sekunden. Ab 5 Sekunden sollte die TTI dringend verbessert werden.
• Total Blocking Time (TBT) bestimmt, wie schnell eine Seite nach einer Benutzereingabe geladen wird. Hierzu wird die Zeit zwischen FCP und TTI gemessen. Die TBT sollte weniger als 300 Millisekunden betragen. Je niedriger der Wert, umso besser das Anwendererlebnis.

Warum sind Web Vitals so wichtig?

Nachdem ihr nun wisst, was Web Vitals sind, solltet ihr auch verstehen, warum sie so wichtig sind. Allgemein sind Web Vitals wichtig, um durch einen besseren Aufbau und eine bessere Anerkennung eurer Site ein optimiertes Anwendererlebnis bereitzustellen, das Besucherinnen und Besucher auf eurer Site hält und die SEO verbessert.

So kann die Vernachlässigung eurer Web Vitals ein negatives Anwendererlebnis zur Folge haben, was wiederum die Conversion reduziert, da Besucherinnen und Besucher eure Seite verlassen – und ggf. zur Website eines anderen Anbieters wechseln. Darüber hinaus berücksichtigt Google diese Metriken als Bestandteil des Seitenerlebnisses bei der Berechnung des Suchmaschinen-Rankings. Durch schlechte Web Vitals kann eure Site auf Suchmaschinenergebnis-Seiten weit unten landen.

Wie werden Web Vitals gemessen?

Es gibt verschiedene Möglichkeiten, die Web Vitals einer Site effektiv zu messen, je nach geschäftlichen Anforderungen, Zielen und Ressourcen. Die folgenden Optionen kommen infrage:

• Core Web Vitals Report der Google Search Console. Der Google-Report zeigt die Performance eurer Seiten basierend auf Felddaten an und hilft euch, schlechte Anwendererlebnisse auf eurer Site zu korrigieren. Anhand der drei Metriken der Core Web Vitals, gemessen mit tatsächlichen Anwenderdaten, zeigt der Report die URL-Performance gruppiert nach Status („Poor“, „Need Improvement“ oder „Good“), Art der Metrik (CLS, FID, LCP) und URL-Gruppe (Gruppen von ähnlichen Web-Seiten) an.
• Chrome User Experience Report. Der Chrome User Experience Report liefert Metriken und Daten, die widerspiegeln, wie reale Chrome-Nutzende beliebte Ziele im Internet erleben. Die von Chrome gesammelten Daten sind in Form einer Reihe von Tools öffentlich zugänglich und werden von Google Search als Grundlage für das Seitenerlebnis-Ranking verwendet.
• JavaScript-Bibliothek web-vitals. Eine weitere Methode zur Messung der einzelnen Core Web Vitals ist die Verwendung der JavaScript-Bibliothek. Damit werden die Metriken genauso evaluiert wie von den Google-Tools. Hierzu wird ein einfaches Skript auf euren Web-Seiten ausgeführt.
• Chrome-Erweiterung für Web Vitals. Diese Erweiterung misst die Core Web Vitals und liefert sofort Feedback zu den Metriken zum Laden, zur Interaktivität und zur Layout-Verschiebung. Die Messung entspricht genau der in Chrome und anderen Google-Tools.

Auch wenn es möglich ist, diese Metriken in einer Laborumgebung unter kontrollierten Bedingungen zu testen, solltet ihr euch auf die Messung der Interaktion tatsächlicher Besucherinnen und Besucher mit eurer Website konzentrieren, um das reale Anwendererlebnis zu verbessern.

Wie werden Web Vitals effektiv genutzt?

Ihr solltet verstehen, wie Web Vitals das Anwendererlebnis eurer Site bestimmen und beeinflussen. Nur so könnt ihr bessere Erlebnisse für Besucherinnen und Besucher bereitstellen und dafür sorgen, dass euer Content die Aufmerksamkeit bekommt, die er verdient. Ihr wisst jetzt, was Web Vitals sind und warum sie so wichtig sind. Wenn ihr noch einen Schritt weiter gehen möchtet, solltet ihr eure eigene Site laden und aus Anwendersicht erleben. Auf diese Weise könnt ihr offensichtliche Verbesserungsbereiche identifizieren.

Doch ohne hervorragenden Content und Personalisierung hilft euch selbst eine schnelle, responsive und visuell stabile Website nicht weiter, wenn es darum geht, den hohen Ansprüchen moderner Kundinnen und Kunden gerecht zu werden. Adobe Experience Manager Assets automatisiert Content und unterstützt eine Vielzahl von Dateitypen. Damit habt ihr alles, was ihr zur Optimierung eurer Site und für die Erstellung nahtloser Erlebnisse für eure Benutzenden benötigt.

Seht euch ein Demovideo an, um zu erfahren, wie euch Experience Manager Assets bei der Optimierung eures Website-Contents helfen kann.