Erfahren Sie mehr über Daten zur Seitenladeleistung (Web-Apps)

Performance Monitoring nutzt Traces , um Daten über überwachte Prozesse in Ihrer App zu sammeln. Eine Ablaufverfolgung ist ein Bericht, der Daten enthält, die zwischen zwei Zeitpunkten in Ihrer App erfasst wurden.

Bei Web-Apps erfasst die Leistungsüberwachung automatisch eine Ablaufverfolgung für jede Seite Ihrer App, die als Seitenladeverfolgung bezeichnet wird. Jeder Seitenlade-Trace erfasst die folgenden Standardmetriken:

  • First Paint – Eine Metrik, die die Zeit zwischen der Navigation des Benutzers zu einer Seite und dem Auftreten einer visuellen Änderung misst

  • First Contentful Paint – Eine Metrik, die die Zeit zwischen der Navigation eines Benutzers zu einer Seite und der Anzeige bedeutungsvoller Inhalte wie einem Bild oder Text misst

  • domInteractive – Eine Metrik, die die Zeit zwischen der Navigation des Benutzers zu einer Seite und dem Zeitpunkt, an dem die Seite für den Benutzer als interaktiv betrachtet wird, misst

  • domContentLoadedEventEnd – Eine Metrik, die die Zeit zwischen der Navigation des Benutzers zu einer Seite und dem vollständigen Laden und Analysieren des ursprünglichen HTML-Dokuments misst

  • LoadEventEnd – Eine Metrik, die die Zeit zwischen der Navigation des Benutzers zur Seite und dem Abschluss des Ladeereignisses des aktuellen Dokuments misst

  • Verzögerung der ersten Eingabe – Eine Metrik, die die Zeit zwischen der Interaktion des Benutzers mit einer Seite und der Reaktion des Browsers auf diese Eingabe misst

Sie können Daten aus diesen Ablaufverfolgungen auf der Unterregisterkarte „Seitenladevorgang “ der Ablaufverfolgungstabelle anzeigen, die sich unten im Leistungs- Dashboard befindet (weitere Informationen zur Verwendung der Konsole finden Sie weiter unten auf dieser Seite).

Definition eines Seitenlade-Trace

Diese Ablaufverfolgung misst mehrere Kennzahlen darüber, wie die Seiten in Ihrer App geladen werden, insbesondere wie lange es dauert, bis gemeinsame Ladepunkte erreicht werden, z. B. bei einer responsiven App.

Seitenladeverfolgungen helfen Ihnen , die wichtigsten Web-Vitals Ihrer App zu verfolgen, wie z. B. den ersten Contentful Paint.

Für Seitenladeverfolgungen gesammelte Metriken

Bei diesen Ablaufverfolgungen handelt es sich um sofort einsatzbereite Ablaufverfolgungen, sodass Sie ihnen keine benutzerdefinierten Metriken oder benutzerdefinierten Attribute hinzufügen können.

Erster Anstrich

Diese Metrik misst die Zeit zwischen der Navigation des Benutzers zu einer Seite und dem Auftreten einer visuellen Änderung.

Diese Metrik ist nützlich, da die erste Anzeige Ihren Benutzern signalisiert, dass die Seite geladen wird.

  • Startet, wenn der Benutzer zu einer Seite navigiert.

  • Stoppt, wenn eine visuelle Änderung auftritt, einschließlich einer Änderung der Hintergrundfarbe oder dem Laden einer Kopfzeile.

Erste inhaltsreiche Farbe

Diese Metrik misst die Zeit zwischen der Navigation eines Benutzers zu einer Seite und der Anzeige bedeutungsvoller Inhalte wie einem Bild oder Text.

Diese Metrik ist nützlich, um Erkenntnisse darüber zu gewinnen, wie schnell Ihre Benutzer den tatsächlichen Inhalt Ihrer App und nicht nur eine neue Hintergrundfarbe oder einen neuen Header sehen.

  • Startet, wenn der Benutzer zu einer Seite navigiert.

  • Stoppt sofort, nachdem der Browser den ersten Inhalt aus dem DOM rendert, einschließlich Text, Bildern (einschließlich Hintergrundbildern), nicht weißer Leinwand oder SVG.

domInteraktiv

Diese Metrik misst die Zeit zwischen der Navigation des Benutzers zu einer Seite und dem Zeitpunkt, an dem die Seite für den Benutzer als interaktiv angesehen wird.

Diese Metrik ist nützlich, um Erkenntnisse darüber zu gewinnen, wie schnell Ihre Benutzer tatsächlich mit Elementen in Ihrer App, wie Schaltflächen und Hyperlinks, interagieren können, anstatt sie nur auf dem Bildschirm zu sehen. Beachten Sie, dass dies nicht bedeutet, dass der Browser auf die Interaktion reagiert (zu dieser Metrik siehe Trace der ersten Eingabeverzögerung ).

  • Startet, wenn der Benutzer zu einer Seite navigiert.

  • Stoppt unmittelbar bevor der Benutzeragent die Bereitschaft des aktuellen HTML-Dokuments auf „interaktiv“ setzt.

domContentLoadedEventEnd

Diese Metrik misst die Zeit zwischen der Navigation des Benutzers zu einer Seite und dem vollständigen Laden und Analysieren des ursprünglichen HTML-Dokuments.

  • Startet, wenn der Benutzer zu einer Seite navigiert.

  • Stoppt sofort, nachdem das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde ( DOMContentLoaded ). Dies bedeutet jedoch nicht, dass das Laden von Stylesheets, Bildern und Subframes abgeschlossen ist.

LoadEventEnd

Diese Metrik misst die Zeit zwischen der Navigation des Benutzers zur Seite und dem Abschluss des Ladeereignisses des aktuellen Dokuments.

Diese Metrik ist nützlich, um Erkenntnisse darüber zu gewinnen, wie lange es dauert, alle Ihre Inhalte, einschließlich Stylesheets und Bilder, zu laden.

  • Startet, wenn der Benutzer zu einer Seite navigiert.

  • Stoppt sofort, nachdem das Ladeereignis des aktuellen HTML-Dokuments abgeschlossen ist.

Erste Eingabeverzögerung

Diese Metrik misst die Zeit zwischen der Interaktion des Benutzers mit einer Seite und der Reaktion des Browsers auf diese Eingabe.

Diese Metrik ist nützlich, da der Browser, der auf eine Benutzerinteraktion reagiert, Ihren Benutzern einen ersten Eindruck von der Reaktionsfähigkeit Ihrer App vermittelt.

  • Startet, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. durch Klicken auf eine Schaltfläche oder einen Hyperlink.

  • Stoppt sofort, nachdem der Browser auf die Eingabe reagieren kann, was bedeutet, dass der Browser nicht damit beschäftigt ist, Ihre Inhalte zu laden oder zu analysieren.

Beachten Sie, dass Sie zum Messen der ersten Eingabeverzögerungsmetrik die Polyfill-Bibliothek für diese Metrik hinzufügen müssen. Anweisungen zur Installation finden Sie in der Dokumentation der Bibliothek.

Leistungsdaten verfolgen, anzeigen und filtern

Um Echtzeit-Leistungsdaten anzuzeigen, stellen Sie sicher, dass Ihre App eine Performance Monitoring SDK-Version verwendet, die mit der Echtzeit-Datenverarbeitung kompatibel ist. Erfahren Sie mehr über Echtzeit-Leistungsdaten .

Verfolgen Sie wichtige Kennzahlen in Ihrem Dashboard

Um zu erfahren, wie Ihre wichtigsten Kennzahlen im Trend liegen, fügen Sie sie Ihrer Kennzahlentafel oben im Leistungs- Dashboard hinzu. Sie können Regressionen schnell erkennen, indem Sie wöchentliche Änderungen sehen oder überprüfen, ob die jüngsten Änderungen in Ihrem Code die Leistung verbessern.

