Was sind die Core Web Vitals (CWV)?

Die Core Web Vitals (CWVs) sind drei Messungen der Web Performance, die sich darauf auswirken, wo eine Website in den Suchmaschinenergebnissen erscheint: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).

Lernziele

Nach Lektüre dieses Artikels können Sie Folgendes:

  • Liste der drei Core Web Vitals
  • Beschreiben Sie, wie die Core Web Vitals die Suchmaschinenoptimierung (SEO) beeinflussen
  • Wissen, wie man die Core Web Vitals einer Website verbessert

Ähnliche Inhalte


Möchten Sie noch mehr erfahren?

Abonnieren Sie theNET, Cloudflares monatliche Zusammenfassung der beliebtesten Einblicke in das Internet!

Lesen Sie die Cloudflare Datenschutzrichtlinie, um zu erfahren, wie wir Ihre persönlichen Daten sammeln und verarbeiten.

Link zum Artikel kopieren

Steigern Sie die Leistung Ihrer Website mit Cloudflare Pro und unseren Speed-Tool-Add-ons

Was sind die Core Web Vitals (CWV)?

Die Core Web Vitals (CWV) sind ein Satz von drei Metriken für die Web-Performance. Die Suchmaschine von Google misst diese drei Metriken und berücksichtigt sie, wenn sie entscheidet, welche Seiten in den Suchergebnissen angezeigt werden sollen. SEO-Experten sollten die Core Web Vitals ihrer Webseiten also als Teil einer ganzheitlichen Strategie optimieren, um die Rankings dieser Seiten zu verbessern.

Die CWVs sind:

  1. Largest Contentful Paint (LCP), das die Ladegeschwindigkeit misst
  2. First Input Delay (FID), womit die Seiteninteraktivität gemessen wird
  3. Cumulative Layout Shift (CLS), womit die visuelle Stabilität gemessen wird

Was ist das Google Page Experience Update?

Während die Seitenladezeit schon lange ein wichtiger Bestandteil von SEO ist, kündigte Google 2020 an, dass die CWVs Mitte 2021 Teil seines Ranking-Algorithmus werden würden. Diese Maßnahme nennt man das Google Page Experience Update.

In der Ankündigung erklärte Google, dass die CWVs in die Seitenerlebnissignale einfließen würden, die bei der Bestimmung des Suchrankings einer Seite helfen. Zu den weiteren Faktoren für das Seitenerlebnis gehören HTTPS-Sicherheit, Mobilfreundlichkeit und das Fehlen oder Vorhandensein von aufdringlichen Interstitials (wie Pop-ups). Das Ziel des Updates war es, Webseiten für eine positive Nutzererfahrung zu belohnen.

Wie wirken sich die Core Web Vitals auf SEO aus?

Alle Suchmaschinen analysieren Websites mit Hilfe von Bots, so genannten Webcrawlern oder Webspidern. Diese Bots erkennen die Inhalte einer Website und bestimmen, wann die Website als Antwort auf eine Abfrage angezeigt werden soll. Die Web Performance gehört zu den Aspekten einer Website, die von Googles Bots überprüft werden.

Es ist nicht genau bekannt, wie stark sich LCP, FID und CLS auf die die SEO auswirken, da Google seine Ranking-Algorithmen weitgehend geheim hält. Aber die CWVs beeinflussen SEO in erheblichem Maße. Viele Branchenbeobachter haben in Fallstudien nachgewiesen, dass die CWVs einer Website zu Verbesserungen oder Verlusten in den Suchergebnissen geführt haben.

Wie funktioniert das in der Realität? Nehmen wir an, Google muss sich entscheiden, ob es die Website A oder die Website B bei der Abfrage „Was ist ARPANET?“ an die ersten Plätze der Suchergebnisse setzen soll. Sowohl Website A als auch Website B haben einen guten Ruf, was Informationen über die Internetgeschichte angeht, und beide bieten ähnlich detaillierte Informationen zum Thema ARPANET. Wenn Website A schneller lädt, schneller reagiert und beim Laden weniger holpert als Website B, wird der Google-Algorithmus wahrscheinlich Website A ganz oben in den Suchergebnissen anzeigen – auch wenn beide Websites ein ähnliches Kaliber an Informationen bieten.

SEO-Ranking Beispiel – Website A an der Spitze der Suchergebnisse

(Suchmaschinen-Rankings sind komplexer als in diesem Beispiel und Dutzende von Faktoren wirken sich auf die Platzierung einer Website in den Suchergebnissen aus).

Warum bezieht Google die Web-Performance in seine Ranking-Entscheidungen ein?

