Was sind die Core Web Vitals von Google und wie verbessere ich sie?

Die „Core Web Vitals“ sind drei Messwerte, die Google für die Bewertung von Websites heranzieht. Manche Optimierungen könnten größere Umbauten erforderlich machen, andere sind einfacher erledigt. Henning Richters von den netzstrategen erklärt in diesem Beitrag, um welche Messwerte es eigentlich geht, was sie bedeuten und wie sie sich verbessern lassen.

Was genau sind Core Web Vitals?

Im Mai 2020 hat Google offiziell die Core Web Vitals vorgestellt. Zuerst über den Chromium Blog, und später über den Webmaster Central Blog. Google teilte mit, dass die neuen Metriken zum Messen des Nutzungserlebnisses (User Experience, UX) als Rankingfaktoren mit in die Such-Algorithmen aufgenommen werden. Es passiert nicht alle Tage, dass Google Aussagen über Rankingfaktoren offiziell mitteilt. Allein dieser Umstand lässt alle sofort aufhorchen, die sich mit Suchmaschinenoptimierung beschäftigen.

Mit diesen Metriken wird die User Experience einer Webseite bewertet und die Ergebnisse können zum Beispiel in der Google Search Console leicht abgerufen werden. Das bedeutet im Klartext, dass Google misst, wie gut eine Website bei den Besucher*innen ankommt.  

Welche Werte gibt es und was wird warum gemessen?

Die Core Web Vitals bestehen aus drei Werten, mit denen die Erfahrungen der Benutzer mit einer Webseite gemessen werden. Die drei Werte sind LCP, FID und CLS. 

LCP (Largest Contentful Paint) misst die Zeit, die zwischen dem Aufruf der Seite und dem Zeitpunkt vergeht, an dem das größte Element im sofort sichtbaren Bereich („above the fold“) geladen wurde. Das kann zum Beispiel ein Bild, eine Hauptüberschrift oder ein Textabschnitt sein. Bis 2,5 Sekunden ist es ein guter Wert, ab 4 Sekunden wurde der Test nicht bestanden.

FID (First Input Delay) misst die Zeit, die zwischen dem Aufruf der Seite und dem Zeitpunkt vergeht, ab dem die Seite auf Interaktionen des Users reagieren kann. Interaktionen sind zum Beispiel klicken oder scrollen, ein Produkt in den Warenkorb legen oder einen Text hinter einem ausgeblendeten Tab aufrufen. Bis 100 Millisekunden ist es ein guter Wert, ab 300 Millisekunden ist zu viel Zeit vergangen.

Bei CLS (Cumulative Layout Shift) wird gemessen, wie stabil die visuelle Oberfläche einer Seite ist. Damit ist gemeint, dass Elemente ihre Position auf der Seite ändern, ohne dass der User dies erwartet oder durch eine Interaktion ausgelöst hat. Oft sind es Werbebanner, die ganz oben auf der Seite nachgeladen werden, und den gesamten Content nach unten verschieben. Werte bis 0,1 sind gut, ab 0,25 wurde der Test nicht bestanden.

Vorgeschichte der Core Web Vitals

Google ist bestrebt immer die besten Ergebnisse für Suchanfragen zu liefern. Dabei stehen sowohl die Inhalte als auch die Bedürfnisse der Nutzer*innen im Vordergrund. Aber die Inhalte auf den Zielseiten müssen auch in einfacher Art und Weise konsumierbar sein. Was nützen einem die besten Inhalte, wenn man 2 Minuten darauf warten muss? Dann springen Leser*innen oft einfach ab. Oder wenn Werbung den Content verdeckt und man kaum etwas sieht?  Google hat daher schon früh angefangen Werte zu finden, mit deren Hilfe gemessen werden kann, wie schnell die Inhalte für den Nutzer zur Verfügung stehen, und ob die Seite leicht zu bedienen ist.

Zuerst hat die Suchmaschine nur die Zeit gemessen, die vergeht, bis das erste Byte nach dem Seitenaufruf  beim User angekommen war (TTFB = Time To First Byte). Das alleine sagt aber nichts darüber aus, ab wann die User Inhalte tatsächlich im Browser sehen. Trotzdem ist dieser Wert nach wie vor als  sehr wichtig eingestuft.

