So messen Sie Web Vitals mit Ihrem aktuellen Analysetool.
Die Möglichkeit, die tatsächliche Leistung Ihrer Kampagnen zu messen und Seiten sind entscheidend für die Diagnose und Verbesserung der Leistung. Ohne Feld Daten lässt sich nicht mit Sicherheit feststellen, tatsächlich die gewünschten Ergebnisse erzielen.
Viele beliebte Überwachung für echte Nutzer (RUM)-Analyseanbieter die Core Web Vitals-Messwerte in ihren sowie viele andere Web Vitals nutzen. Wenn Sie RUM-Analysetools einsetzen, sind Sie bestens aufgestellt, Sie können bewerten, wie gut die Seiten Ihrer Website die empfohlenen Core Web Vitals-Werte erfüllen. Grenzwerten und verhindern zu erhalten.
Wir empfehlen jedoch, ein Analysetool zu verwenden, das die Core Web Vitals unterstützt. Wenn das von Ihnen verwendete Analysetool diese nicht unterstützt, können Sie nicht unbedingt wechseln. Fast alle Analysetools bieten die Möglichkeit, Definieren und Messen benutzerdefinierter Messwerte oder events. Das bedeutet, dass Sie kann wahrscheinlich Ihren aktuellen Analyseanbieter zur Messung der Core Web Vitals verwenden. und fügen sie Ihren vorhandenen Analyseberichten und Dashboards hinzu.
In diesem Leitfaden werden Best Practices für die Messung von Core Web Vitals-Messwerten (oder benutzerdefinierten Messwerten) mit einem Drittanbieter- oder internen Analysetool erläutert. Sie kann auch als Leitfaden für Anbieter von Analyselösungen dienen, die ihren Dienst mit Core Web Vitals unterstützen möchten.
Benutzerdefinierte Messwerte oder Ereignisse verwenden
Wie bereits erwähnt, können Sie mit den meisten Analysetools benutzerdefinierte Daten messen. Wenn Ihr Analytics-Analysetool unterstützt, sollten Sie in der Lage sein, jeden einzelnen Vitalparameter, die diesen Mechanismus verwenden.
Das Messen benutzerdefinierter Messwerte oder Ereignisse in einem Analysetool drei Schritte:
- Definieren oder Registrieren den benutzerdefinierten Messwert im Administratorbereich Ihres Tools (falls erforderlich). Hinweis: Nicht alle Analyseanbieter verlangen, dass im Voraus benutzerdefinierte Messwerte definiert werden.)
- Berechnen Sie den Wert des Messwerts im Front-End-JavaScript-Code.
- Senden Sie den Messwert an Ihr Analyse-Backend und achten Sie darauf, dass der Name oder die ID angegeben ist entspricht der Definition in Schritt 1 (falls erforderlich).
Informationen zu den Schritten 1 und 3 finden Sie in der Dokumentation Ihres Analysetools. Anleitung. Für Schritt 2 können Sie den web-vitals-JavaScript-Bibliothek den Wert jedes Core Web Vitals-Messwerts berechnen.
Das folgende Codebeispiel zeigt, wie einfach sich diese Messwerte und an einen Analysedienst senden.
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics({name, value, id}) {
const body = JSON.stringify({name, value, id});
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Durchschnittswerte vermeiden
Es ist verlockend, einen Wertebereich für einen Leistungsmesswert einen Durchschnitt berechnen. Durchschnittswerte erscheinen auf den ersten Blick praktisch, da sie übersichtlichen Zusammenfassung einer großen Datenmenge, aber Sie sollten zur Interpretation der Seitenleistung.
Die Durchschnittswerte sind problematisch da sie nicht die Sitzung eines Nutzers repräsentieren. Ausreißer in beiden Bereichen der Verteilung könnte den Durchschnitt auf irreführende Weise verfälschen.
Beispielsweise kann eine kleine Gruppe von Nutzern extrem langsame Netzwerke oder Geräte nutzen. die dem maximalen Wertebereich entsprechen, aber nicht genügend Nutzer um den Durchschnitt so zu beeinflussen, dass ein Problem vorliegt.
Verwenden Sie nach Möglichkeit Perzentile anstelle von Durchschnitten. Perzentile über ein für einen bestimmten Leistungsmesswert genauer auf die gesamte Bandbreite an User Experience für Ihre Website. So können Sie sich auf Teilmengen tatsächlichen Erfahrungen, sodass Sie mehr Informationen erhalten wie möglich.
Sicherstellen, dass eine Verteilung gemeldet werden kann
Nachdem Sie die Werte für die einzelnen Core Web Vitals-Messwerte berechnet und mithilfe eines benutzerdefinierten Messwerts oder Ereignisses an Ihren Analysedienst senden, um einen Bericht oder ein Dashboard für die erfassten Werte zu erstellen.
Um sicherzustellen, dass Sie die empfohlenen Core Web Vitals-Werte erfüllen Grenzwerten erreichen, benötigen Sie Ihren Bericht um den Wert jedes Messwerts im 75. Perzentil anzuzeigen.
Wenn Ihr Analysetool keine Quantilberichte als integrierte Funktion bietet, können Sie diese Daten wahrscheinlich immer noch manuell abrufen, indem Sie einen Bericht erstellen, in dem in aufsteigender Reihenfolge sortiert. Sobald dieser Bericht erstellt ist, Ergebnis, das 75% der gesamten, sortierten Liste aller Werte in wird dieser Bericht das 75. Perzentil für diesen Messwert sein – und dies ist der egal, wie Sie Ihre Daten segmentieren (nach Gerätetyp, Verbindungstyp, Land usw.).
Wenn Ihr Analysetool keine detaillierte Berichterstellung auf Messwertebene liefert, können Sie dasselbe Ergebnis erzielen, wenn Ihr Analysetool unterstützt benutzerdefinierte Dimensionen Durch Festlegen eines eindeutigen, benutzerdefinierten Dimensionswert für jede einzelne Messwertinstanz, die Sie erfassen, sollten Sie einen Bericht erstellen können, der nach einzelnen Messwerten aufgeschlüsselt ist, Instanzen zu erstellen, wenn Sie die benutzerdefinierte Dimension in die Berichtskonfiguration aufnehmen. Da jede Instanz einen eindeutigen Dimensionswert hat, erfolgt keine Gruppierung.
Web Vitals-Bericht ist ein Beispiel für diese Technik, in der Google Analytics eingesetzt wird. Der Code für den Open-Source-Bericht, damit Entwickelnde es als Beispiel für die in diesem Artikel .
Daten zum richtigen Zeitpunkt senden
Einige Leistungsmesswerte können berechnet werden, sobald die Seite während andere (wie CLS) die gesamte Lebensdauer der Seite berücksichtigen sobald der Ladevorgang der Seite begonnen hat.
Dies kann jedoch problematisch sein, da sowohl beforeunload als auch unload
Ereignisse nicht zuverlässig sind (insbesondere auf Mobilgeräten) und ihre Verwendung nicht
empfohlen
(da sie verhindern können, dass eine Seite für den Rückwärtspfeil
Cache) beginnen.
Bei Messwerten, die die gesamte Lebensdauer einer Seite erfassen, ist es am besten,
Der aktuelle Wert des Messwerts befindet sich während des visibilitychange-Ereignisses, wenn der
der Sichtbarkeitsstatus der Seite ändert sich zu hidden. Das liegt daran, dass – sobald die Seite
der Sichtbarkeitsstatus in hidden geändert. Es gibt keine Garantie dafür, dass
kann diese Seite wieder ausgeführt werden. Dies gilt insbesondere für
Systeme, bei denen die Browser-App selbst ohne Seitenrückrufe geschlossen werden kann
gefeuert wird.
Beachten Sie, dass mobile Betriebssysteme in der Regel den visibilitychange auslösen.
beim Wechseln von Tabs, Wechseln von Apps oder Schließen der Browser-App selbst.
Sie lösen auch das Ereignis visibilitychange aus, wenn ein Tab geschlossen oder zum
eine neue Seite zu öffnen. Dies macht das visibilitychange-Ereignis weitaus zuverlässiger als das
unload- oder beforeunload-Ereignisse.
Leistung im Zeitverlauf analysieren
Sobald Sie Ihre Analytics-Implementierung aktualisiert haben, Core Web Vitals-Messwerte erhalten, können Sie als Nächstes erfassen, wie Änderungen an Ihrer Website die Leistung im Laufe der Zeit.
Änderungen versionieren
Ein naiver (und letztlich unzuverlässiger) Ansatz zur Nachverfolgung von Änderungen besteht darin, und gehen dann davon aus, dass alle Messwerte Bereitstellungsdatum der neuen Website entsprechen und alle Messwerte vor dem Bereitstellungsdatum der alten Website entsprechen. Es gibt jedoch zahlreiche Faktoren, (einschließlich Caching auf der HTTP-, Service Worker- oder CDN-Ebene) kann dies verhindern. von der Arbeit ab.
Ein viel besserer Ansatz besteht darin, für jede bereitgestellte Änderung eine eindeutige Version zu erstellen. und diese Version dann in Ihrem Analysetool erfassen. Die meisten Analysetools werden unterstützt das Festlegen einer Version. Ist dies bei Ihrer Dimension nicht der Fall, können Sie eine benutzerdefinierte Dimension erstellen und Dimension auf die bereitgestellte Version anwenden.
Tests durchführen
Sie können die Versionsverwaltung sogar noch weiter ausbauen, indem Sie mehrere Versionen (oder Tests) gleichzeitig.
Verwenden Sie diese Funktion, wenn Sie mit Ihrem Analysetool Testgruppen definieren können. Andernfalls können Sie mithilfe von benutzerdefinierten Dimensionen sicherstellen, dass jeder Ihrer Messwerte können einer bestimmten Testgruppe in Ihren Berichten zugeordnet werden.
Nachdem Sie in Ihren Analysen Tests durchgeführt haben, können Sie eine zu testende Änderung mit einer Untergruppe Ihrer Nutzer und vergleichen Sie die Leistung von die sich auf die Leistung der Nutzer in der Kontrollgruppe auswirken. Sobald Sie sichergehen, dass eine Änderung die Leistung verbessert, können Sie sie für alle allen Nutzenden.
Dafür sorgen, dass sich die Messung nicht auf die Leistung auswirkt
Bei der Leistungsmessung für echte Nutzer ist es absolut wichtig, der von Ihnen ausgeführte Code zur Leistungsmessung keine negativen Auswirkungen die Leistung Ihrer Seite zu verbessern. Wenn dies der Fall ist, sind alle Schlussfolgerungen, wie sich die Leistung auf Ihr Unternehmen auswirkt, nie wissen, ob der Analytics-Code selbst den größten negative Auswirkungen haben.
Befolgen Sie immer diese Prinzipien, wenn Sie RUM-Analysecode auf Ihrem Produktionswebsite:
Analysen verschieben
Der Analytics-Code sollte immer asynchron, nicht blockierend geladen werden. sollte sie zuletzt geladen werden. Wenn Sie Ihren Analysecode in einem kann sich das negativ auf den LCP auswirken.
Alle APIs zur Messung der Core Web Vitals-Messwerte wurden speziell
wurde entwickelt, um das asynchrone und verzögerte Laden von Skripts (über die
buffered), sodass
können Sie Ihre Skripts
frühzeitig laden.
Für den Fall, dass Sie einen Messwert messen, der später im
beim Laden der Seite einfügen, sollten Sie nur den Code inline einfügen, der vorab ausgeführt werden muss.
in das <head> Ihres Dokuments einfügen, sodass es nicht das Rendering
) und verschieben Sie den Rest. Laden Sie nicht alle Ihre
und Analysen frühzeitig durchführen,
nur weil sie für eine einzelne Metrik erforderlich sind.
Keine langen Aufgaben erstellen
Analytics-Code wird häufig als Reaktion auf Nutzereingaben ausgeführt. Wenn Ihr Analysecode jedoch viele DOM-Messungen durchführt oder andere prozessorintensive APIs nutzt, der Analysecode selbst zu einer schlechten Reaktionsfähigkeit bei Eingaben führen kann. Wenn außerdem Die JavaScript-Datei mit Ihrem Analysecode ist groß und führt diese Datei aus kann den Hauptthread blockieren und sich negativ auf die Interaction to Next Paint (INP) einer Seite auswirken.
Nicht blockierende APIs verwenden
APIs wie
sendBeacon()
und
requestIdleCallback()
sind speziell darauf ausgelegt, nicht kritische Aufgaben so auszuführen,
nutzungskritische Aufgaben blockieren.
Diese APIs sind großartige Tools zur Verwendung in einer RUM-Analysebibliothek.
Im Allgemeinen sollten alle Analyse-Beacons über die sendBeacon() API gesendet werden.
(falls verfügbar) und der gesamte Code zur Messung der passiven Analysen sollte während
und Inaktivitätszeiten.
Nicht mehr erfassen als nötig
Der Browser stellt viele Leistungsdaten bereit, aber nur weil diese Daten bedeutet nicht unbedingt, dass Sie sie aufzeichnen und an Ihren Analyseservern.
Zum Beispiel die Resource Timing API liefert detaillierte Zeitdaten für jede einzelne Ressource, die auf Ihrer Seite geladen wird. Es ist jedoch unwahrscheinlich, dass alle diese Daten notwendig oder nützlich sind, wodurch die Ressourcenauslastung verbessert wird.
Kurz gesagt: Beobachten Sie Daten nicht nur, weil sie vorhanden sind, sondern stellen Sie sicher, dass sie auch verwendet werden. bevor Ressourcen für die Verfolgung verbraucht werden.