Suchmaschinen wie Google möchten den Suchenden so schnell wie möglich die relevantesten Informationen liefern. Verzögerungen bei der Ladezeit frustrieren die Nutzer – umgekehrt erhöhen schnell ladende Seiten die Wahrscheinlichkeit, dass Nutzer wiederkommen. Auch wenn Google heute die überwiegende Mehrheit des englischsprachigen Suchmarktes beherrscht, kann eine schlechte Nutzererfahrung die Suchenden dazu veranlassen, sich an andere Informationsquellen zu wenden.

Aus ähnlichen Gründen berücksichtigen auch andere Suchmaschinen wie DuckDuckGo und Bing die Performance von Webseiten – obwohl, wie bei Google, nicht genau bekannt ist, wie ihre Seitenranking-Algorithmen funktionieren.

Was ist Largest Contentful Paint (LCP)?

Largest Contentful Paint misst die Zeit, die benötigt wird, um den größten Teil einer Webseite zu laden. Dabei handelt es sich in der Regel um ein Bild oder einen Textblock.

Die Google-Richtlinien stufen eine LCP-Messung unter 2,5 Sekunden als „gut“ ein. Schneller ist jedoch immer besser.

LCP misst nicht, wie lange es dauert, eine ganze Webseite zu laden, aber es bietet einen guten Anhaltspunkt für die Ladegeschwindigkeit einer Webseite. Und in der Regel ist das größte Element auf einer Webseite der Hauptinhalt, sodass seine Ladezeit oft mit dem Zeitpunkt übereinstimmt, an dem der Nutzer die Seite als geladen wahrnimmt.

Eine frühere Version der LCP-Metrik ist First Meaningful Paint (FMP). Sie misst, wann der primäre Inhalt einer Seite sichtbar wird. Google hat diese Metrik für unzuverlässig befunden und sie inzwischen aus einigen seiner Reporting-Tools entfernt.

Was ist First Input Delay (FID)?

First Input Delay ist ein Maß dafür, wie lange es dauert, bis ein Nutzer, der zum ersten Mal versucht, mit einer Webseite zu interagieren, eine Reaktion von der Seite erhält. Mit anderen Worten: FID gibt an, wie schnell eine Person zum ersten Mal auf den Bildschirm klicken und etwas tun kann. Nach den Richtlinien von Google beträgt eine „gute“ FID einer Webseite 100 Millisekunden oder weniger.

Ein Beispiel für FID: Angenommen, Alan besucht eine Webseite mit dem Titel „How to polish your shoes.“ Er sieht ein Karussell mit Fotos von Schuhcreme und klickt auf den rechten Pfeil, um zum nächsten Foto zu navigieren. Die FID ist die Zeit, die zwischen dem Anklicken des Pfeils und dem Laden des nächsten Fotos vergeht.

Die FID misst nicht, wie lange es dauert, bis das angeforderte Ereignis tatsächlich eintritt – wie lange Alans Browser braucht, um das Laden des nächsten Fotos abzuschließen. Es misst nur die Zeit zwischen der Anfrage und dem Zeitpunkt, zu dem die Anfrage erfüllt wird.

Beachten Sie, dass es sich bei der FID um eine „Feldmetrik“ handelt, d. h. um etwas, das auf der Grundlage der Beobachtung echter Nutzer und nicht hypothetisch oder in einem "Labor" gemessen wird.

Einige alternative „Labormetriken“ sind Total Blocking Time (TBT) und Time to Interactive (TTI). TBT misst die Zeit, die zwischen dem First Contentful Paint (FCP) und der TTI vergeht. FCP misst die Zeit zwischen dem Beginn des Ladevorgangs und dem Laden der Elemente auf dem Bildschirm des Nutzers. Wie der Name schon sagt, misst TTI die Zeit, die vergeht, bis Elemente als geladen erscheinen und ein Nutzer tatsächlich mit ihnen interagieren kann.

Was ist Cumulative Layout Shift (CLS)?

CLS misst, wie stark eine Webseite beim Laden „springt“. Genauer gesagt misst es die größten „Bursts“ von Layoutverschiebungen auf der Seite. In den Google-Richtlinien heißt es, dass eine „gute“ CLS-Messung gleich oder kleiner als 0,1 ist.

Eine Layoutverschiebung liegt vor, wenn sich der Inhalt der Seite nach oben, unten oder in eine andere Richtung bewegt, als er ursprünglich angezeigt wurde. Im Kontext dieser Metrik ist ein Burst eine Gruppe von Layoutverschiebungen, die alle innerhalb einer Sekunde aufeinander folgen. Ein Burst kann bis zu fünf Sekunden lang sein und eine beliebige Anzahl von Layoutverschiebungen enthalten.

