Bereits ihre Ankündigung hatte in der SEO-Welt für einigen Wirbel gesorgt. Und jetzt ist es endgültig so weit: Seit Mitte Juni werden die Core Web Vitals Schritt für Schritt Teil des Ranking-Algorithmus von Google. Abgeschlossen werden soll das Update allerdings erst Ende August. Aber was sind die Core Web Vitals eigentlich und was muss ich tun, um die Kriterien zu erfüllen und weiterhin gut zu ranken?

Was sind die Core Web Vitals?

Die Core Web Vitals sind Ladezeiten-Metriken, die Teil der von Google gemessenen Nutzererfahrung sind. Sie basieren auf Felddaten von realen Nutzern, die Google über Chrome erfasst. Die Core Web Vitals umfassen 3 Kennzahlen: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und den First Input Delay (FID).

Eingesehen können die Core Web Vitals beispielsweise bei PageSpeed Insights:
Core Web Vitals AnalyticaA PageSpeed Insights

Und in der Search Console:
Core Web Vitals Search Console

Largest Contentful Paint (LCP)

Der LCP ist ein Wert, der misst, wann das größte einzelne sichtbare Element komplett angezeigt wird.

LCP Metrik

Laut Google sollten Websites einen Largest Contentful Paint von 2,5 Sekunden oder weniger anstreben. Folgende Elemente werden beim LCP berücksichtigt:

  • <img>-Element
  • <image>-Element innerhalb eines <svg>-Elements
  • Das Bild innerhalb eines <video>-Elements
  • Ein Hintergrundbild, das mit der Funktion url() geladen wird
  • Text-Blöcke

In PageSpeed Insights kann die LCP-Metrik im Abschnitt „Diagnose“ eingesehen werden.

LCP verbessern:

  • Bildkomprimierung: Hierzu gibt es verschiedene Tools wie png online
  • Bilder-Größe: Die Bildabmessungen sollten zur Bildschirmgröße passen. Dazu kann das srcset-Attribut verwendet werden.
  • Das Bild vorabladen (Preload): Über link rel=preload kann das Bild vorabgeladen werden, was sowohl die tatsächliche als auch die wahrgenommene Leistung verbessern kann.
  • Blockierende Ressourcen entfernen: Wenn der Browser auf eine große Render-Blocking-Ressource wie CSS oder JavaScript stößt, unterbricht er das Rendern des übrigen Inhalts, und muss diese erst herunterladen und analysieren.
  • Bilder etc. über ein CDN laden: Gerade für internationale Websites empfiehlt sich, große Ressourcen auf einem CDN mit seinen global verteilten Server-Standorten zu hosten. Denn je weiter der User Serverstandort entfernt ist, desto länger sind auch seine Ladezeiten.

Weitere Informationen zur Largest Contentful Paint Optimierung erhaltet Ihr auch auf dem Google Webentwicklungsprojekt web.dev.

Cumulative Layout Shift

Der CLS misst, wie stark sich Elemente bewegen bzw. wie stabil das Seitenlayout ist. Er berücksichtigt die Größe des Inhalts, der sich bewegt, sowie das Ausmaß der Bewegung.

Die Metrik wurde ursprünglich “ Cumulative“ genannt, weil die Punktzahl jeder einzelnen Verschiebung über den gesamten Seitenbesuch summiert wurde. Das führte jedoch zu negativem Feedback für Google, weil dadurch größere Seiten bzw. Apps mit längerer Sitzungsdauer einen deutlichen Nachteil hatten. Inzwischen hat Google reagiert und die Metrik auf den stärksten „Layout Shift“ während einer Sitzung gekappt, sodass er jetzt im eigentlichen Sinne nicht mehr „kumulativ“ ist, sondern nur noch die schlimmste Instabilität einer Seite misst.

CLS Metrik

Laut Google ist der CLS eine wichtige Metrik, können doch Layout-Verschiebungen für Benutzer sehr störend sein. Ein Beispiel für die Beeinträchtigung der Nutzererfahrung durch einen Layout Shift, welches Google anführt, ist, dass sich während des Lesens eines Artikels plötzlich Elemente auf der Seite verschieben, sodass man aus dem Konzept gebracht wird und seine Stelle wieder finden muss. Dies ist Google zufolge im Web ein häufiges Problem, auch kommt es beispielsweise zu Layout Shifts, wenn man versucht, auf die Schaltflächen „In den Warenkorb“ oder „Suchen“ (frühzeitig) zu klicken.

