Das Page-Experience-Update:

So kommen Sie an die neuen Web-Vitals-Metriken

Mario Fischer
Mario Fischer

Mario Fischer ist Herausgeber und Chefredakteur der Website Boosting und seit der ersten Stunde des Webs von Optimierungsmöglichkeiten fasziniert. Er berät namhafte Unternehmen aller Größen und Branchen und lehrt im neu gegründeten Studiengang E-Commerce an der Hochschule für angewandte Wissenschaften in Würzburg.

Mehr von diesem AutorArtikel als PDF laden

Wie bereits im Beitrag einige Seiten vorher erwähnt, werden die sog. Web Vitals laut Google ab dem nächsten Jahr für das Ranking herangezogen. Wer solche Ankündigungen ernst nimmt, wird sich unmittelbar fragen, wie man für etwas umfangreichere Websites, die mehr als 50 oder 100 URLs haben, effizient an die entsprechenden Messwerte kommt. Jede Seite einzeln manuell im Chrome vermessen lassen und sich die Zahlen zu notieren, erscheint wirtschaftlich gesehen wenig sinnvoll. Und der Versuch, eine Liste mit Werten aus der Google Search Console zu laden, hinterlässt eher Frust, weil dort nur Datumswerte mit der Anzahl an betroffenen URLs übertragen werden – aber eben keine Details. Man braucht also eine Möglichkeit, die – vielleicht noch – kritischen Werte übersichtlich zu übertragen, um mit einer oder mehreren Listen arbeiten zu können. Wie das geht, erfahren Sie im folgenden Beitrag.

Wer eine nur kleine Webpräsenz betreibt bzw. bisher nur vergleichsweise wenig Traffic bekommt, hat bei den Web Vitals ein kleines Problem. Es sind in der Regel (noch) keine Daten vorhanden, die zeigen würden, wie es um die einzelnen Seiten steht. Öffnet man die Search Console von Google und klickt auf den neuen Menüpunkt „Core Web Vitals“, kann es durchaus passieren, dass die Meldung „Nicht genügend Werte …“ angezeigt wird.

Wie in Abbildung 1 zu sehen ist, hilft dann auch keine Datenabfrage via API (Datenschnittstelle), wie sie weiter unten in diesem Beitrag gezeigt wird. Es wird lapidar der Wert „#NULL!“ übertragen. Das Ausrufezeichen wirkt dabei ein klein wenig wie eine Anklage oder könnte gar als Beleidigung aufgefasst werden. Abgesehen von dieser scherzhaften Interpretation bleibt einem hier nur, auf den blauen Link „PageSpeed Insights testen“ zu klicken. Jetzt öffnet sich ein neuer Tab und es wird für die Startseite der Domain automatisch eine Analyse angestoßen, die einige Sekunden Zeit benötigt. Durch Eingabe einzelner URLs ganz oben lassen sich so auch andere Seiten manuell analysieren.

Hast du nur Laborwerte oder messen sie schon?

Wie im voranstehenden Titelbeitrag ja bereits zu lesen war, muss man zwischen den sog. Felddaten und den Labdaten unterscheiden. Felddaten sind „echte“ Nutzerdaten, die Google über den Chrome-Browser anonym sammelt. Die Labdaten sind nur gerechnet und theoretischer Natur. Hat man allerdings keine Felddaten zur Verfügung, sind sie der einzige Anhaltspunkt, den man hat (Abbildung 2). Den Unterschied sollte man aber auf jeden Fall immer im Kopf behalten.

Einige Tests der Redaktion mit knapp 30 völlig unterschiedlichen Domains haben gezeigt, dass die Felddaten zum Teil enorm von den Labdaten abweichen können – sowohl zum Guten als auch zum Schlechten. Wie in der Abbildung 3 beispielhaft zu sehen ist, errechnet der Algorithmus bei einer URL einen LCP-Wert von 8 Sekunden, während die echten Nutzerdaten, also die Felddaten, „nur“ 3,6 Sekunden ausweisen. Der Wert ist zwar immer noch zu hoch, aber weitaus weniger alarmierend als volle und völlig indiskutable 8 Sekunden!

