Core Web Vitals

Was sind die Core Web Vitals?

Die Core Web Vitals sind Metriken, die Google entwickelt hat, um die User Experience auf Websites zu verbessern. Die Vielfalt an Tools zur Analyse der Ladegeschwindigkeit war einer der Faktoren, die Google bewogen haben, all diese Metriken zu vereinheitlichen, um die Komplexität der Ladezeit-Optimierung etwas zu reduzieren. Diese Initiative will uns dazu bringen, uns auf diese „Qualitätssignale" zu konzentrieren, die so wichtig für eine optimale User Experience sind.

Google fasst in wenigen Worten zusammen, worauf die Core Web Vitals abzielen:

• ›

  Ladeerlebnis

• ›

  Interaktivität

• ›

  Visuelle Stabilität der Seiteninhalte

Largest Contentful Paint oder LCP

Der LCP oder Largest Contentful Paint ist eine Metrik, die uns die Ladezeit für das „größte" sichtbare Element angibt, das verfügbar und nutzbar sein soll. Anders gesagt: Google sagt, dass die Elemente, die wir „Above the Fold" sehen, schnell laden und lesbar sein müssen, damit der Nutzer mit ihnen interagieren kann.

Dabei sollte klar sein, dass Elemente, die erst beim Klicken oder Scrollen erscheinen, den LCP nicht beeinflussen. Der größte Inhalt kann ein Textblock, ein Video, ein Bild usw. sein.

LCP-Statusklassifizierung nach Zeiten. Bild © web.dev

Welche Zeit hält Google für optimal?

Wie wir im Diagramm sehen, hält Google eine maximale LCP-Ladezeit für eine gute User Experience von unter 2,5 Sekunden für optimal. Wichtig: Während des Ladens kann sich das LCP-Element ändern.

Wie finde ich den LCP einer URL heraus?

Direkt im Chrome-Browser können wir über einen Lighthouse-Audit herausfinden, was Google als das größte zu ladende Element einstuft. So geht's:

Welche Faktoren können den LCP-Ladezeitpunkt beeinflussen?

Mehrere Faktoren tragen dazu bei, dass die LCP-Ladezeit höher als erwartet ausfällt. Diese Elemente bzw. Aktionen sind:

• ›

  Server-Antwortzeit

• ›

  Datenbankabfragen

• ›

  API-Antworten, die lange brauchen

• ›

  CSS oder JS, das das Rendering blockiert

• ›

  Verzögerungen beim Laden anderer Ressourcen

• ›

  Nicht optimierte Bilder

• ›

  Etc.

First Input Delay oder FID

Der FID oder First Input Delay ist eine Metrik, die anzeigt, wie lange die Seite braucht, um auf eine Interaktion des Nutzers mit einem Element zu reagieren.

Metriken aus PageSpeed

Im PageSpeed-Tool, das Google vor einiger Zeit allen zur Verfügung gestellt hat, sehen wir den Verweis auf diese Metrik. Werte unter 100 ms gelten als gut.

FID-Statusklassifizierung nach Zeiten. Bild © web.dev

Die häufigsten Ursachen für Probleme mit dieser Metrik (FID) liegen in der Ausführung von JavaScript. Wir müssen also herausfinden, welcher Teil des Codes dafür sorgt, dass die Seite Zeit braucht, um auf Interaktion zu reagieren. Persönlich habe ich dieses Problem mit Werbungs-JS-Loads erlebt.

Cumulative Layout Shift oder CLS

Der Cumulative Layout Shift ist eine Metrik, die Grenzen für das Laden von Elementen setzt, die die Anzeige während des Ladens verändern. Es geht darum, den Elementen auf dem Bildschirm Stabilität zu geben, damit sich die Ansicht nicht verschiebt, während andere Ressourcen nachgeladen werden.

Google hält es (Google und jeder Nutzer) für sehr nervig, wenn man begonnen hat, mit einer Seite zu interagieren (Lesen, Scrollen usw.) und ein später ladendes Element die Position des Nutzers im Inhalt verschiebt – sodass er korrigieren und scrollen muss.

Dieses Beispiel hilft, die Funktionsweise der Metrik zu verstehen. Zu Beginn sehen wir den geladenen Inhalt links. Wenn Google von Stabilität spricht, meint Google, dass das Laden eines dritten Elements die zuvor geladenen nicht verschieben darf. Wie auf dem rechten Bild zu sehen, hat das Laden des YouTube-Videos die beiden zuerst geladenen Blöcke nach unten geschoben.

Warum sind die Core Web Vitals wichtig?

Seit es Suchmaschinen gibt – und insbesondere Google – sind immer wieder neue Pflichten für alle hinzugekommen, die mit ihrer Website in den Suchergebnissen auftauchen wollen.

Bessere Erreichbarkeit von allen Geräten, sicheres Surfen unter einem Sicherheitsprotokoll oder Strafen für Websites mit aufdringlicher Werbung (Interstitials) – das waren einige der Schlachten des Tech-Giganten.

Diese Metriken sind Indikatoren von Google, die uns zeigen, welche Teile der Website ein Problem für den Nutzer sein können – aber heißt das, sie sind wichtig?