Hier der Layout Shift der Startseite von otto.de, erzeugt mit dem Layout Shift GIF Generator.

Ein ebenfalls nützliches Tool in diesem Zusammenhang ist der WebPageTest (im Test unser Kunde sport-bittl.com):

Sport Bittl im Test von WebPageTest

Im Filmstrip-Modus könnt Ihr Euch genau anschauen, wann sich etwas auf Eurer Seite bewegt.

Vorher solltet Ihr allerdings einige Einstellungen vornehmen:

  • Highlight Layout Shifts auswählen
  • Thumbnail Size: Huge
  • Thumbnail Interval: 0.1 sec

Im Anschluss noch einmal das Beispiel von otto.de:

Core Web Vitals im WebPageTest Otto Filmstrip

Bei PageSpeed Insights könnt Ihr den Cumulative Layout Shift selbstverständlich auch einsehen – und zwar wieder unter „Diagnose“ (Beispiel otto.de).

Cumulative Layout Shift PageSpeed Insights

Häufige Ursachen für Layout Shifts sind:

  • Bilder ohne Abmessungen (width, height)
  • Banner und Werbeanzeigen
  • Iframes ohne Abmessungen
  • Einbettung von Inhalten mittels JavaScript
  • Spätes Anwenden von Stilen oder Schriftarten

Ein Tipp zur Optimierung des CLS ist, wichtige Schriftarten vorab zu laden (Preload). Natürlich sollten auch immer die Bild-Abmessungen angegeben werden. Ein weiterer Tipp ist die Vermeidung dynamischen Contents, beispielsweise in Form einer Newsletter-Anmeldung, oberhalb des eigentlichen Inhalts.

Weitere Informationen diesbezüglich erhaltet Ihr auch wieder bei web.dev.

First Input Delay

Der „FID“ misst die Zeit von der ersten Nutzer-Interaktion bis zum Reaktions-Zeitpunkt der Seite. Man könnte die Metrik auch als Website-Reaktionsgeschwindigkeit bezeichnen. Scrollen oder Zoomen werden vom First Input Delay nicht erfasst, aber zum Beispiel Folgendes:

  • Klicken auf einen Link oder ein anderes Element
  • Auswählen eines Dropdown-Menüs
  • Eingabe von Text in ein Feld
  • Anklicken eines Kontrollkästchens.

FID Metrik

Um ein gutes Nutzererlebnis zu bieten, sollten Websites laut Google eine Verzögerung der ersten Interaktion von 100 Millisekunden oder weniger anstreben.

Der FID ist eine Feldmetrik und kann nicht in einer Laborumgebung simuliert werden – daher gibt es auch keine Tools, die ihn messen. Google empfiehlt als Alternative die „Total Blocking Time“ als Wert heranzuziehen, die zum Beispiel vom schon vorher genannten Tool WebPageTest erfasst wird.

Diese Dinge können u. a. umgesetzt werden, um den First Input Delay zu optimieren:

  • Reduktion von Third-Party-Code
  • Verringerung der JavaScript-Ausführungszeit (u.a. nicht verwendetes JavaScript zurückstellen (Defer))
  • Anzahl der Anfragen (Requests) niedrig halten und die Übertragungsgrößen klein

Auch hier erhaltet Ihr weitere Informationen bei web.dev.