Wer also tatsächlich nur Laborwerte hat, die zudem tendenziell zu schlecht sind, muss wohl ins Blaue hinein optimieren, ohne wirklich zu wissen, wie viel Aufwand hier angebracht ist. Sollten die Web Vitals beim Ranking dann eine mehr oder weniger gewichtige Rolle spielen, könnte sich die algorithmische Katze in den Schwanz beißen. Folgendes Szenario mag das verdeutlichen. Eine Domain, die noch nicht gut rankt, hat ggf. zu wenig Traffic für Felddaten. Würde Google nun auf die Labdaten zurückgreifen, die zudem wie im Beispiel in Abbildung 3 völlig daneben liegen können, hätte die Domain am Ende noch weniger Chancen, je an (genügend) Suchtraffic zu kommen und damit über Felddaten automatisch nachzuweisen, dass sie viel besser ist als „gerechnet“. Ein Extremszenario, ja. Aber es zeigt, dass man bei Google hier wohl intensiv nachdenken muss, welche Werte man für das Ranking heranzieht und wie man mit fehlenden Daten umgeht, um keine systemischen Ungerechtigkeiten zu installieren.     

Metriken per Chrome-Add-on komfortabel abfragen

Mittlerweile ist auch ein Add-on für den Chrome-Browser verfügbar, mit dem man die drei Web-Vitals-Werte direkt in der oberen Browserleiste angezeigt bekommt, wie Abbildung 4 verdeutlicht. Damit kann man nicht nur für die eigenen Webseiten die entsprechenden Metriken abrufen, sondern natürlich auch für jede andere Webseite – auch die der Mitbewerber, um eine Einschätzung über deren Webqualität zu bekommen.

Das natürlich kostenlose Add-on erhält man im Chrome Store unter einfach.st/webvitalsaddon (Abbildung 5). Für Entwickler und/oder Programmierer sicherlich interessant: Unter Github findet man die kompletten Ressourcen unter einfach.st/ghcls.

Noch ein Tipp, den man ggf. gleich nach der Installation dieser und vielleicht aller Erweiterungen beherzigen sollte. Standmäßig ist der Zugriff auf die eben angesurfte Seite für die Add-ons freigeschaltet, die auf den Zugriff auf die URL oder die Webseite selbst angewiesen sind, um arbeiten bzw. Werte liefern zu können. Dies lässt sich relativ einfach stark beschränken auf die Seiten, die man in diesem Moment wirklich analysiert haben möchte. Ansonsten funken Erweiterungen ggf. jede URL „nach Hause“, die man aufruft. Datenschutztechnisch ein Horror und auch sonst keine besonders angenehme Vorstellung.

Dazu klickt man mit der rechten Maustaste auf das entsprechende Symbol eines Add-ons, hier die Web Vitals (Abbildung 6, Ziffer 1). Jetzt erscheint ein Kontextmenü und dort der Eintrag „Kann Websitedaten lesen und ändern“ (Ziffer 2). Nach Auswahl dieses Menüpunktes ändert man in dem neu ausklappenden Untermenü den voreingestellten Eintrag „Auf allen Websites“ am besten auf „Wenn die Erweiterung angeklickt wird“ (Ziffer 3). Jetzt bleibt das Add-on so lange inaktiv, bis man bewusst darauf klickt. Ggf. muss man die vorher aufgerufene Seite nochmals aktualisieren, sprich neu laden, damit das Add-on das mitbekommt. Natürlich kann man den Zugriff auch auf bestimmte Domains wie die eigene beschränken. Das unterbindet auch unnötigen Datenfluss bzw. überflüssige Abfragen bei Google, denn ansonsten werden ja für jede aufgerufene URL Daten angefordert.

Web Vitals flexibel per API abholen