Später kamen Methoden dazu, mit deren Hilfe gemessen wurde, ab wann Inhalte geladen wurden. Das waren Werte von „Page Complete“ und  „DOMContentLoaded“ über „First contentful paint“ bis zum „First mainful paint“. 

Die waren aber oft ungenau oder zu instabil, um wirklich aussagekräftig zu sein.

Dann kam noch „Time to interactive“ hinzu, um zu messen ab wann die Seite auf Eingaben vom User reagieren kann.

Durch die stetige Weiterentwicklung der Technik wurde allerdings klar, dass alle diese Werte nicht aussagekräftig genug waren.

Diese Messwerte hat Google deshalb immer weiter entwickelt und sie jetzt zu den „Core Web Vitals“ zusammengefasst. Diese Werte sind trotzdem nicht in Stein gemeißelt und werden immer weiterentwickelt werden.

Wie werden die Rankings ermittelt?

Woher aber bekommt Google eigentlich die Daten? Zur Berechnung der Rankings wertet die Suchmaschine die Feld-Daten aus dem „Chrome User Experience“-Bericht aus. Das sind Daten, die Google über den Chrome-Browser direkt von Usern ermittelt.

Da nicht für jede URL ausreichende Daten zur Verfügung stehen, schätzt Google die Werte dieser Seiten auf Grundlage der gemessenen Daten ähnlicher Seiten (der gleichen Domain), für die ausreichende Daten ermittelt werden können.

Wenn man Pech hat, kann Google die Daten nur von langsamen Unterseiten ermitteln, dann werden diese zur Schätzung herangezogen. Eine schnelle Seite ist dann womöglich kein Vorteil,  wenn dafür nicht genügend Daten vorhanden sind.

Zum Berechnen der Rankings zieht Google außerdem immer die Version einer Seite heran, auf der die User direkt aus der Google Suche kommen. Wenn man also zum Beispiel noch m.domain.com für Mobile-Seiten oder AMP-Seiten nutzt, dann werden die Werte dieser Seiten als Grundlage genommen.

Seiten, die auf „noindex“ gestellt sind oder durch die robots.txt für Google gesperrt sind, können auch in die Berechnung mit einfließen. Da sie von Nutzer*innen aufgerufen werden können, sind nämlich Daten dazu vorhanden. Diese werden aber eher negative Datensätze zum Vergleich liefern, da solche Seiten oft nicht optimiert werden.  

Die Core Web Vitals sind Teil etwas Größerem

Die Core Web Vitals gehören bei alldem zu einer größeren Sammlung von Werten, die Google zur Messung der Page Experience heranzieht. Weitere Werte sind:

• Mobil-Freundlichkeit: wie gut Webseiten auf Handys zu bedienen und Inhalte zu erreichen sind.
• Sicheres Surfen: ob eine Seite Schadprogramme verteilt, oder zum Beispiel Praktiken zum Phishing betreibt.
• HTTPS: ob die übertragenen Daten verschlüsselt sind.
• Zugänglichkeit der Inhalte: ob aufdringliche Pop-ups die Inhalte verdenken oder den Zugang erheblich erschweren.

Wie wichtig sind die Core Web Vitals?

Durch die Einführung der Core Web Vitals what Google einen hohen Anreiz für Webmaster geliefert, diese Werte zu optimieren. Aber heißt das im Umkehrschluss, dass die Seite mit den besten Werten auf Platz eins stehen wird? Sicherlich nicht. Auch beim PageSpeed hat Google klar gemacht, dass eine Seite nicht an Rankings gewinnt, nur weil sie besonders schnell lädt. Nach wie vor sind der Content und andere Faktoren viel wichtiger als die Seitenladegeschwindigkeit. Dazu gehören die externe Verlinkung und damit das Vertrauen anderer in die Website.

Ähnlich wird es sich auch mit den Core Web Vitals verhalten. 

Und warum dann der ganze Hype um die Core Web Vitals? 

Dennoch gilt: Ein Wert kann das Zünglein an der Waage sein. Sollten zwei Webseiten bei allen Faktoren gleich liegen, kann eine sehr langsame Webseite beispielsweise Nachteile beim Ranking haben.