12 Fakten rund um die Core Web Vitals

  1. Die Metriken gibt es sowohl für Desktop als auch für Mobile, aber vorerst werden nur die mobilen Signale im Google Ranking-Algorithmus verwendet. Seit März gilt zudem zu 100 % Mobile-First-Indexierung. Vor diesem Hintergrund ist es sinnvoll, sich in erster Linie auf die mobilen Signale zu konzentrieren.
  2. Die Daten entstammen dem Chrome User Experience Report (CrUX), das heißt von angemeldeten Chrome-Nutzern.
  3. Die Core Web Vitals sind Bestandteil des Page Experience Updates, das ab Mitte Juni ausgerollt wird. Endgültig abgeschlossen wird aber ihre Implementierung erst Ende August.
  4. Das 75. Perzentil der Nutzer bzw. Page-Views ist für die Bewertung der Performance entscheidend. Das heißt, wenn mindestens 75 Prozent der Seitenaufrufe „gut“ sind bzw. den jeweiligen Schwellenwert erreichen, wird die Website für die entsprechende Kennzahl als „gut“ eingestuft. Umgekehrt bedeutet das auch, dass eine Seite als „schlecht“ bewertet wird, wenn mindestens 25 Prozent der Seitenaufrufe „schlecht“ sind.
  5. Wenn möglich, werden die Metriken für jede Seite ermittelt. Die Bewertung erfolgt auf Seitenebene. Sollten nicht genug Signale vorhanden sein, können auch nur Teile der Website erfasst werden.
  6. Für eine als gut bewerte Page Experience muss eine Seite alle empfohlenen Werte der Core Web Vitals erfüllen.
  7. Im Zuge der Einführung der neuen Metriken bzw. des Page Experience Updates beendet Google endgültig, dass AMP-Seiten bevorzugt in den Top Stories auf Mobilgeräten platziert werden. Zudem werden AMP-Seiten auch nicht mehr mit dem Blitz-Symbol gekennzeichnet. Die Verwendung von AMP kann sich jedoch durchaus vorteilhaft auf die Core Web Vitals auswirken.
  8. Die Metriken können im Laufe der Zeit angepasst werden, und die Schwellenwerte ebenso. Google hat bereits einige Änderungen vorgenommen, und es ist durchaus wahrscheinlich, dass in Zukunft weitere grundlegende Anpassungen vorgenommen werden.
  9. Webseiten, die auf ’noindex‘ sind, werden ebenfalls bei den Core Web Vitals erfasst.
  10. Die Core Web Vitals sind Teilmenge der Web Vitals, die aber vorerst nicht zur Ranking Berechnung genutzt werden.
  11. Mit dem neuen Bericht zur Nutzerfreundlichkeit in der Search Console erhalten Websitebetreiber Einblicke in den Stand ihrer Website in Hinblick auf die Nutzererfahrung aus Sicht von Google. Neben den Core Web Vitals wird zum Beispiel auch die mobile Optimierung oder die Implementierung von HTTPS im Bericht berücksichtigt.
  12. Die Core Web Vitals sind vorerst nur ein geringer Rankingfaktor.

Tools zur Ermittlung der Core Web Vitals

Grundsätzlich sind in Hinblick auf die Core Web Vitals Labordaten und Felddaten zu unterscheiden. Wie bereits oben erwähnt werden zu ihrer Ermittlung ausschließlich Felddaten herangezogen. Der Unterschied zwischen Labor- und Felddaten besteht darin, das Letztere die Daten von realen Nutzern auch vor dem Hintergrund ihrer Geräte und Netzwerkbedingungen, ihres Caching, etc. sammeln, während Labordaten immer unter den gleichen Bedingungen getestet werden, in der Hoffnung, dass die Testergebnisse reproduzierbar sind.

Felddaten LCP FID CLS
PageSpeed Insights
Google Search Console: Core Web Vitals-Bericht
Chrome User Experience Report

 

Labordaten LCP FID CLS
PageSpeed Insights
WebPageTest ✘*
Lighthouse auf web.dev ** ✘*

 

* Wie von Google empfohlen, kann bei diesen Tools als Alternative die „Total Blocking Time“ verwendet werden, um den FID unter Laborbedingungen abzuschätzen.

** Weitere Methoden Lighthouse zu nutzen, findet Ihr u. a. hier.

 

Fazit

Auch wenn derzeit die Auswirkungen der Core Web Vitals nicht überschätzt werden sollten, wird Google auch in Zukunft seine Bemühungen, das Web nach seinen Vorstellungen zu gestalten, nicht einstellen. Und in Sachen organischen Traffic wird man an der Google Search auch weiterhin nicht vorbeikommen. Wir haben in den letzten Wochen teilweise starke Änderungen bei unterschiedlichen Websites feststellen können – sowohl im positiven wie auch im negativen. Derzeit tut sich also einiges bei Google: angefangen bei weiteren Core Updates über das besprochene Page Experience Update bis hin zum gerade erst ausgerollten Spam Algorithm Update, bei dem die zweite „Hälfte“ in dieser Woche in Kraft trat. Die Core Web Vitals sind dabei nur das Flaggschiff für diese tiefgreifenden Anpassungen des Ranking-Algorithmus. In jedem Fall ist es wichtig, up-to-date zu bleiben und auf Änderungen schnell zu reagieren. Es wird ein heißer Sommer im Bereich SEO, das ist jetzt schon abzusehen, welche Rolle dabei die Core Web Vitals spielen, ist derzeit allerdings nur schwer abzuschätzen.