Eine sicherlich bequeme und schnelle Lösung ist es, die Daten für unterschiedliche URLs über die API zu holen. Wer nicht programmieren kann oder mag, kann dazu derzeit z. B. auf die SEO-Tools für Excel von Nils Bosma oder den Screaming Frog zugreifen. Dort wurden bereits entsprechende Schnittstellen integriert.

Tipp

Eine ausführliche Beschreibung der SEO-Tools für Excel finden Sie in der Ausgabe 44 oder gleich online zum Nachlesen unter einfach.st/seoexcel. Den Screaming Frog haben wir in Ausgabe 52 (online: einfach.st/frog1) und das Update gleich in Ausgabe 53 (online: einfach.st/frog2) in der Reihe „SEO-Tools unter der Lupe“ vorgestellt.

Mit dem Screaming Frog

Über den Frog lassen sich die einzelnen Werte relativ einfach abholen, sofern man bereits einen API-Key bei Google beantragt bzw. bekommen hat. Mit diesem kostenlosen Schlüssel akkreditiert man sich bzw. einzelne Programme im Hinblick auf das übertragene Datenvolumen. Diesen Schlüssel, eine zufällige Folge von Buchstaben und Zahlen, erhält man direkt bei Google unter: console.developers.google.com/apis/credentials. Maximal einfach ist dies dort – als kleine Warnung vermerkt – jedoch nicht, weil die Plattform für Entwickler ausgelegt ist. Den genauen Weg der Beantragung hier zu beschreiben, wäre allerdings ein eigener Beitrag.

Ist man im Besitz des API-Keys, startet man den Screaming Frog und ruft unter „Configuration“, „API Access“ und dort „PageSpeed Insights“ das nachfolgende Pop-up-Menü auf (Abbildung 7). Im ersten Reiter „Accont Information“ (Ziffer 1) trägt man den „Secret Key“ ein, den man von Google erhalten hat. Unter dem Reiter „Metrics“ (Ziffer 2) wählt man dann die gewünschten Werte aus. Unter dem Punkt „Lighthouse Metrics“ finden sich LCP, FMP, CLS und einige andere mehr. Nach der Auswahl gibt man nur noch oben im Eingabefeld des Screaming Frog die Domain ein, deren URLs gecrawlt werden sollen, und das war es im Prinzip auch schon. Zu jeder URL wird über die API der ausgewählte Wert mit abgeholt und in die entsprechenden Zeilen geschrieben (Abbildung 8).

Nach dem der Crawl durchgelaufen ist, stehen die Werte weiter rechts neben den sonst üblichen SEO-Grunddaten des Screaming Frog zur Verfügung. Klassischerweise exportiert man sich diesen Crawl einfach im CSV- oder Excel-Format und verarbeitet die Daten dort dann übersichtlich weiter.

Mit den SEO-Tools für Excel

