Performance Monitoring verwendet Traces , um Daten zu überwachten Prozessen in Ihrer App zu erheben. Ein Trace ist ein Bericht mit Daten, die zwischen zwei Zeitpunkten in Ihrer App erfasst wurden.
Bei Web-Apps erfasst Performance Monitoring automatisch einen Trace für jede Seite Ihrer App. Dieser Trace wird Seitenaufbau-Trace genannt. Für jeden Seitenaufbau-Trace werden die folgenden Standardmesswerte erfasst:
Largest Contentful Paint: Ein Messwert, der die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und der größten visuellen Änderung misst.
Interaction to Next Paint: Ein Messwert, der die längste Zeit zwischen der Interaktion des Nutzers mit der Seite und dem nächsten Paint misst.
Cumulative Layout Shift: Ein Messwert, der unerwartete Layoutverschiebungen auf einer Seite misst und bewertet.
First Paint: Ein Messwert, der die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und jeder visuellen Änderung misst.
First Contentful Paint: Ein Messwert, der die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und der Anzeige relevanter Inhalte wie eines Bildes oder Textes misst.
domInteractive: Ein Messwert, der die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und dem Zeitpunkt misst, an dem die Seite für den Nutzer als interaktiv gilt .
domContentLoadedEventEnd: Ein Messwert, der die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und dem Zeitpunkt misst, an dem das ursprüngliche HTML Dokument vollständig geladen und geparst wurde.
loadEventEnd: Ein Messwert, der die Zeit zwischen dem Aufrufen der Seite durch den Nutzer und dem Zeitpunkt misst, an dem das Ereignis „Laden“ des aktuellen Dokuments abgeschlossen ist.
First Input Delay: Ein Messwert, der die Zeit zwischen der Interaktion des Nutzers mit einer Seite und dem Zeitpunkt misst, an dem der Browser auf diese Eingabe reagieren kann.
Sie können Daten aus diesen Traces auf dem Seitenaufbau Untertab der Tracetabelle ansehen, die sich unten im Leistung Dashboard befindet. Weitere Informationen zur Verwendung der Konsole finden Sie weiter unten auf dieser Seite.
Definition eines Seitenaufbau-Traces
Dieser Trace misst mehrere Messwerte zum Laden der Seiten in Ihrer App, insbesondere wie lange es dauert, bis gängige Ladepunkte erreicht werden, z. B. in einer responsiven App.
Für Seitenaufbau-Traces erfasste Messwerte
Diese Traces sind sofort einsatzbereit. Sie können ihnen keine zusätzlichen benutzerdefinierten Messwerte oder benutzerdefinierten Attribute hinzufügen.
Largest Contentful Paint
Dieser Messwert misst die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und der Anzeige des größten Bild-, Text- oder Videoinhalts.
Mit diesem Messwert können Sie nachvollziehen, wie schnell der Hauptinhalt der Webseite für den Nutzer sichtbar wird.
Beginnt, wenn der Nutzer eine Seite aufruft.
Endet, wenn die größte visuelle Änderung erfolgt, einschließlich Bild-, Text- oder Videoelementen. Weitere Informationen finden Sie unter core web vitals.
"Element für „Largest Contentful Paint“" ist ein benutzerdefiniertes Attribut, das das Element identifiziert, das dem Largest Contentful Paint entspricht. Diese Daten werden zusätzlich zur Zeit für Largest Contentful Paint erfasst.
Interaction to Next Paint
Dieser Messwert misst die Zeit zwischen der Interaktion des Nutzers mit einer Seite und dem nächsten Paint.
Dieser Messwert ist nützlich, da er misst, wie schnell eine Seite auf Nutzereingaben reagiert.
Beginnt, wenn der Nutzer mit der Seite interagiert (Mausklick, Tippen auf einem Gerät oder Tastatureingabe).
Endet, wenn der nächste Paint erfolgt. Weitere Informationen finden Sie unter core web vitals.
"Längste Interaction to Next Paint" ist ein benutzerdefiniertes Attribut, das das Element identifiziert, mit dem der Nutzer interagiert hat, als das Ereignis „Interaction to Next Paint“ aufgetreten ist. Diese Daten werden zusätzlich zur Zeit für Interaction to Next Paint erfasst.
Cumulative Layout Shift
Dieser Messwert gibt die größte Zunahme der Layout-Shift-Ergebnisse für jeden unerwarteten Layout Shift an, der während der gesamten Lebensdauer einer Seite auftritt.
Dieser Messwert ist nützlich, da unerwartete Layoutverschiebungen die Nutzererfahrung beeinträchtigen können. Der Messwert gibt ein Ergebnis basierend auf der Layout Instability API an. Weitere Informationen zur Berechnung des Ergebnisses finden Sie unter core web vitals.
"Ziel für „Largest Layout Shift“" ist ein benutzerdefiniertes Attribut, das das Element identifiziert, das verschoben wurde, als der größte Layout Shift aufgetreten ist. Diese Daten werden zusätzlich zum Ergebnis für Cumulative Layout Shift erfasst.
First Paint
Dieser Messwert misst die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und jeder visuellen Änderung.
Dieser Messwert ist nützlich, da er Ihren Nutzern signalisiert, dass die Seite geladen wird.
Beginnt, wenn der Nutzer eine Seite aufruft.
Endet, wenn irgendeine visuelle Änderung erfolgt, z. B. eine Änderung der Hintergrundfarbe oder das Laden eines Headers.
First Contentful Paint
Dieser Messwert misst die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und der Anzeige relevanter Inhalte wie eines Bildes oder Textes.
Dieser Messwert gibt Aufschluss darüber, wie schnell Ihre Nutzer tatsächliche Inhalte Ihrer App sehen und nicht nur eine neue Hintergrundfarbe oder einen neuen Header.
Beginnt, wenn der Nutzer eine Seite aufruft.
Endet unmittelbar, nachdem der Browser die ersten Inhalte aus dem DOM gerendert hat, darunter Text, Bilder (einschließlich Hintergrundbilder), Canvas, der nicht weiß ist, oder SVG.
domInteractive
Dieser Messwert misst die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und dem Zeitpunkt, an dem die Seite für den Nutzer als interaktiv gilt.
Dieser Messwert gibt Aufschluss darüber, wie schnell Ihre Nutzer tatsächlich mit Elementen in Ihrer App interagieren können, z. B. mit Schaltflächen und Hyperlinks, anstatt sie nur auf dem Bildschirm zu sehen. Das bedeutet nicht, dass der Browser auf die Interaktion reagiert. Informationen dazu finden Sie im Trace First Input Delay.
Beginnt, wenn der Nutzer eine Seite aufruft.
Endet unmittelbar, bevor der User-Agent die Bereitschaft des aktuellen HTML-Dokuments auf „Interaktiv“ setzt.
domContentLoadedEventEnd
Dieser Messwert misst die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und dem Zeitpunkt, an dem das ursprüngliche HTML-Dokument vollständig geladen und geparst wurde.
Beginnt, wenn der Nutzer eine Seite aufruft.
Endet unmittelbar, nachdem das ursprüngliche HTML-Dokument vollständig geladen und geparst (
DOMContentLoaded) wurde. Das bedeutet nicht, dass Stylesheets, Bilder und Subframes vollständig geladen sind.
loadEventEnd
Dieser Messwert misst die Zeit zwischen dem Aufrufen der Seite durch den Nutzer und dem Zeitpunkt, an dem das Ereignis „Laden“ des aktuellen Dokuments abgeschlossen ist.
Dieser Messwert gibt Aufschluss darüber, wie lange es dauert, alle Inhalte zu laden, einschließlich Stylesheets und Bilder.
Beginnt, wenn der Nutzer eine Seite aufruft.
Endet unmittelbar, nachdem das Ereignis „Laden“ des aktuellen HTML-Dokuments abgeschlossen wurde.
First Input Delay
Dieser Messwert misst die Zeit zwischen der Interaktion des Nutzers mit einer Seite und dem Zeitpunkt, an dem der Browser auf diese Eingabe reagieren kann.
Dieser Messwert ist nützlich, da die Reaktion des Browsers auf eine Nutzerinteraktion Ihren Nutzern einen ersten Eindruck von der Reaktionsfähigkeit Ihrer App vermittelt.
Beginnt, wenn der Nutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. auf eine Schaltfläche oder einen Hyperlink klickt.
Endet unmittelbar, nachdem der Browser auf die Eingabe reagieren kann. Das bedeutet, dass der Browser nicht mit dem Laden oder Parsen Ihrer Inhalte beschäftigt ist.
Wenn Sie den Messwert „First Input Delay“ erfassen möchten, müssen Sie die Polyfill-Bibliothek für diesen Messwert hinzufügen. Installationsanweisungen finden Sie in der Dokumentation der Bibliothek. documentation.
Leistungsdaten verfolgen, ansehen und filtern
Wenn Sie Leistungsdaten in Echtzeit ansehen möchten, muss Ihre App eine Version des Performance Monitoring SDK verwenden, die mit der Echtzeitdatenverarbeitung kompatibel ist. Weitere Informationen zu Leistungsdaten in Echtzeit.
Wichtige Messwerte im Dashboard verfolgen
Wenn Sie sehen möchten, wie sich Ihre wichtigsten Messwerte entwickeln, fügen Sie sie dem Messwertboard oben im Leistung Dashboard hinzu. Sie können Regressionen schnell erkennen, indem Sie Änderungen von Woche zu Woche ansehen, oder prüfen, ob aktuelle Änderungen in Ihrem Code die Leistung verbessern.
Firebase Performance Monitoring-Dashboard" />
So fügen Sie dem Messwertboard einen Messwert hinzu:
- Öffnen Sie in der Firebase Console das Leistung Dashboard.
- Klicken Sie auf eine leere Messwertkarte und wählen Sie dann einen vorhandenen Messwert aus, der dem Board hinzugefügt werden soll.
- Klicken Sie auf einer ausgefüllten Messwertkarte auf , um weitere Optionen aufzurufen, z. B. um einen Messwert zu ersetzen oder zu entfernen.
Auf dem Messwertboard werden erfasste Messwertdaten im Zeitverlauf sowohl in grafischer Form als auch als numerische prozentuale Änderung angezeigt.
Weitere Informationen zur Verwendung des Dashboards.
Traces und ihre Daten ansehen
Wenn Sie Ihre Traces ansehen möchten, öffnen Sie in der Firebase Console das Leistung Dashboard , scrollen Sie nach unten zur Tracetabelle und klicken Sie dann auf den entsprechenden Untertab. Die Tabelle enthält einige Top-Messwerte für jeden Trace. Sie können die Liste auch nach der prozentualen Änderung für einen bestimmten Messwert sortieren.
Performance Monitoring bietet in der Firebase Console eine Seite zur Fehlerbehebung, auf der Messwert änderungen hervorgehoben werden. So können Sie Leistungsprobleme in Ihren Apps und für Ihre Nutzer schnell beheben und ihre Auswirkungen minimieren. Sie können die Seite zur Fehlerbehebung verwenden, wenn Sie potenzielle Leistungsprobleme feststellen, z. B. in den folgenden Szenarien:
- Sie wählen im Dashboard relevante Messwerte aus und stellen eine große Abweichung fest.
- In der Tracetabelle sortieren Sie die Daten so, dass die größten Abweichungen oben angezeigt werden, und sehen eine erhebliche prozentuale Änderung.
- Sie erhalten eine E-Mail-Benachrichtigung über ein Leistungsproblem.
Sie haben folgende Möglichkeiten, um auf die Seite zur Fehlerbehebung zuzugreifen:
- Klicken Sie im Messwert-Dashboard auf die Schaltfläche Messwertdetails ansehen.
- Wählen Sie auf einer beliebigen Messwertkarte
=> Details ansehen aus. Auf der Seite zur Fehlerbehebung werden Informationen zum ausgewählten Messwert angezeigt. - Klicken Sie in der Tracetabelle auf einen Tracenamen oder einen beliebigen Messwert in der Zeile, die diesem Trace zugeordnet ist.
- Klicken Sie in einer E-Mail-Benachrichtigung auf Jetzt untersuchen.
Wenn Sie in der Tracetabelle auf einen Tracenamen klicken, können Sie Messwerte aufschlüsseln. Klicken Sie auf die Schaltfläche
Firebase Performance Monitoring-Daten werden nach Attribut gefiltert" />
- Filtern Sie nach Seiten-URL , um Daten für eine bestimmte Seite Ihrer Website aufzurufen.
- Filtern Sie nach Effektiver Verbindungstyp , um zu erfahren, wie sich eine 3G-Verbindung auf Ihre App auswirkt.
- Filtern Sie nach Land , um zu prüfen, ob sich der Standort Ihrer Datenbank auf eine bestimmte Region auswirkt.
Weitere Informationen zum Ansehen von Daten für Ihre Traces.
Nächste Schritte
Weitere Informationen zur Verwendung von Attributen zum Analysieren von Leistungsdaten
Weitere Informationen zum Verfolgen von Leistungsproblemen in der Firebase Konsole
Benachrichtigungen einrichten für Seitenaufbauten, die die Leistung Ihrer App beeinträchtigen. Sie können beispielsweise eine E-Mail-Benachrichtigung für Ihr Team konfigurieren, wenn der First Input Delay für eine bestimmte Seite einen von Ihnen festgelegten Schwellenwert überschreitet.