Egal, ob wir Websites aus „Roboter"-Sicht oder aus „Nutzer"-Sicht sehen: Diese Metriken zeigen, dass unsere Websites nicht so gut funktionieren, wie sie sollten. Wir haben in mehreren Studien gesehen, wie stark die Ladezeit Conversions und die Geduld der Nutzer beeinflusst. Aktuell beeinflussen sie keine Rankings, aber werden wir diese Metriken deshalb ignorieren?

Wir auf jeden Fall nicht.

Beeinflussen Core Web Vitals das Ranking?

Stand heute wissen wir Folgendes: Metriken zur Verbesserung der User Experience werden immer wichtiger, und einige davon werden bereits in den Suchergebnissen berücksichtigt. Im Artikel vom 28. Mai im Google-Blog wurde angekündigt, dass im Jahr 2021 ein neues Update kommen wird, das mehrere User-Experience-Metriken einbezieht.

Erinnern wir uns nur daran, wie der Mobile First Index und seine Vorankündigungen abliefen. In diesem Fall – mit Bezug auf den Mai-Artikel – gab Google an, dass eine Vorankündigung von mindestens 6 Monaten erfolgen werde. Also: Wird es noch dieses Jahr ein Update geben?

Tools zur Optimierung der Core Web Vitals

Jetzt, wo wir wissen, was Core Web Vitals sind und welche Bedeutung sie in den kommenden Monaten haben werden, ist es Zeit, an der Optimierung dieser Metriken zu arbeiten. Mit verschiedenen Tools können wir die festgestellten Probleme angehen und eine Performance-Verbesserung erreichen.

Lighthouse

Lighthouse ist ein leistungsstarkes Open-Source-Tool, das in Chrome integriert ist. Mit Lighthouse können wir unsere Website auditieren und verschiedene Tests laufen lassen, um Schwachstellen oder optimierungsbedürftige Teile zu identifizieren. Zu diesen gehören auch die Core-Web-Vitals-Metriken.

Bild aus den Ergebnissen eines Lighthouse-Audits

PageSpeed Insights

PageSpeed Insights ist eine weitere Option von Google, mit der wir Performance-Daten unserer Website bekommen. Das Tool zeigt sogar Diagramme der wichtigsten Metriken und ihres Status. PageSpeed Insights basiert auf einem User-Experience-Bericht, der Daten im Vergleich zu anderen Websites liefern soll.

Metriken von PageSpeed Insights

Chrome UX

Chrome User Experience Report ist ein Datensatz, den Google zum Verhalten der Nutzer weltweit bei Chrome bereitstellt. Um auf diese Daten zuzugreifen, brauchst du Big Query und einen Google-Cloud-Account.

Über Google Data Studio wurde der Zugriff vereinfacht – fast alles ist hier in diesem Dashboard bereits aufbereitet.

Chrome Dev Tools

Die Core-Web-Vitals-Metriken lassen sich nicht nur mit Lighthouse analysieren. Tauchen wir in die Entwickler-Tools von Chrome ein, kommen wir zu denselben Schlüssen. Im Tab „Performance" können wir zum Beispiel eine Aufnahme oder einen neuen Ladevorgang machen und wertvolle Informationen darüber bekommen, wie sich unsere URL verhält.

Screenshot aus der Performance-Option der Chrome Dev Tools

Web.Dev

Es gibt immer einen einfacheren Weg – zumindest, wenn es um die Core Web Vitals geht. Auf der offiziellen Website gibt es eine Seite, die jede Metrik im Detail erklärt und Praktiken zur Verbesserung empfiehlt.

Außerdem gibt es im Chrome Store eine Erweiterung, die uns diese Informationen direkt beim Aufruf jeder URL liefert:

Mit einer roten oder grünen Anzeige sehen wir den Status unserer URL bezüglich dieser Metriken:

Screenshot der Ergebnisse aus der Web-Vitals-Erweiterung

Search Console

Die Search Console ist ein unverzichtbares Tool für jeden Webmaster. Eine Funktion wurde hinzugefügt, die uns zeigt, welche URLs Probleme mit den 3 Metriken (LCP, FID und CLS) haben. Im linken Menü gibt es die Option „Core Web Vitals". Wenn wir sie wählen, erscheinen zwei Diagramme mit den Ergebnissen der URLs nach Gerät. Wählen wir das Gerät (Desktop oder Mobile), sehen wir im Detail, welche URLs Probleme haben.

Lass dich nicht von einer hohen URL-Anzahl rechts erschrecken – das ist relativ normal, weil Probleme meist nach Seitentyp auftreten (zum Beispiel Blogposts) und die Optimierung eines Seitentyps die Verbesserung gleich für alle bringt.

Fazit

Diese Tour durch die Core Web Vitals soll uns Metriken vorstellen, die immer stärker an Bedeutung gewinnen werden – und mit denen wir als SEOs oder Webmaster leben werden. Wir empfehlen, alle hier vorgestellten Tools zu nutzen – sie helfen dir definitiv, die WPO-Performance deiner Website zu verbessern.

*Nimmst du die Herausforderung an, die Geschwindigkeit deiner Seite zu verbessern? Mach einen Test mit einem der genannten Tools und schick uns eine Nachricht mit Screenshot. Wir geben dir kostenlos einen Tipp zur Verbesserung! *