Stellen Sie sich vor, dass Alan, nachdem er die Seite „So putzen Sie Ihre Schuhe“ geladen hat, versucht, auf den Pfeil nach rechts zu klicken, um das nächste Bild im Karussell zu sehen. Das Bildkarussell bewegt sich jedoch plötzlich weiter nach unten auf der Seite und Alan klickt stattdessen auf einen Text, der oberhalb des Karussells geladen wird. Die Webseite hat sich verschoben, weil nicht alle Bilder gleichzeitig geladen wurden, und Alan ist verwirrt.

Eine solche Webseite hat wahrscheinlich eine schlechte CLS-Bewertung. Sie hat sich eindeutig stark verschoben und das Fotokarussell um Dutzende oder Hunderte von Pixeln nach unten verlagert.

Wie CLS gemessen wird

Google berechnet die CLS-Bewertungen anhand der folgenden Gleichung:

Auswirkungsanteil * Abstandsanteil = Layoutverschiebungswert

  • Der Auswirkungsanteil ist der Prozentsatz des Bildschirms, der sich bei einer Layoutverschiebung verändert.
  • Der Abstandsanteil misst, wie weit sich ein Element auf dem Bildschirm bewegt, ebenfalls als Prozentsatz des Bildschirms.

Wenn eine Webseite auf einem Bildschirm geladen wird, der 400 Pixel hoch ist, und sich 200 dieser Pixel beim Laden eines neuen Elements verschieben, beträgt der Auswirkungsanteil 200/400, also 50 %. Wenn das neue Element ein anderes Element um 50 Pixel nach unten verschiebt, beträgt der Abstandsanteil 50/400, also 12,5 %.

Core Web Vitals – CLS-Beispiel – Auswirkungsanteil von 200 Pixeln und Abstandsanteil von 50 Pixeln

Zur Berechnung des Layoutverschiebungswerts schreiben Sie diese beiden Prozentsätze als Dezimalzahlen und multiplizieren sie dann miteinander:

0,50 * 0,125 = 0,0625

Wenn dies die größte Verschiebung auf der Webseite ist, beträgt der CLS-Wert der Webseite 0,0625.

Obwohl sich eine Webseite im Idealfall beim Laden überhaupt nicht bewegt, ist dieser Wert immer noch akzeptabel. Experten empfehlen einen CLS-Wert von 0,10.

Wie Core Web Vitals gemessen werden

Es gibt viele Instrumente für die Überprüfung von CWVs. Die folgenden Angebote stammen alle direkt von Google:

  • Chrome UX Report (CrUX) bietet Felddaten, die von Chrome-Nutzern gemeldet wurden, und liefert Websitebetreibern Daten darüber, wie Nutzer ihre Website tatsächlich erleben.
  • Google Lighthouse ist ein kostenloses Tool, das Labormetriken über CWVs liefert. Es bietet umsetzbare Erkenntnisse zur Verbesserung von Performance, SEO, Barrierefreiheit und mehr.
  • Google PageSpeed Insights kombiniert die Funktionen von CrUX und Lighthouse und bietet sowohl Feld- als auch Labordaten zu CWVs und anderen Web Vitals. Mit PageSpeed Insights können Nutzer die Performance von Websites überprüfen, unabhängig davon, ob sie diese besitzen oder nicht. Hier ist ein Beispiel für einen PageSpeed Insights-Bericht.
  • Google Search Console basiert zum Teil auf CrUX-Felddaten und liefert CWV-Performancedaten nach URL oder URL-Gruppen.

So können Sie Ihre Core Web Vitals verbessern

Wie Sie LCP verbessern können

  • Verwenden Sie ein Content Delivery Network (CDN): CDN cachen Inhalte an Orten in der ganzen Welt, sodass die Inhalte die Nutzer schneller erreichen.
  • Optimieren Sie Bilder: Bilder sind oft das größte Element einer Seite. Wenn Sie die Größe der Bilddateien reduzieren, können Sie die Ladezeit eines Bildes verkürzen.
  • Implementieren Sie Lazy-Loading: Beim Lazy-Loading werden Website-Ressourcen nur dann geladen, wenn ein Nutzer sie benötigt. Dies macht das Laden von Websites bis zu einem gewissen Grad effizienter, aber Untersuchungen deuten darauf hin, dass eine übermäßige Nutzung dieses Features mit einem niedrigeren LCP einhergeht. Aus diesem Grund empfiehlt Google, Lazy Loading-Bilder auf den Bereich „below the fold“ zu beschränken, d. h. auf die Teile der Webseite, zu denen der Nutzer erst scrollen muss.