Gerade bei sehr umkämpften Suchbegriffen ist der Aufwand im Vergleich zu anderen nötigen Maßnahmen vergleichsweise gering. Und man sollte sich die Chance auf eine gute Platzierung nicht durch eine langsame Seite nehmen lassen.

Aber abgesehen von den Vorteilen im Ranking haben all diese Werte eine sehr hohe Daseinsberechtigung. Sie helfen dabei, dass sich Benutzer auf einer Seite zurechtfinden, und eher dazu in der Lage sind, die gewünschte Aktion auf der Seite auszuführen. Dadurch sind sie ein generell wichtiger Faktor für den Erfolg einer Website, und sollten allein deswegen schon ganz weit oben auf der Agenda stehen.

Darüber hinaus wird Google ab Mai 2021 auch solche Seiten in den Suchergebnissen bei Features wie den „Top Stories“ auf mobilen Geräten berücksichtigen, wenn Sie nicht auf AMP setzen. Voraussetzung dafür sind aber eben gute Werte bei den Core Web Vitals. 

Es gibt also genügend Gründe, diese Metriken als sehr wichtig einzustufen, auch wenn sie als Ranking-Faktor keine allzu tragende Rolle spielen.

Wie groß ist der Aufwand?

Die Werte die uns Google hier an die Hand gibt, sind sehr vereinfachte Metriken, um sie für uns nutzbar und messbar zu machen. Bei jedem dieser Werte kann man fast unendlich ins Detail gehen, sodass selbst gestandene Entwickler*innen an ihre Grenzen kommen.

Zum Beispiel das Thema „Kritischer Rendering-Pfad“: Um hier  gute Werte zu erreichen, kann es nötig werden, große Bereiche einer Webseite neu zu programmieren und an vielen kleinen Schrauben zu drehen. Dafür ist viel Zeit nötig, daher sollte möglichst früh damit begonnen werden, die IT-Abteilungen auf die Core Web Vitals aufmerksam zu machen und gemeinsam die Ziele festzulegen und das weitere Vorgehen zu planen.

Wie kann ich die Core Web Vitals messen?

Die Metriken lassen sich in zwei Bereichen teilen:

1. „Labor-Daten“, die in einer festgelegten technischen Umgebung (Gerät, Verbindungsgeschwindigkeit und CPU) gemessen werden. Das sind Werte wie zum Beispiel LCP und CLS.
2. „Feld-Daten“, die Google über den Chrome Browser direkt von echten Nutzer*innen sammelt wie zum Beispiel den FID-Wert.

Zum Glück hat uns Google gleich eine ganze Reihe von Tools an die Hand gegeben, um die Werte zu messen. 

• PageSpeed Insights: Ist ein einfach zu bedienendes Online-Tool von Google. Nach Eingabe einer URL erhält man einen Gesamtwert der grün, orange oder rot sein kann. Sollte es Verbesserungsmöglichkeiten auf der Seite geben, werden sie im unterem Bericht detailliert angegeben. Hier werden Labor- und Feld-Daten angegeben. Feld-Daten nur,  sofern genug Daten vorhanden sind. Die Ergebnisse werden für Desktop und Mobile ausgegeben. 
• Google Search Console: Wenn die eigene Seite bei diesem Tool von Google freigeschaltet ist, werden Daten für alle drei Werte (LCP, CLS und FID), aufgeteilt auf Desktop und Mobile, angegeben. Auch nur, wenn genügend Daten gesammelt wurden. Mehr zur Google Search Console findet sich hier.
• Chrome DevTools: Sind Werkzeuge, die im Chrome Browser von Google eingebaut sind, und sehr detailliert Auskunft darüber geben, wie die Webseite geladen wird und was wann beim Laden passiert. Hier werden nur Labor-Daten ausgegeben. 
• Lighthouse: Ist ein automatisiertes Open-Source-Werkzeug zur Verbesserung der Qualität von Webseiten. Es gibt unter anderem detaillierte Labor-Daten zur Performance einer Seite aus. Das Tool ist über die Chrome DevTools erreichbar.
• CrUX: Sind Feld-Daten aus dem Chrome User Experience-Bericht. In diesem Bericht sind die drei Hauptwerte der Core Web Vitals und weitere Werte enthalten, die sie beeinflussen können. Die Daten sind über das Tool PageSpeed Insights erreichbar oder über eine Schnittstelle. Google stellt auch eine Vorlage für ein Dashboard zur Visualisierung der Daten zur Verfügung.
• Web Vitals Browser AddOn: Ist ein AddOn für verschiedene Browser, die die Labor-Werte der aktuell im Browser aufgerufenen Seite ausgibt.

