Cómo medir Web Vitals con su herramienta de análisis actual.
Aktualisiert
Die Fähigkeit, die tatsächliche Leistung Ihrer Seiten zu messen und darüber Bericht zu erstatten, ist entscheidend für die Diagnose und Verbesserung der Leistung im Laufe der Zeit. Ohne Felddaten ist es unmöglich, sicher zu wissen, ob die Änderungen, die Sie an Ihrer Site vornehmen, tatsächlich die gewünschten Ergebnisse erzielen.
Viele beliebt Real User Monitoring (RUM) Analytics-Anbieter unterstützen bereits Core Web Vitals-Metriken in ihren Tools (sowie viele andere Web Vitals). Wenn Sie derzeit eines dieser RUM-Analysetools verwenden, können Sie hervorragend beurteilen, wie gut Ihre Websiteseiten die von Core Web Vitals empfohlenen Schwellenwerte erfüllen, und in Zukunft Regressionen vermeiden.
Wir empfehlen zwar die Verwendung eines Analysetools, das Core Web Vitals-Metriken unterstützt. Wenn das derzeit verwendete Analysetool diese Metriken jedoch nicht unterstützt, müssen Sie keine Änderungen vornehmen. Fast alle Analysewerkzeuge bieten eine Möglichkeit zum Definieren und Messen benutzerdefinierte Metriken oder
VeranstaltungenDies bedeutet, dass Sie wahrscheinlich Ihren aktuellen Analyseanbieter verwenden können, um die wichtigsten Web-Vitals-Metriken zu messen und sie Ihren vorhandenen Analyseberichten und Dashboards hinzuzufügen.
In diesem Handbuch werden bewährte Methoden zum Messen von Core Web Vitals-Metriken (oder benutzerdefinierten Metriken) mit einem internen Analysetool oder einem Analysetool eines Drittanbieters erläutert. Es kann auch als Leitfaden für Analytics-Anbieter dienen, die ihren Service um Core Web Vitals-Unterstützung erweitern möchten.
Verwenden Sie benutzerdefinierte Metriken oder Ereignisse
Wie oben erwähnt, können Sie mit den meisten Analysetools benutzerdefinierte Daten messen. Wenn Ihr Analysetool dies unterstützt, sollten Sie in der Lage sein, jede der Core Web Vitals-Metriken mithilfe dieses Mechanismus zu messen.
Das Messen benutzerdefinierter Metriken oder Ereignisse in einem Analysetool erfolgt im Allgemeinen in drei Schritten:
- Definieren oder registrieren
die benutzerdefinierte Metrik in Ihrem Tool-Manager (falls erforderlich). (Hinweis: Nicht bei allen Analytics-Anbietern müssen benutzerdefinierte Metriken im Voraus definiert werden.) - Calcule el valor de la métrica en su código JavaScript Vorderes Ende.
- Senden Sie den Metrikwert an Ihr Analytics-Backend und stellen Sie sicher, dass der Name oder die ID mit der in Schritt 1 definierten übereinstimmt (bei Bedarf erneut).
Anweisungen zu den Schritten 1 und 3 finden Sie in der Dokumentation zu Ihrem Diagnose-Tester. Für Schritt 2 können Sie die verwenden
Web-Vitale JavaScript-Bibliothek zum Berechnen des Werts jeder der Core Web Vitals-Metriken.
Das folgende Codebeispiel zeigt, wie einfach es sein kann, diese Metriken im Code zu verfolgen und an einen Analysedienst zu senden.
importieren {getCLS, getFID, getLCP} desde 'web-vitals';Funktion sendToAnalytics({Süßkartoffel, Wert, gehen}) {
const Körper = JSON.stringify({Süßkartoffel, Wert, gehen});
(Navigator.sendBeacon && Navigator.sendBeacon('/analytics', Körper)) ||
holen('/analytics', {Körper, Methode: 'POST', bleib am Leben: wahr});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
Stellen Sie sicher, dass Sie eine Verteilung melden können
Una vez que haya calculado los valores para cada una de las métricas de Core Web Vitals y los haya enviado a su servicio de análisis utilizando una métrica o un Veranstaltung personalizado, el siguiente paso es crear un informe o panel que muestre los valores que se han recopilado.
Um sicherzustellen, dass Sie die von Core Web Vitals empfohlenen Schwellenwerte einhalten, benötigen Sie in Ihrem Bericht den Wert jeder Metrik beim 75. Perzentil.
Wenn Ihr Analysetool kein Quantil-Reporting als integrierte Funktion anbietet, können Sie diese Daten wahrscheinlich trotzdem manuell abrufen, indem Sie einen Bericht erstellen, in dem alle Metrikwerte in aufsteigender Reihenfolge sortiert sind. Sobald dieser Bericht erstellt wurde, ist das Ergebnis, das der 75% des Weges durch die vollständige und geordnete Liste aller Werte in diesem Bericht ist, das 75. Perzentil für diese Metrik. Dies ist unabhängig von Ihrer Segmentierung der Fall Ihre Daten (nach Gerätetyp, Verbindungstyp, Land usw.).
Wenn Ihr Analysetool standardmäßig keine Granularität für die Berichterstellung auf Metrikebene bietet, können Sie wahrscheinlich dasselbe Ergebnis erzielen, wenn Ihr Analysetool dies unterstützt benutzerdefinierte Abmessungen. Durch Festlegen eines eindeutigen benutzerdefinierten Dimensionswerts für jede einzelne Metrikinstanz, die Sie verfolgen, sollten Sie in der Lage sein, einen Bericht zu erstellen, der nach einzelnen Metrikinstanzen aufgeschlüsselt ist, wenn Sie die benutzerdefinierte Dimension in Ihre Berichtseinstellungen aufnehmen. Da jede Instanz einen eindeutigen Dimensionswert hat, erfolgt keine Gruppierung.
Por ejemplo, el siguiente histograma se generó a partir de Google Analytics utilizando la técnica descrita anteriormente (dado que Google Analytics no admite informes de cuantiles en ninguno de sus informes estándar). Los datos se consultaron utilizando el
Analytics-Berichts-API und wird von einer JavaScript-Datenvisualisierungsbibliothek angezeigt:
Tipp: die Web-Vitale Die Bibliothek bietet eine ID für jede gemeldete Metrikinstanz, sodass in den meisten Analysetools problemlos Verteilungen erstellt werden können. Beobachten Sie die
Metrisch Schnittstellendokumentation für weitere Details.
Senden Sie Ihre Daten zum richtigen Zeitpunkt
Einige Leistungsmetriken können berechnet werden, nachdem die Seite vollständig geladen wurde, während andere (z. B. CLS) die gesamte Lebensdauer der Seite berücksichtigen und erst dann endgültig sind, wenn die Seite mit dem Herunterladen begonnen hat.
Dies kann jedoch problematisch sein, da sowohl die vor dem Entladen y entladen
Ereignisse sind unzuverlässig (insbesondere auf Mobilgeräten) und werden verwendet nicht empfohlen
(ya que pueden evitar que una página Sein elegible para la Cache zurück).
Für Metriken, die die gesamte Lebensdauer einer Seite verfolgen, ist es am besten, den aktuellen Wert der Metrik während des zu senden Sichtbarkeitsänderung Ereignis, wenn sich der Sichtbarkeitsstatus der Seite in ändert versteckt. Dies liegt daran, dass sich der Sichtbarkeitsstatus der Seite ändert, sobald versteckt: No hay garantía de que ningún script de esa página pueda ejecutarse de nuevo. Esto es especialmente cierto en los sistemas operativos móviles donde la aplicación del Browser en sí se puede cerrar sin que se active ninguna devolución de llamada de página.
Beachten Sie, dass mobile Betriebssysteme im Allgemeinen aktivieren Sichtbarkeitsänderung
Ereignis beim Wechseln von Registerkarten, Wechseln von Anwendungen oder Schließen der Browseranwendung. Sie schießen auch die Sichtbarkeitsänderung Ereignis beim Schließen einer Registerkarte oder beim Navigieren zu einer neuen Seite. Das macht die Sichtbarkeitsänderung viel zuverlässigeres Ereignis als das
entladen oder vor dem Entladen Veranstaltungen.
weil Einige BrowserfehlerEs gibt einige Fälle, in denen Sichtbarkeitsänderung Das Ereignis wird nicht ausgelöst. Wenn Sie eine eigene Analysebibliothek erstellen, ist es wichtig, diese Fehler zu kennen. Notiere dass der Web-Vitale
Die JavaScript-Bibliothek berücksichtigt alle diese Fehler.
Überwachen Sie die Leistung im Laufe der Zeit
Nachdem Sie Ihre Analyseimplementierung aktualisiert haben, um die Metriken von Core Web Vitals zu verfolgen und darüber Bericht zu erstatten, besteht der nächste Schritt darin, zu verfolgen, wie sich Änderungen an Ihrer Website im Laufe der Zeit auf die Leistung auswirken.
Version Ihrer Änderungen
Un enfoque ingenuo (y en última instancia poco confiable) para rastrear cambios es implementar cambios en la producción y luego asumir que todas las métricas recibidas después de la fecha de implementación corresponden al nuevo sitio y todas las métricas recibidas antes de la fecha de implementación corresponden al sitio anterior. Sin embargo, cualquier número de factores (incluido el almacenamiento en Zwischenspeicher en la capa HTTP, trabajador de servicio o CDN) puede evitar que esto funcione.
Ein viel besserer Ansatz besteht darin, für jede implementierte Änderung eine eindeutige Version zu erstellen und diese Version dann in Ihrem Analysetool zu verfolgen. Die meisten Analysetools unterstützen das Festlegen einer Version. Wenn dies bei Ihnen nicht der Fall ist, können Sie eine benutzerdefinierte Dimension erstellen und diese Dimension in Ihrer bereitgestellten Version festlegen.
Experimente durchführen
Sie können die Versionskontrolle noch einen Schritt weiter führen, indem Sie mehrere Versionen (oder Experimente) gleichzeitig verfolgen.
Wenn Sie mit Ihrem Analysetool Gruppen von Experimenten definieren können, verwenden Sie diese Funktion. Andernfalls können Sie benutzerdefinierte Dimensionen verwenden, um sicherzustellen, dass jeder Ihrer Metrikwerte einer bestimmten Versuchsgruppe in Ihren Berichten zugeordnet werden kann.
Wenn Sie anstelle der Analyse experimentieren, können Sie eine experimentelle Änderung für eine Teilmenge Ihrer Benutzer implementieren und die Leistung dieser Änderung mit der Leistung der Benutzer in der Kontrollgruppe vergleichen. Sobald Sie sicher sind, dass eine Änderung tatsächlich die Leistung verbessert, können Sie sie für alle Benutzer implementieren.
Los grupos de experimentos siempre deben establecerse en el Server. Evite utilizar cualquier herramienta de experimentación o prueba A / B que se ejecute en el Klient. Por lo general, estas herramientas bloquearán la representación hasta que se determine el grupo de experimentos de un Nutzername, lo que puede ser perjudicial para sus tiempos de LCP.
Stellen Sie sicher, dass die Messung die Leistung nicht beeinträchtigt
Bei der Messung der Leistung an realen Benutzern ist es unbedingt erforderlich, dass der von Ihnen ausgeführte Leistungsmesscode die Leistung Ihrer Seite nicht negativ beeinflusst. In diesem Fall sind alle Schlussfolgerungen, die Sie zu den Auswirkungen Ihrer Leistung auf Ihr Unternehmen ziehen möchten, nicht zuverlässig, da Sie nie wissen werden, ob das Vorhandensein des Analysecodes selbst die größten negativen Auswirkungen hat.
Befolgen Sie bei der Implementierung von RUM-Analysecode auf Ihrem Produktionsstandort immer die folgenden Grundsätze:
Verschieben Sie Ihre Analysen
Analysecode sollte immer asynchron und ohne Blockierung geladen werden und sollte im Allgemeinen zuletzt geladen werden. Das Blockieren Ihres Scan-Codes kann sich negativ auf LCP auswirken.
Todas las API utilizadas para medir las métricas de Core Web Vitals se diseñaron específicamente para admitir la carga de Skripte diferida y asincrónica (a través del
gepuffert flag), sodass Sie sich nicht beeilen müssen, um Ihre Skripte vorzeitig zu laden.
Für den Fall, dass Sie eine Metrik messen, die später in der Zeitleiste für das Laden von Seiten nicht berechnet werden kann, müssen Sie diese einschließen nur der Code, der früh in der ausgeführt werden sollte von Ihrem Dokument (es handelt sich also nicht um eine Verarbeitungssperranforderung) und verschieben Sie den Rest. Laden Sie nicht alle Ihre Analysen im Voraus, nur weil eine einzelne Metrik dies erfordert.
Erstellen Sie keine langen Aufgaben
Parsing-Code wird häufig als Reaktion auf Benutzereingaben ausgeführt. Wenn Ihr Parsing-Code jedoch viele DOM-Messungen durchführt oder andere prozessorintensive APIs verwendet, kann der Parsing-Code selbst eine schlechte Eingabeantwort verursachen. Wenn die JavaScript-Datei, die Ihren Parsing-Code enthält, groß ist, kann das Ausführen dieser Datei den Hauptthread zum Absturz bringen und die FID negativ beeinflussen.
Verwenden Sie eine nicht blockierende API
API wie
sendBeacon ()
y
requestIdleCallback()
Sie wurden speziell entwickelt, um unkritische Aufgaben so auszuführen, dass kritische Aufgaben für den Benutzer nicht blockiert werden.
Diese APIs eignen sich hervorragend zur Verwendung in einer RUM-Analysebibliothek.
Im Allgemeinen sollten alle analytischen Beacons mit dem gesendet werden sendBeacon () Die API (falls verfügbar) und der gesamte Messcode für passive Analysen müssen während Inaktivitätsperioden ausgeführt werden.
Anleitungen zur Maximierung der Ausfallzeit und zur Sicherstellung, dass Code bei Bedarf dringend ausgeführt werden kann (z. B. wenn ein Benutzer die Seite herunterlädt), finden Sie unter
inaktiv bis dringend
Muster.
Verfolgen Sie nicht mehr als Sie brauchen
Der Browser stellt eine große Menge an Leistungsdaten zur Verfügung. Die Tatsache, dass die Daten verfügbar sind, bedeutet jedoch nicht zwangsläufig, dass er sie aufzeichnen und an seine Analyseserver senden sollte.
Zum Beispiel er Ressourcenzeit-API
bietet detaillierte Zeitdaten für jede auf Ihre Seite hochgeladene Ressource. Es ist jedoch unwahrscheinlich, dass all diese Daten erforderlich oder nützlich sind, um die Leistung beim Laden von Ressourcen zu verbessern.
Kurz gesagt, verfolgen Sie die Daten nicht nur, weil sie vorhanden sind, sondern stellen Sie sicher, dass die Daten verwendet werden, bevor Sie Ressourcen für ihre Verfolgung verbrauchen.
