Die Core Web Vitals sind euch vielleicht schon untergekommen, wenn ihr euch mit SEO und Performance-Optimierung beschäftigt. Dabei handelt es sich um verschiedene von Google eingeführte Messwerte, die Aussagen über die User-Experience einer Seite geben können.
Diese Werte sind Teil der PageSpeed-Insights-Analyse, lassen sich aber auch per JavaScript ermitteln.
Warum Web Vitals lokal messen, wenn sie Teil von PageSpeed sind?
Bei PageSpeed sind die Core-Web-Vitals-Daten nur auf Basis echter Besucher*innen, wenn es innerhalb der letzten 28 Tage genug Traffic von Chrome-Usern auf der analysierten Seite gab, die der Übertragung der Analysedaten zugestimmt haben.
Andernfalls handelt es sich um Lab-Daten, die weniger aussagekräftig sind als Daten richtiger Besucher*innen. Und selbst wenn genug Daten von echten Usern übertragen wurden, sind es nur Daten einer Teilmenge von Chrome-Usern.
Messung der Web Vitals mit dem web-vitals-Skript
Bei einer Recherche zu den Web Vitals habe ich zufällig gesehen, dass es ein web-vitals-Script gibt, mit dem die Web Vitals lokal gemessen werden können. Dabei gibt es ein paar Einschränkungen, sowohl beim Browser-Support, weil einige der APIs zur Messung der Werte nur in Chromium-Browsern unterstützt werden, als auch bei Seiten mit iFrames, weil die APIs keinen Zugriff auf die Inhalte von iFrames haben und diese deshalb nicht berücksichtigen können. Daher gibt es bei Seiten mit iFrames wahrscheinlich Unterschiede bei den mit dem Skript gemessenen Werten zu den PageSpeed-Insights-Werten.
Auch mit diesen Einschränkungen (iFrames kommen bei mir sowieso nur selten vor) erscheint mir die lokale Messung aber eine interessante Möglichkeit, eine bessere Übersicht über die Web-Vitals-Werte meiner Website und damit zumindest einen Anhaltspunkt zur User-Experience zu bekommen.
Die grundlegende Einbindung des Skripts kann so aussehen, wenn NPM genutzt wird:
import {getLCP, getFID, getCLS, getTTFB, getFCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
getFCP(console.log);
getTTFB(console.log);
Code-Sprache: JavaScript (javascript)
Die get
-Funktionen für die verschiedenen Web Vitals werden abgefeuert, wenn der Wert ermittelt wurde. So wie im Beispiel werden die Daten einfach ins Log der Developer-Tools geschrieben, in dem GitHub-Repo gibt es ein paar Beispiele, wo die Daten an Endpunkte geschickt werden.
Ich habe mich noch nicht ganz entschieden, wie ich es für meine Site umsetzen werde, aber nach einem kleinen Anstupser von Matthias wird wohl ein WordPress-Plugin dabei herauskommen, mit dem die Web-Vitals-Werte für eine WordPress-Installation lokal gesammelt werden können. Wenn das fertig ist, gibt es wahrscheinlich einen Folgeartikel mit näheren Details.
Wäre das nicht ein Plugin-Projekt für das Meetup 😉
Das ist eine ziemlich gute Idee 😀