Core Web Vitals erklärt

Was sind Core Web Vitals? Und wieso?

Jeder Website Betreiber sollte eine handvoll Begriffe kennen. Um einige dieser geht es hier: die Core Web Vitals. Ich bemühe mich diese einfach zu erklären, was diese bedeuten und wofür sie gut sind.

Der Name Core Web Vitals suggeriert, dass es um die Gesundheit deiner Website geht. Man könnte meinen: die technische Gesundheit. Das ist aber etwas missverständlich, es geht tatsächlich um Messwerte, die versuchen zu quantifizieren, wie „toll“ die Benutzererfahrung einer Website ist – zumindest was wahrgenommene Ladezeiten betrifft.

„Core Web Vitals sind Performance Metriken und definieren Richtwerte für eine großartige Benutzer­erfahrung.“

web.dev/vitals

Update 04.04.2021: Core Web Vitals werden ab Mai ’21 zum „Suchmaschinen-Signal“ bei Google.

Inhalt

  1. Wieso?
  2. Core Web Vitals
    1. Largest Contentful Paint (LCP)
    2. First Input Delay (FID)
    3. Cumulative Layout Shift (CLS)
  3. Wie kann ich das messen?
  4. Fazit

Disclaimer: Eigentlich sind das alles keine Neuigkeiten. Google versucht schon seit geraumer Zeit ein Bewusstsein für Performance im Web zu schaffen. Im Mai 2020 gründete Google die Initiative „Web Vitals“ und stellte die 3 Metriken vor, die vorherige (technischere) Metriken ersetzen/vereinfachen sollen: Core Web Vitals.

1. Wieso sollte ich mich mit Core Web Vitals beschäftigen?

Ob du ein Unternehmer und Website-Inhaber oder Dienstleister in dem Bereich bist, gute Core Web Vitals zu haben ist für alle Beteiligten von Vorteil – auch die Besucher deiner Website.

A. Du bist Unternehmer / Website-Betreiber:

Tja, wen sollte es etwas angehen, wenn nicht dich? Es geht um deine Besucher, deine Kunden, deine Community.

Die Erfahrung deiner Besucher ist ein sehr wichtiges Gut:

  • Besucher kommen öfter zurück,
  • bleiben länger,
  • suchen mehr
  • und kaufen auch öfter …

… auf schnellen Websites, verglichen mit deren langsamen Konkurrenten.

Reicht das nicht aus?

B. Du bist Online-Dienstleister (Agentur, Marketer, SEO-Spezialist …)

Core Web Vitals bieten objektive Kriterien für die Qualität einer Website.

Nutze das für deinen Vorteil:

  • Baue Webseiten mit einer besseren UX, …
  • … identifiziere mögliche Schwachstellen im Conversion Funnel,
  • … berate deine Kunden mithilfe eines objektiven Werkzeugs.

Zum Zeitpunkt des Schreibens ist es noch nicht hoch-offiziell, aber es sieht danach aus als werden Core Web Vitals werden ab Mai 2021 ein Suchmaschinenkriterium / ein Ranking-Faktor. Kein sonderlich starkes Kriterium; Content bleibt am wichtigsten. Tatsächlich wird aber auch damit experimentiert „Webseiten in den Suchergebnissen mit einem Badge“ zu markieren, falls gewisse Kriterien erfüllt sind. So äußerte sich kürzlich John Müller in den Google SEO office-hours am 29. Jänner ’21.

2. Was sind nun diese „Core Web Vitals“?

Core Web Vitals sind Messwerte, die von Google als die 3 wichtigsten definiert wurden. Sie tauchen in den meisten Google Tools auf und sollten von jedem Website-Betreiber regelmäßig gemessen werden. Wir nutzen diese als objektive Qualitätskriterium für Webseiten, die wir überprüfen oder für unsere eigene Arbeit.

Alle 3 Messwerte sind meiner Einschätzung nach gleich wichtig und heißen Largest Contentful Paint, First Input Delay & Cumulative Layout Shift.

Largest Contentful Paint
Largest Contentful Paint misst die Ladeperformance.
First Input Delay
First Input Delay misst, wann die Website interaktiv ist.
Cumulative Layout Shift
Cumulative Layout Shift misst die visuelle Stabilität.

2.1. Largest Contentful Paint (LCP)

Dieser Messwert gibt die Renderzeit des größten Bild- oder Textblocks im sichtbaren Bereich an.

Einfacher: Wie lange dauert es bis genügend Inhalt dargestellt wird, dass die Website nutzbar ist. Man kann auch sagen es entspricht etwa der „wahrgenommen Ladezeit“.

Um eine gute Benutzererfahrung zu bieten, sollten Websites auf einen LCP-Wert von weniger als 2,5 Sekunden hinarbeiten. Quelle

Was du wissen solltest:

  • LCP misst die wahrgenommene Ladegeschwindigkeit
  • Als Richtwert gilt < 2,5 Sekunden