ein Bild der Metriktafel im Firebase Performance Monitoring-Dashboard

Um eine Metrik zu Ihrem Metrik-Board hinzuzufügen, führen Sie die folgenden Schritte aus:

  1. Gehen Sie zum Performance- Dashboard in der Firebase-Konsole.
  2. Klicken Sie auf eine leere Metrikkarte und wählen Sie dann eine vorhandene Metrik aus, die Sie Ihrem Board hinzufügen möchten.
  3. Klicken Sie auf einer ausgefüllten Metrikkarte auf , um weitere Optionen anzuzeigen, beispielsweise zum Ersetzen oder Entfernen einer Metrik.

Das Metrik-Board zeigt gesammelte Metrikdaten im Zeitverlauf an, sowohl in grafischer Form als auch als numerische prozentuale Änderung.

Erfahren Sie mehr über die Verwendung des Dashboards .

Sehen Sie sich Traces und ihre Daten an

Um Ihre Traces anzuzeigen, gehen Sie zum Performance- Dashboard in der Firebase-Konsole, scrollen Sie nach unten zur Traces-Tabelle und klicken Sie dann auf die entsprechende Unterregisterkarte. Die Tabelle zeigt einige Top-Metriken für jede Spur an, und Sie können die Liste sogar nach der prozentualen Änderung für eine bestimmte Metrik sortieren.

Performance Monitoring bietet eine Fehlerbehebungsseite in der Firebase-Konsole, die Metrikänderungen hervorhebt, sodass Sie die Auswirkungen von Leistungsproblemen auf Ihre Apps und Benutzer schnell beheben und minimieren können. Sie können die Fehlerbehebungsseite verwenden, wenn Sie sich über potenzielle Leistungsprobleme informieren, beispielsweise in den folgenden Szenarien:

  • Sie wählen relevante Kennzahlen im Dashboard aus und bemerken ein großes Delta.
  • Sie sortieren die Traces-Tabelle so, dass oben die größten Deltas angezeigt werden, und Sie sehen eine deutliche prozentuale Änderung.
  • Sie erhalten eine E-Mail-Benachrichtigung, die Sie über ein Leistungsproblem informiert.

Sie können auf die Fehlerbehebungsseite wie folgt zugreifen:

  • Klicken Sie im Metrik-Dashboard auf die Schaltfläche „Metrikdetails anzeigen“ .
  • Wählen Sie auf einer beliebigen Metrikkarte aus => Details anzeigen . Auf der Fehlerbehebungsseite werden Informationen zu der von Ihnen ausgewählten Metrik angezeigt.
  • Klicken Sie in der Traces-Tabelle auf einen Trace-Namen oder einen beliebigen Metrikwert in der mit diesem Trace verknüpften Zeile.
  • Klicken Sie in einer E-Mail-Benachrichtigung auf Jetzt untersuchen .

Wenn Sie in der Traces-Tabelle auf einen Trace-Namen klicken, können Sie einen Drilldown zu den interessierenden Metriken durchführen. Drücke den Klicken Sie auf die Schaltfläche „Filter “ , um die Daten nach Attribut zu filtern, zum Beispiel:

ein Bild von Firebase Performance Monitoring-Daten, die nach Attribut gefiltert werden
  • Filtern Sie nach Seiten-URL , um Daten für eine bestimmte Seite Ihrer Website anzuzeigen
  • Filtern Sie nach dem effektiven Verbindungstyp, um zu erfahren, wie sich eine 3G-Verbindung auf Ihre App auswirkt
  • Filtern Sie nach Land, um sicherzustellen, dass Ihr Datenbankstandort keine Auswirkungen auf eine bestimmte Region hat

Erfahren Sie mehr über das Anzeigen von Daten für Ihre Traces .

Nächste Schritte