Mit der bekannten und beliebten Excel-Erweiterung von Nils Bosma ist das Abholen der gewünschten Metriken prinzipiell genauso einfach wie mit dem Screaming Frog. Die Verwendung eines Entwickler-API-Keys entfällt allerdings hier für die folgenden neuen Metriken:

  • CLS (Cumulative Layout Shift)
  • FCP (First Contentful Paint)
  • LCP (Largest Contentful Paint
  • FID (First Input Delay)

In der beliebigen Platzierung und flexiblen Gestaltung der Datenpositionierung direkt in Excel liegt durchaus ein gewisser Vorteil gegenüber dem etwas starreren Konzept des Screaming Frog.

Bekanntlich setzen sich die SEO-Tools via eigenen Reiter rechts neben die üblichen Excelfunktionen. Dort aufgerufen erscheint das spezifische Tool-Menü. Im zweiten Reiter „SEO“ (siehe Abbildung 10) wählt man über „Google PageSpeed“ und „Loading Experience“ den entsprechenden Editor aus. Dieser ist genauso aufgebaut wie alle übrigen menügeführten Datenabfragen in den SEO-Tools für Excel (Abbildung 11). Achtung, den Reiter „SEO“ gibt es leider optisch identisch zweimal! Einmal ganz links als Erstes und dann noch mal wie in Abbildung 10 dargestellt.

Im Editor kann man bei Bedarf noch mal die Kategorie auswählen (Abbildung 11, Ziffer 1). Anschließend gibt man eine URL ein, hier wurde www.meine-domain.de als Beispiel verwendet (Ziffer 2). Möchte man Werte für Deutschland haben, muss man die Vorbelegung bei „Locale“ (Ziffer 3) auf German umstellen. Ebenso empfiehlt es sich (Ziffer 4), von der Vorbelegung „Desktop“ auf „Mobile“ umzustellen, weil die Beurteilung für Mobile deutlich schärfer ausfällt, Google auf Mobile First umgestellt hat und man sich ansonsten via „Desktop“ mit den falschen, weil „lascheren“ Werten ggf. in falscher Sicherheit wägt.

Unter „Fields“ (Ziffer 5) sind bereits alle verfügbaren Metriken angehakt. Diese kann man übernehmen oder eben auch einzeln an- und abwählen. Hier werden neben den oben genannten Web Vitals u. a. eben auch für jede Metrik zusätzlich ein Durchschnittswert (Distribution-AVG), der schnellste Wert (Distribution-Fast) sowie der langsamste Wert (Distribution-Slow) zur Verfügung gestellt. Abbildung 12 zeigt alle abholbaren Werte im Überblick für beispielhafte fünf anonymisierte URLs. Zum Vergleich enthält die erste Datenzeile die Werte, die für die jeweilige URL bei einer manuellen Abfrage in der Search Console ausgegeben werden. Wie man sehen kann, differieren die Werte zum Teil erheblich, wie bei „Seite B“ erkennbar ist. Das ist laut Google nicht ungewöhnlich und basiert auf den unterschiedlichen Erhebungsmethoden (siehe weiter vorne „Ask Google“ hier in dieser Ausgabe).

Die markierten Ziffern 6 und 7 in der Abbildung 11 werden gleich noch ausführlicher erläutert. Sie sind wichtig und machen die Nutzung anschließend erst richtig wertvoll.

Hat man den Editor komplett ausgefüllt, klickt bzw. aktiviert man eine leere Zelle, ab der in Richtung nach rechts dann alle Werte eingetragen werden sollen. Anschließend klickt man auf „Insert“ im Editor und ab jetzt kann es ein klein wenig dauern, bis alle Werte in den Zellen zeilenweise übertragen wurden.

Wie bekommt man jetzt aber gezielt zu einigen oder allen URLs die entsprechenden Werte? Dazu gibt es prinzipiell zwei Möglichkeiten. Man kann mit den SEO-Tools für Excel natürlich auch crawlen wie mit dem Screaming Frog. Dazu wählt man den Button „Spider“ und füllt das aufpoppende Eingabefeld aus. Dort wird die Start-URL, in der Regel der Domainname, ein Limit (wie viele URLs?) und die Suchtiefe (Wie viele Klicks tief soll gesucht werden?) eingegeben und anschließend klickt man unten auf den Butten „Generate“. Der Spider läuft los und stellt zeilenweise die URLs in Zellen untereinander ein. Als zweite Möglichkeit kann man natürlich jede beliebige Liste an URLs in Excel abarbeiten lassen. In jedem Fall ist das Ergebnis bzw. der Ausgangspunkt für die weitere Arbeit eine Liste mit URLs in Zeilen untereinander.

Achtung! Jetzt wird es auf den ersten Blick ein wenig tricky. Wie in Abbildung 12 zu sehen ist, aktiviert man Zelle B1 und klickt wie oben beschrieben im Editor (Abbildung 11) auf „Insert“. Wie zu sehen ist, werden in der Zeile 1 die Überschriften bzw. die Bezeichnungen der Werte hinterlegt, darunter dann die einzelnen Werte selbst. Diesen Schritt macht man, um alle Überschriften der ausgewählten Werte korrekt zu platzieren. Ansonsten hätte man ja nur Zahlen dastehen und wüsste nicht, was sie bedeuten. Jetzt hat man aber nur eine Zeile mit Werten, nämlich Zeile 2, in die hier der Übersichtlichkeit halber nur drei Werte (FCP, FID und CLS) geholt wurden.

Und jetzt kommt die sog. „Magic“, die Zauberei, mit der alles erst einen Sinn ergibt und nützlich wird. In einem zweiten Schritt klickt man jetzt im Editor „Exclude headers in result“ an (Abbildung 11, Ziffer 6) und ändert zusätzlich darunter die bisherige Auswahl „Values“ in „Formula“ (Ziffer 7). Das bewirkt, dass bei der nächsten Abfrage die Überschriften nicht mehr mit übertragen werden. Gut so, denn die hat man ja schon. Und statt der Werte wird jetzt in der Startzelle die Formel generiert, welche die Werte abholt. Dazu platziert man die aktive Startzelle jetzt eine Zeile tiefer, nämlich in Zelle B2. Ein Klick auf Insert bewirkt anscheinend nichts, denn die Werte bleiben gleich. Tatsächlich werden sie allerdings erneut überschrieben.

Klickt man jedoch jetzt in Zelle B2, erscheint in Excel nicht der Wert, sondern die Formel, die im Hintergrund die Daten abgefragt hat und die man mit dem Editor ganz einfach generiert hat (Abbildung 13). Wichtig dabei ist, dass man nicht versäumt, die Überschriften zu unterdrücken (Exclude headers in result) und statt der Werte (Value) die Formel einfügt (Formula). Jetzt fehlt nur noch ein einziger einfacher Schritt.

Die generierte Formel lautet (je nach ausgewählten Metriken etc.):

=@Dump(Connector("GooglePageSpeed.LoadingExperience";"www.websiteboosting.com";"de";"mobile";"First-Contentful-Paint,First-Input-Delay,Cumulative-Layout-Shift";WAHR))

Wie zu erkennen, ist die URL (hier www.websiteboosting.com) fest über den Eintrag im Editor in der Formel verankert. Diesen Eintrag tauscht man nun ganz einfach aus, in dem man ihn inklusive der Anführungszeichen mit dem Zellbezug A2 überschreibt. Das bewirkt, dass nun nicht mehr fest fixiert immer nur die eine URL abgefragt wird, sondern die URL, die in Zelle A2 steht:

=@Dump(Connector("GooglePageSpeed.LoadingExperience";A2;"de";"mobile";"First-Contentful-Paint,First-Input-Delay,Cumulative-Layout-Shift";WAHR))

Nach der Änderung bemerkt man zunächst erneut keine anderen Werte, die URL hat sich ja hier nicht wirklich geändert, sie kommt jetzt nur aus einem Zelleintrag. Aber wenn man die Zelle B2 nun wie üblich nach unten kopiert, werden für jede URL in den Zeilen der Spalte A die entsprechenden Werte abgeholt (Abbildung 14). Somit kann man sich flexibel ein nützliches Monitoring aufbauen, bisherige Werte für spätere Revisionen archivieren und zu späteren Zeitpunkten jeweils per Mausklick erneuern.

Wer häufiger Excel nutzt, weiß sicherlich, welches Potenzial mit dieser Methode verbunden ist. Im einfachsten Fall formatiert man die Ergebnisdaten mittels „bedingter Formatierung“ entsprechend den Werten, die Google als grün, gelb und rot ausweist (siehe den Titelbeitrag weiter vorne im Heft). Bei der Metrik LCP würde man also hinterlegen, dass bis zum Wert 2,5 (Sekunden) die Zelle in Grün formatiert wird, ab 2,5 bis 4 in Orange (braucht eine Optimierung) und darüber in Rot (übel). Somit bekommt man sofort einen kompletten Überblick über den Stand der eigenen Webseiten. Entsprechend geht man für die FID- (grün bis 100 ms, bis 300 ms orange, darüber rot) und CLS-Werte (bis 0,1 grün, bis 0,25 orange und über 2,5 dann rot) vor. Diese Angaben beziehen sich auf die Bewertung mit „mobile“.

Tipp

Ein Tipp: Achten Sie auf den Unterschied zwischen dem Punkt als Dezimaltrenner, wie er in US-Systemen verwendet wird, und unserem Komma als Trenner. Ggf. werden importierte Daten nicht als Zahlen interpretiert. Störende Punkte wie z. B. in 2.5 können in Excel ganz einfach mit der Formel =Wechseln(Zelladresse;“.“;“,“) gegen ein Komma ausgetauscht werden.

Fazit und Warnung

Alles in allem lassen sich mit entsprechenden Tools die neuen Metriken relativ bequem beschaffen. Das ist auch notwendig, denn für zielgerichtete Aktionen braucht es Pläne, Übersichten und vor allem Listen, an welchen Seiten oder Vorlagen (Templates) gearbeitet werden muss. Daran scheitern auch viele (SEO-)Toolhersteller, die ihren Kunden zwar über den Browser on demand zu jeder URL teils Hunderte von Datenpunkten anzeigen, aber wohl nicht wissen, wie man in Unternehmen damit dann tatsächlich arbeiten soll. Hier braucht man nützliche, exportierbare (Check-)Listen, die man bearbeiten, sortieren, filtern und dann eben an die verantwortlichen Mitarbeiter weitergeben kann. Durch das bloße Anschauen von Daten in einem Tool ist man eben noch lange nicht arbeitsfähig. Hier dürfen wir uns alle vielleicht mehr tatsächliches Eingehen auf die Kundenbedürfnisse wünschen. Aber das schreibt sich einfacher hin, als es sich umsetzen lässt. Aus vielen Gesprächen mit Toolanbietern wissen wir, dass die Kunden oft recht fantasielos sind, wenn man sie gezielt fragt. Die nehmen, was da ist – Forderungen werden tatsächlich sehr selten gestellt. Hier gilt es vielleicht, noch genauer hinzusehen, wie der Prozess der Optimierung nach dem Erheben von Entscheidungskennzahlen abläuft, ablaufen könnte oder optimiert ablaufen sollte.

Eine Warnung als kleinen Wermutstropfen gibt es am Schluss dann doch noch. Nicht immer kommen über die Datenschnittstelle von Google konsistente Zahlen. Manchmal fehlen Werte für einzelne URLs einfach. Einige Werte stimmen inhaltlich bzw. vom Format her nicht mit dem überein, was Google auf den zugehörigen Webseiten erklärt. Nicht weniger gravierend ist, dass man es wohl bisher übersehen hat, die Daten, die man über die API zu Verfügung stellt, entsprechend zu dokumentieren. Einige der Werte bzw. deren Bezeichnungen sind nicht mal über die Google-Suche zu finden, wie Abbildung 16 beispielhaft zeigt. Die Bezeichnung „FID-Distribution-Fast“ wird über die API übermittelt. Bisher hat sich offenbar niemand weltweit dazu geäußert. Sind wir bei Website Boosting mal wieder so früh dran mit Tipps und Hilfestellungen, die bisher noch niemand sichtbar aufgegriffen hat? Vielleicht.

Dass Sie, liebe Leserinnen und Leser, so früh informiert werden, bedeutet natürlich auch, dass sich im Lauf der Zeit noch einiges ändern kann – hoffentlich zum Guten, was Dokumentation und Datenqualität seitens Google angeht. Sie befinden sich also aktuell offiziell wohl in einer Art Beta-Phase. Nutzen Sie Ihren zeitlichen Vorsprung!