Informationen zu Leistungsdaten beim Laden von Seiten (Web-Apps)

Performance - Monitoring - Anwendungen Spuren , um Daten zu überwachten Prozesse in Ihrer Anwendung. Ein Trace ist ein Bericht, der Daten enthält, die zwischen zwei Zeitpunkten in Ihrer App erfasst wurden.

Für Web - Anwendungen, Leistungsbewertung sammelt automatisch eine Spur für jede Seite Ihrer App eine Seite zu laden Spur bezeichnet. Jeder Seitenlade-Trace erfasst die folgenden Standardmesswerte:

  • erste Farbe - Eine Metrik , dass misst die Zeit zwischen , wenn der Benutzer navigiert zu einer Seite und , wenn eine visuelle Veränderung geschieht

  • erste gehalt Farbe - Eine Metrik , dass misst die Zeit zwischen , wenn ein Benutzer navigiert zu einer Seite und , wenn sinnvollen Inhalte angezeigt wird , wie ein Bild oder Text

  • DOMInteractive - Eine Metrik , dass misst die Zeit zwischen , wenn der Benutzer navigiert zu einer Seite , und wenn die Seite betrachtet wird interaktiv für den Benutzer

  • domContentLoadedEventEnd - Eine Metrik , dass misst die Zeit zwischen , wenn der Benutzer navigiert zu einer Seite und wenn das anfängliche HTML - Dokument vollständig geladen und analysiert

  • loadEventEnd - Eine Metrik , dass misst die Zeit zwischen , wenn der Benutzer navigiert zur Seite und wenn die Last des aktuellen Dokuments Ereignis abgeschlossen ist

  • erste Eingangsverzögerung - eine Kennzahl, misst die Zeit zwischen , wenn der Benutzer interagiert mit einer Seite und , wenn der Browser zu reagieren auf diesen Eingang der Lage ist ,

Sie können Daten aus diesen Spuren in der Seite Last - Unterreiter der Spuren Tabelle anzuzeigen, die am unteren Rande der Performance Dashboard ist (weitere Informationen über die Konsole später auf dieser Seite).

Definition eines Seitenlade-Trace

Dieser Trace misst mehrere Metriken darüber, wie die Seiten in Ihrer App geladen werden, insbesondere wie lange es dauert, gängige Ladepunkte zu erreichen, wie bei einer responsiven App.

Seite laden Spuren helfen Sie Ihren App verfolgen Kernbahn Eingeweide , wie erste gehalt Farbe.

Gesammelte Metriken für Seitenlade-Traces

Diese Ablaufverfolgungen sind sofort einsatzbereite Ablaufverfolgungen, sodass Sie ihnen keine benutzerdefinierten Metriken oder benutzerdefinierten Attribute hinzufügen können.

Erster Anstrich

Diese Metrik misst die Zeit zwischen , wenn der Benutzer navigiert zu einer Seite und , wenn eine optische Veränderung geschieht.

Diese Metrik ist seit den ersten Lack Signalen an den Benutzer nützlich , dass die Seite zu laden beginnt.

  • Startet, wenn der Benutzer zu einer Seite navigiert.

  • Stoppt , wenn eine optische Veränderung geschieht, einschließlich einer Hintergrundfarbe ändern oder einen Header Laden.

Erste zufriedene Farbe

Diese Metrik misst die Zeit zwischen dem Navigieren eines Benutzers zu einer Seite und der Anzeige sinnvoller Inhalte wie ein Bild oder ein Text.

Dieser Messwert ist hilfreich, um zu erfahren, wie schnell Ihre Nutzer den tatsächlichen Inhalt Ihrer App sehen und nicht nur eine neue Hintergrundfarbe oder einen neuen Header.

  • Startet, wenn der Benutzer zu einer Seite navigiert.

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

domInteraktiv

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