2.2. First Input Delay (FID)

Diese Metrik misst die Zeit von der ersten Interaktion eines Benutzers mit einer Seite bis zu dem Zeitpunkt, an dem der Browser tatsächlich in der Lage ist diese Interaktion zu verarbeiten.

Einfacher: Wie schnell kann die Seite laden und den gesamten Code verarbeiten, sodass der Besucher damit arbeiten kann.

Für ein gutes Benutzererlebnis sollten Websites einen FID-Wert von weniger als 100 Millisekunden anstreben. Quelle

Was du wissen solltest:

  • FID misst Zeitspanne vom Ladestart bis zu dem Zeitpunkt bis die Website bedienbar ist
  • Als Richtwert gilt < 0,1 Sekunden

2.3. Cumulative Layout Shift (CLS)

Diese Metrik misst die Gesamtsumme aller individuellen layout shift-Werte für jede unerwartete Layout-Verschi­ebung (layout shift), die während der gesamten Ladezeit einer einzelnen Webseite auftritt. Eine Layout-Verschie­bung tritt immer dann auf, wenn ein sichtbares Element seine Position von einem Moment zum nächsten ändert.

Einfacher: Ist die Besuchererfahrung angenehm & „stabil“? Also ist die gesamte Interaktion mit der Website flüssig, natürlich & frei von Verzögerungen und Ruckeln?

Um eine gute Benutzererfahrung zu bieten, sollten Websites einen CLS-Wert von weniger als 0,1 anstreben. Quelle

Was du wissen solltest:

  • CLS misst die visuelle Stabilität; ob die Besuchererfahrung frei von Verzögerungen und Ruckeln ist.
  • Als Richtwert gilt < 0,1

3. Tools zum Messen von Core Web Vitals

In 3 Tools werden die Core Web Vitals gemessen bzw. angezeigt. Diese findest du in der Tabelle weiter unten. Andere Tools haben einen anderen Fokus und sind „unvollständig“ – haben z.B. nur 2 der 3 Messwerte – diese lasse ich der Einfachheit halber aus.

Ich persönlich nutze hauptsächlich PageSpeed Insights. Das ist der einfachste Zugang um eine einzelne Webseite zu messen. Auch super praktisch da man den Link z. B. schnell weiterleiten kann.

Als Zweites empfehle ich dir regelmäßig in die Search Console zu schauen. Hier bekommst du zwei wichtige Infos:

  1. Einen Überblick über die Leistung deiner Website bezüglich der Google Suche
  2. Und die Core Web Vital Werte jeder einzelnen Unterseite, die im Google-Index ist.

Mit dem Google User Experience Report, eigentlich das mächtigste Tool, habe ich bisher keine Erfahrungen gemacht. Aber kurz gesagt sammelt dieses Tool anonymisiert Core Web Vitals echter Benutzer. Diese Daten werden dann in PageSpeed Insights als „Felddaten“ und in die Search Console als „Core Web Vitals Report“ gespeist.

LCPFIDCLS
PageSpeed Insights
Search Console (Core Web Vitals Report)
Chrome User Experience Report
Tools mit denen du Core Web Vitals messen kannst.

Pro-Tipp:
Benutze PageSpeed Insights immer in einem Privaten/Inkognito Browser, damit alle Browser-Erweiterungen deaktiviert sind. Diese können das Ergebnis beeinflussen. Sag das auch weiter: Es ist wichtig, dass alle Test-Szenerien unter den gleichen Bedingungen passieren.

Nerd-Fact:
Führst du Tests in den Developer Tools oder direkt mit Lighthouse durch findest du keinen FID-Messwert. Orientiere dich hier an der „Total Blocking Time (TBT)“-Metrik.

4. Fazit

Hoffentlich hast du jetzt eine Idee was diese Messwerte bedeuten. Du musst dir das nicht alles merken, das ist unser Job, weil du kannst hier alles regelmäßig nachlesen 😉

Wichtig ist, diese Messwerte existieren und sie …

  • … werden bald ein SEO-Kriterium.
  • … stellen eine objektive Möglichkeit der Qualitätsmessung einer Website.
  • … helfen dir Erfahrungen deiner Website-Besucher zu quantifizieren, damit du eine Vorstellung bekommst & Zahlen hast.
Zur Erinnerung nochmals die 3 Core Web Vitals:
Largest Contentful Paint
Largest Contentful Paint misst die Ladeperformance.
First Input Delay
First Input Delay misst, wann die Website interaktiv ist.
Cumulative Layout Shift
Cumulative Layout Shift misst die visuelle Stabilität.

Falls dir dieser Beitrag geholfen hat, dann teile ihn – das hilft uns besonders – und falls du zusätzliche Fragen hast, schreibe diese doch einfach in die Kommentare!

Wir freuen uns über dein Feedback.

Das könnte Sie auch interessieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert