Die Leistungsüberwachung verwendet Ablaufverfolgungen , um Daten zu überwachten Prozessen 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 Seitenlade-Trace bezeichnet wird. Jede Ablaufverfolgung für das Laden einer Seite erfasst die folgenden Standardmetriken:
First Paint – Eine Metrik, die die Zeit zwischen dem Navigieren des Benutzers zu einer Seite und dem Auftreten einer visuellen Änderung misst
First Contentful Paint – Eine Metrik, die die Zeit zwischen dem Navigieren eines Benutzers zu einer Seite und der Anzeige sinnvoller Inhalte wie einem Bild oder Text misst
domInteractive – Eine Metrik, die die Zeit zwischen dem Navigieren des Benutzers zu einer Seite und dem Zeitpunkt misst, an dem die Seite für den Benutzer als interaktiv angesehen wird
domContentLoadedEventEnd — Eine Metrik, die die Zeit zwischen dem Navigieren 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 dem Navigieren des Benutzers zur Seite und dem Abschluss des Ladeereignisses des aktuellen Dokuments misst
erste Eingabeverzögerung – 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 „Seiten laden “ 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 Page-Load-Trace
Diese Ablaufverfolgung misst mehrere Metriken darüber, wie die Seiten in Ihrer App geladen werden, insbesondere wie lange es dauert, gängige Ladepunkte wie eine responsive App zu erreichen.
Seitenladespuren helfen Ihnen , die wichtigsten Web-Vitals Ihrer App zu verfolgen, wie z. B. die erste Inhaltsfarbe.
Metriken, die für Seitenladespuren gesammelt wurden
Diese Ablaufverfolgungen sind vorkonfigurierte Ablaufverfolgungen, sodass Sie ihnen keine benutzerdefinierten Metriken oder benutzerdefinierten Attribute hinzufügen können.
Erste Farbe
Diese Metrik misst die Zeit zwischen dem Navigieren des Benutzers zu einer Seite und dem Auftreten einer visuellen Änderung.
Diese Metrik ist nützlich, da das erste Malen Ihren Benutzern signalisiert, dass die Seite mit dem Laden beginnt .
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 zufriedene Farbe
Diese Metrik misst die Zeit zwischen dem Navigieren eines Benutzers zu einer Seite und dem Anzeigen sinnvoller Inhalte wie einem Bild oder Text.
Diese Metrik ist nützlich, um zu erfahren, wie schnell Ihre Benutzer den tatsächlichen Inhalt Ihrer App sehen und nicht nur eine neue Hintergrundfarbe oder Kopfzeile.
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 Hintergrundbilder), 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 angesehen wird.
Diese Metrik ist nützlich, um zu erfahren, 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 (für diese Metrik siehe First Input Delay Trace ).
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 Analysieren des ursprünglichen HTML-Dokuments.
Startet, wenn der Benutzer zu einer Seite navigiert.
Stoppt sofort, nachdem das anfängliche HTML-Dokument vollständig geladen und analysiert wurde (
DOMContentLoaded), aber das bedeutet nicht, dass Stylesheets, Bilder und Subframes fertig geladen sind.
loadEventEnd
Diese Metrik misst die Zeit zwischen dem Aufrufen der Seite durch den Benutzer und dem Abschluss des Ladeereignisses des aktuellen Dokuments.
Diese Metrik ist nützlich, um zu erfahren, wie lange es dauert, alle Ihre Inhalte zu laden, einschließlich Stylesheets und Bilder.
Startet, wenn der Benutzer zu einer Seite navigiert.
Stoppt unmittelbar nach Abschluss des Ladeereignisses des aktuellen HTML-Dokuments.
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 gibt.
Beginnt, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. auf eine Schaltfläche oder einen Hyperlink klickt.
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 parsen.
Beachten Sie, dass Sie zum Messen der ersten Eingangsverzö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
Stellen Sie zum Anzeigen von Echtzeit-Leistungsdaten sicher, dass Ihre App eine Leistungsüberwachungs-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 sich Ihre wichtigsten Metriken entwickeln, fügen Sie sie zu Ihrem Metrik-Board oben im Leistungs- Dashboard hinzu. Sie können Regressionen schnell erkennen, indem Sie Änderungen von Woche zu Woche sehen oder überprüfen, ob die letzten Änderungen in Ihrem Code die Leistung verbessern.
Führen Sie die folgenden Schritte aus, um Ihrem Metrik-Board eine Metrik hinzuzufügen:
- Rufen Sie das Leistungs- Dashboard in der Firebase-Konsole auf.
- Klicken Sie auf eine leere Metrikkarte und wählen Sie dann eine vorhandene Metrik aus, die Sie Ihrem Board hinzufügen möchten.
- Klicken Sie auf einer ausgefüllten Metrikkarte auf , um weitere Optionen anzuzeigen, z. B. um eine Metrik zu ersetzen oder zu entfernen.
Das Metrik-Board zeigt gesammelte Metrikdaten im Laufe der Zeit, sowohl in grafischer Form als auch als numerische prozentuale Veränderung.
Erfahren Sie mehr über die Verwendung des Dashboards .
Traces und ihre Daten anzeigen
Um Ihre Ablaufverfolgungen anzuzeigen, gehen Sie zum Leistungs- Dashboard in der Firebase-Konsole, scrollen Sie nach unten zur Ablaufverfolgungstabelle und klicken Sie dann auf die entsprechende Unterregisterkarte. Die Tabelle zeigt einige Top-Metriken für jede Ablaufverfolgung, und Sie können die Liste sogar nach der prozentualen Änderung für eine bestimmte Metrik sortieren.
Die Leistungsüberwachung 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 Seite zur Problembehandlung verwenden, wenn Sie Informationen zu potenziellen Leistungsproblemen erhalten, z. B. in den folgenden Szenarien:
- Sie wählen relevante Metriken auf dem Dashboard aus und stellen ein großes Delta fest.
- In der Ablaufverfolgungstabelle sortieren Sie, um die größten Deltas ganz oben anzuzeigen, und Sie sehen eine signifikante prozentuale Änderung.
- Sie erhalten eine E-Mail-Benachrichtigung, die Sie über ein Leistungsproblem informiert.
Sie können auf folgende Weise auf die Fehlerbehebungsseite zugreifen:
- Klicken Sie im Metrik-Dashboard auf die Schaltfläche Metrikdetails anzeigen .
- Wählen Sie auf einer beliebigen Metrikkarte => Details anzeigen aus. Auf der Fehlerbehebungsseite werden Informationen zu der ausgewählten Metrik angezeigt.
- Klicken Sie in der Ablaufverfolgungstabelle auf einen Ablaufverfolgungsnamen oder einen beliebigen Metrikwert in der Zeile, die dieser Ablaufverfolgung zugeordnet ist.
- Klicken Sie in einer E-Mail-Benachrichtigung auf Jetzt untersuchen .
Wenn Sie in der Trace-Tabelle auf einen Trace-Namen klicken, können Sie einen Drilldown zu relevanten Metriken durchführen. Klicken Sie auf die Schaltfläche Filter , um die Daten nach Attributen zu filtern, zum Beispiel:
- Filtern Sie nach Seiten-URL , um Daten für eine bestimmte Seite Ihrer Website anzuzeigen
- Filtern Sie nach effektivem Verbindungstyp, um zu erfahren, wie sich eine 3G-Verbindung auf Ihre App auswirkt
- Filtern Sie nach Land, um sicherzustellen, dass sich Ihr Datenbankstandort nicht auf eine bestimmte Region auswirkt
Erfahren Sie mehr über das Anzeigen von Daten für Ihre Spuren .
Nächste Schritte
Erfahren Sie mehr über die Verwendung von Attributen zur Untersuchung von Leistungsdaten.
Erfahren Sie mehr darüber, wie Sie Leistungsprobleme in der Firebase-Konsole nachverfolgen .
Richten Sie Warnungen für Seitenladevorgänge ein , die die Leistung Ihrer App beeinträchtigen. Sie können beispielsweise eine E-Mail-Benachrichtigung für Ihr Team konfigurieren, wenn die erste Eingabeverzögerung für eine bestimmte Seite einen von Ihnen festgelegten Schwellenwert überschreitet.