Um seine Seite mit Mitbewerbern zu vergleichen, gibt es das Tool Vitals Leaderboard. Desweiteren stellt Google API-Schnittstellen und das Tool-Set lighthouse-ci zur Verfügung, die Entwickler*innen abfragen können, um die Daten in ihren Entwicklungsprozess zu integrieren.

So lässt sich eine Seite für die Web Vitals optimieren

Es gibt einige simple Schritte, die jeder recht schnell und oft ohne Entwickler*innen durchführen und optimieren kann.

Ein Beispiel: Man sollte am besten Bilder in genau der Größe verwenden, wie sie auch angezeigt werden. Das bedeutet:

• Vermeide Bilder mit 2000 x 2000 Pixel Größe, wenn sie nur mit 600 x 600 angezeigt werden. 
• Reduziere die Dateigröße durch optimale Komprimierung.
• Verwende das richtige Datei-Format (JPG, WebP, PNG, etc.)

Weitere solche Tipps finden sich in den Auswertungen der Tools, die ich weiter oben beschrieben habe.

Für die einzelnen Messwerte der Core Web Vitals gibt es jeweils konkrete Maßnahmen. Hier wird es jetzt technischer:

LCP optimieren

Um den Wert LCP zu optimieren (also die Zeit zu verkürzen, bis das größte Content-Element geladen wurde) empfiehlt Google sich folgende Punkte anzuschauen:

• Langsame Server-Antwortzeiten (TTFB)
  • Ist der Server auf dem neuesten Stand der Technik? Kann die Leistung verbessert werden? 
  • Ist der Standort nahe bei den Usern?
  • Werden statische Inhalte wie JS, CSS und Bilder mit den richtigen Angaben zum Caching ausgeliefert?
  • Können die HTML-Seiten gecacht werden?
  • Verbinde Domains für 3rd-party Skripte frühzeitig (preconnect)
• Render-Blockierung von JavaScript und CSS
  • Lade JavaScript-Dateien, die nicht für den direkten Seitenaufbau wichtig sind, so spät wie möglich. Füge sie möglichst am Fuß der Seite ein, und nutze defer, async bei der Einbindung.
  • Reduziere die Dateigröße durch „Minifying“ 
• Langsame Ressourcen-Ladezeiten
  • Nutze CDN-Server zur Auslieferung von statischen Inhalten wie JS, CSS und Bilder 
• Client-seitiges Rendering
  • Vermeidet das Rendern der Seite mit JavaScript im Browser. Liefert dazu einen möglichst weit vorgerenderten HTML-DOM aus.

FID optimieren

Um den Wert FID zu optimieren (also die Zeit zu verkürzen, bis die Webseite auf User-Eingaben reagieren kann), muss man auf den Wert „Total Blocking Time“ (TBT) ausweichen, da FID nur als Feld-Daten aus dem CrUX vorliegt. Folgende Maßnahmen  empfiehlt Google:

• Reduziere die Laufzeit von JavaScript Tasks
  • Alles über 50 Millisekunden ist zu lang
• Nutze Code-Splitting
• Verschiebe unkritisches JavaScripte, einschließlich Skripte von Drittanbietern, durch die Nutzung von async oder defer

CLS optimieren

CLS lässt sich am besten in den Chrome DevTools überprüfen. Zur Kontrolle der Maßnahmen sollten aber immer auch die Daten aus dem CrUX hinzugezogen werden. Um den Wert zu optimieren, empfiehlt Google folgende Maßnahmen:

• Füge Bilder, Anzeigen oder Iframes immer Angaben zu den Dimensionen hinzu.
• Vermeide dynamisch eingefügte Inhalte im oberen Bereich der Seite.
• Füge beim Einbetten von Web-Schriften die Angabe swap für die CSS-Anweisung font-display hinzu, um die Effekte FOIT/FOUT zu vermeiden.
• Vermeide JavaScript-Aktionen, die auf eine Netzwerkantwort warten, bevor der DOM aktualisiert wird.

Genereller Hinweis

Die drei Hauptwerte der Core Web Vitals werden von sehr vielen unterschiedlichen Werten beeinflusst. Großen Einfluss haben zum Beispiel TBT und TTFB.

Der Teufel liegt hier oft im Detail, gerade wenn es darum geht, das Ausführen von JavaScript zu optimieren. Fangen Sie daher frühzeitig mit der Optimierung an. Sollten die Maßnahmen, die sich schnell und einfach umsetzen lassen, nicht zu zufriedenstellenden Ergebnissen führen, muss mit einem hohen Zeitaufwand gerechnet werden.

Um alle Bereiche einer modernen Webseite optimieren zu können, ist zum Teil tiefgehendes Wissen über Server, JavaScript und Rendering nötig. Ist das Wissen im Entwickler-Team noch nicht vorhanden, ist Zeit für Schulungen mit einzukalkulieren, oder Kosten für externe Unterstützung.

Stellen Sie sich darauf ein, dass die Optimierung nie aufhört. Das ist gleichzeitig das Spannende aber auch das Herausfordernde an SEO-Maßnahmen. Jede Änderung an der Webseite kann die Werte beeinflussen. Stellen Sie daher am Besten sicher, dass bei neuen Seiten-Elementen auf die Auswirkungen geschaut wird, bevor sie live gehen.

Zusammenfassung

Die wichtigsten Punkte noch einmal auf einen Blick:

• Die Core Web Vitals sind neue und sehr nützliche Werte, die Google berücksichtigt.
• Überprüfen Sie den Ist-Zustand der Seite und vergleichen Sie die Werte mit Mitbewerbern. Schauen Sie sich die verschiedenen Bereiche der Website an, nicht nur die Startseite. 
• Sprechen Sie mit Entwickler*innen und Designer*innen über das Thema. Stellen Sie fest, welches Know-how im Team bereits vorhanden ist. Kalkulieren Sie genug Zeit und Kosten für die Umsetzung ein. 
• Machen Sie die Entscheider und Stakeholder auf das Thema aufmerksam, und lassen Sie sich Budget dafür freigeben. Wenn man erst anfängt, wenn die Mitbewerber an einem vorbeigezogen sind, hat man immer das Nachsehen. Sie verlieren dann eventuell eine Menge wertvollen Traffic, und damit im schlimmsten Fall Einnahmen.

---

Dieser Artikel gehört zu: UPLOAD Magazin 87

Lebenslanges Lernen ist heute aktueller denn je – definitiv in dem Themenbereich, über den wir berichten. Es gibt zugleich noch mehr Aspekte und einige möchten wir in dieser Ausgabe genauer ansehen und erklären. So dreht sich ein Beitrag darum, wie wir unser eher analoges Hirn in der modernen Welt fördern und nicht etwa überfordern. Ein weiterer Artikel zeigt, wie wichtig Lernen und Wissen gerade in Transformationsprozessen sind. Und außerdem zeigen wir, wie sich ein Geschäftsmodell im Bereich E-Learning aufbauen lässt. Dazu haben wir zwei Bonus-Beiträge: Wir erklären darin, was es mit Googles „Core Web Vitals“ auf sich hat, die 2021 wichtig werden. Und wir geben Beispiele für Startups, die sich voll und ganz dem Thema Nachhaltigkeit verschrieben haben. Nicht zuletzt stellen wir das E-Recruiting-Startup Lionstep vor.

• Weitere Artikel aus dieser Ausgabe kostenlos auf der Website lesen ...
• Bleib auf dem Laufenden über neue Inhalte mit dem „Update am Montag“ …

Schon gewusst? Mit einem Zugang zu UPLOAD Magazin Plus oder zur Content Academy lädst du Ausgaben als PDF und E-Book herunter und hast viele weitere Vorteile!