Wie Sie den den FID verbessern

  • Verringern Sie die Größe von JavaScript-Funktionen: Codelastige dynamische Webseiten können zu Eingabeverzögerungen führen, weil der Browser vor der Ausführung warten muss, bis der gesamte Code geladen ist. Durch JavaScript-Minifikation lässt sich dieser Prozess beschleunigen.
  • Erstellen Sie statische Webseiten: Statische HTML-Webseiten werden viel schneller geladen als dynamische Seiten, insbesondere wenn sie über ein CDN verteilt werden. Informieren Sie sich über statische Website-Generatoren oder über Jamstack, eine Entwicklungsphilosophie, die den Schwerpunkt auf statische Inhalte legt.
  • Entfernen Sie unnötige Tools und Skripte von Drittanbietern:
  • Auch das Laden zusätzlicher Tools auf Ihrer Website kann die Performance beeinträchtigen. Wenn Sie die Anzahl der Drittanbieter-Tools auf einer Website reduzieren, können Sie die FID und die Geschwindigkeit der Website im Allgemeinen verbessern.

Wie Sie CLS verbessern können

  • Minimieren Sie Seitenelemente von Drittanbietern: Elemente von Drittanbietern werden an anderen Stellen geladen als der Rest der Seite. Aus diesem Grund werden sie möglicherweise zu einem etwas anderen Zeitpunkt geladen, wodurch sich das Layout der Seite beim Laden verändert. Wenn Sie diese Elemente von Drittanbietern so wenig wie möglich verwenden, wird sich das Layout weniger stark verschieben.
  • Reservieren Sie Platz für eingebettete Inhalte: Viele Elemente von Drittanbietern, wie z. B. Anzeigen, sind für die Funktionalität oder das Geschäftsmodell einer Website unverzichtbar und können nicht weggelassen werden. Entwickler können auf der Webseite Platz für diese Elemente reservieren, damit sie geladen werden, bevor der Browser das eigentliche Element abruft.
  • Stellen Sie sicher, dass Bilder in der optimalen Größe geladen werden: Dies ist ein etwas anderer Prozess als die Optimierung von Bildern im Allgemeinen. Desktop-Computer, Tablets und Smartphones benötigen alle Bilder in leicht unterschiedlicher Größe, da ihre Bildschirme unterschiedlich groß sind. Wenn ein Browser zuerst das große, für Desktop-Computer optimierte Bild lädt und dann das für Mobilgeräte optimierte Bild abruft, weil es sich bei dem verwendeten Gerät um ein Smartphone handelt, kann dies dazu führen, dass der Inhalt der Seite beim Laden des anderen Bildes springt.
  • Geben Sie Höhe und Breite für Bilder und Videos an: Die Eigenschaften Höhe und Breite teilen den Browsern mit, wie groß ein Bild sein wird, damit sie diesen Platz reservieren können, bevor das Bild oder Video geladen wird. In unserem Artikel über HTML5-Videos erfahren Sie mehr darüber, wie das bei Videos funktioniert.
  • Verwenden Sie CSS-Seitenverhältnis-Boxen: Es gibt eine Reihe von CSS-Techniken, die Entwickler verwenden können, um den Platz für ein Seitenelement mithilfe von Seitenverhältnissen zu erhalten – erfahren Sie hier mehr.

Welche anderen Performance-Metriken sind wichtig?

CWVs sind zwar die Metriken, die Google SEO-Experten ans Herz gelegt hat, aber sie sind nicht die einzigen Web Vitals, die es gibt. First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI) und Time to First Byte (TTFB) wirken sich zwar nicht in gleichem Maße auf SEO aus, aber sie können Entwicklern helfen, Probleme zu erkennen, die die CWVs beeinflussen.

(Für sich allein genommen ist TTFB keine besonders nützliche Metrik. Aber sie kann auf zusätzliche Probleme hinweisen, die die Entwickler beheben müssen.)

Wie Cloudflare Ihre CWVs verbessert

Cloudflare bietet eine Reihe von Diensten zur Verbesserung der CWVs:

  • Das Content Delivery Network (CDN) von Cloudflare cacht statische und dynamische Inhalte in einem globalen Netzwerk, das mehr als 330 Städte in über 120 Ländern umspannt. Dadurch werden Websites schneller geladen, was allen drei CWVs zugute kommt.
  • Cloudflare Images bietet eine Funktion zur Größenanpassung. Damit können Sie Bilder komprimieren und die Ladegeschwindigkeit Ihrer Website weiter erhöhen, insbesondere für LCP.
  • Cloudflare Zaraz lädt die Ressourcen von Drittanbietern in die Cloud und weg vom Browser, was Metriken wie FID und CLS verbessert.