Diese Metrik ist hilfreich, 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 reagieren (für diese Metrik, siehe erste Eingangsverzögerungsspur ).

  • 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 dem Navigieren des Benutzers zu einer Seite und dem vollständigen Laden und Parsen des ursprünglichen HTML-Dokuments.

  • Startet, wenn der Benutzer zu einer Seite navigiert.

  • Stoppen sofort nach dem ersten HTML - Dokument vollständig geladen und analysiert ( DOMContentLoaded ), aber dies bedeutet nicht , dass Stylesheets, Bilder und Subframes fertig geladen sind.

loadEventEnd

Diese Metrik misst die Zeit zwischen , wenn der Benutzer navigiert zur Seite und wenn das Ladeereignis abschließt der aktuellen Dokument.

Diese Metrik ist hilfreich, um zu erfahren, 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 Eingangsverzö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.

  • Beginnt , wenn der Benutzer zuerst wirkt mit einem Element auf der Seite, wie eine Taste oder einen Hyperlink zu klicken.

  • Stoppt sofort, nachdem der Browser auf die Eingabe reagiert hat, was bedeutet, dass der Browser nicht damit beschäftigt ist, Ihren Inhalt zu laden oder zu analysieren.

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

Leistungsdaten verfolgen, anzeigen und filtern

Um Echtzeitleistungsdaten anzuzeigen, stellen Sie sicher, dass Ihre App eine Performance Monitoring SDK-Version verwendet, die mit der Echtzeitdatenverarbeitung kompatibel ist. Erfahren Sie mehr .

Verfolgen Sie wichtige Kennzahlen in Ihrem Dashboard

Um zu erfahren , wie Sie Ihre wichtigsten Kennzahlen sind Trending, fügen Sie sie in Ihre Metriken Board an der Spitze der Performance - Dashboard. Sie können Regressionen schnell erkennen, indem Sie Änderungen von Woche zu Woche anzeigen oder überprüfen, ob die jüngsten Änderungen in Ihrem Code die Leistung verbessern.

ein Bild des Metrik-Boards im Firebase Performance Monitoring-Dashboard

Um eine Metrik zu Ihrer Metriken Board hinzuzufügen, gehen Sie auf die Performance - Dashboard in der Konsole Firebase und dann auf die Registerkarte Dashboard. Klicken Sie auf eine leere Messwertkarte und wählen Sie dann einen vorhandenen Messwert aus, den Sie zu Ihrem Board hinzufügen möchten. Klicken Sie auf einer bevölkerten metric Karte für mehr Optionen, wie eine Metrik zu ersetzen oder zu entfernen.

Das Metrics Board zeigt gesammelte Metrikdaten im Zeitverlauf sowohl in grafischer Form als auch als numerische prozentuale Veränderung an.

Erfahren Sie mehr über das Dashboard .

Anzeigen von Spuren und deren Daten

Um Ihre Spuren, gehen Sie zur Ansicht Performance - Dashboard in der Firebase Konsole, scrollen Sie nach unten auf die Spuren Tabelle, und klicken Sie auf den entsprechenden Unterreiter. Die Tabelle zeigt einige der wichtigsten Metriken für jeden Trace an, und Sie können die Liste sogar nach der prozentualen Änderung für eine bestimmte Metrik sortieren.

Wenn Sie in der Trace-Tabelle auf einen Trace-Namen klicken, können Sie durch verschiedene Bildschirme klicken, um den Trace zu durchsuchen und die relevanten Metriken aufzuschlüsseln. Auf den meisten Seiten, können Sie die Filter verwenden - Taste (oben links auf dem Bildschirm) , um die Daten , die durch Attribut, zum Beispiel zu filtern:

ein Bild von Firebase Performance Monitoring-Daten, die nach Attributen gefiltert werden
  • Filtern Seite URL anzuzeigen Daten für eine bestimmte Seite Ihrer Website
  • Filter nach Effective Verbindungsart zu lernen , wie eine 3G - Verbindung Auswirkungen auf Ihre App
  • Filter nach Land um sicherzustellen , dass Ihre Datenbank Lage ist nicht auf eine bestimmte Region zu beeinflussen

Erfahren Sie mehr über Daten für Ihre Spuren sehen .

Nächste Schritte