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

Link zum Artikel kopieren

Was sind die Core Web Vitals (CWV)?

Bei den Core Web Vitals (CWV) handelt es sich um eine Reihe von drei Web-Performance-Metriken. Die Suchmaschine von Google misst diese drei Metriken, um zu bestimmen, welche Websites einem Nutzer bei einer Suche angezeigt werden sollen. Während Seitenladezeit schon lange ein wichtiger Bestandteil der Suchmaschinenoptimierung (SEO) ist, konzentriert sich Google seit Mitte 2021 bei seinen Ranking-Algorithmen speziell auf die CWVs.

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

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.

Die genauen Auswirkungen von LCP, FID und CLS auf die SEO sind nicht bekannt, da Google seine Ranking-Algorithmen weitgehend geheim hält. Aber die CWVs beeinflussen SEO in hohem Maße. Google kündigte die Aufnahme von CWV in seinen Algorithmus im Juni 2021 an. Und viele Branchenbeobachter haben Fallstudien durchgeführt, die belegen, dass sich das Ranking einer Website basierend auf Änderungen bei den CWVs verbessert oder verschlechtert hat.

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.

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

Warum berücksichtigt Google die Web Performance?

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)?

LCP 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.

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.

Experten empfehlen eine LCP-Zeit von höchstens 2,5 Sekunden. Aber schneller ist immer besser.

Was ist First Input Delay (FID)?

FID 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, wann eine Person zum ersten Mal auf den Bildschirm klicken und etwas tun kann. Im Idealfall beträgt die FID einer Webseite 100 Millisekunden oder weniger.

Nehmen wir an, Alan besucht eine Webseite mit dem Titel „Wie Sie Ihre Schuhe polieren“. Er sieht oben auf der Seite ein Karussell mit Fotos von Schuhreinigungsprodukten und klickt auf den Pfeil nach rechts, um zum nächsten Foto zu navigieren. Die FID ist die Zeitspanne zwischen dem Klick auf den Pfeil und dem Beginn des Ladevorgangs für das nächste Foto.

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.

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.

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 %.

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 können Entwickler ihre Websites für diese drei Metriken optimieren?

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.

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.

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.

Cloudflare bietet auch mehrere Dienste speziell zur Verbesserung von Core Web Vitals an. In diesem Artikel erfahren Sie mehr darüber: Wie Sie Cloudflare nutzen, um Ihre Website für Core Web Vitals zu optimieren.

Welche anderen Performance-Metriken sind wichtig?

Neben den CWVs gibt es eine Reihe weiterer „Web Vitals“. First Contentful Paint (FCP), DOMContentLoaded (DCL), Time to Interactive (TTI) und Time to First Byte (TTFB) wirken sich 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.)

Mehr Informationen finden Sie in diesem Whitepaper, das auch ein Glossar enthält, in dem eine Reihe von Performance-Metriken definiert sind.