Performance Monitoring verwendet Traces, um Daten zu überwachten Prozessen in Ihrer App zu erfassen. Ein Trace ist ein Bericht, der Daten enthält, die zwischen zwei Zeitpunkten in Ihrer App erfasst wurden.
Bei Web-Apps erfasst Performance Monitoring automatisch für jede Seite Ihrer App einen sogenannten Seitenlade-Trace. Für jeden Seitenlade-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: Messwert, der die längste Zeit zwischen der Nutzerinteraktion mit der Seite und dem nächsten Paint-Ereignis misst
Cumulative Layout Shift: Messwert, mit dem unerwartete Layoutverschiebungen auf einer Seite gemessen und bewertet werden
First Paint: Messwert, der die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und der ersten visuellen Änderung misst
First Contentful Paint: Dieser Messwert gibt an, wie lange es dauert, bis nach dem Aufruf einer Seite erste relevante Inhalte wie Bilder oder Text angezeigt werden.
domInteractive: Dieser Messwert gibt an, wie lange es dauert, bis eine Seite für den Nutzer interaktiv wird, nachdem er sie aufgerufen hat.
domContentLoadedEventEnd: Dieser Messwert gibt an, wie lange es dauert, bis der Nutzer eine Seite aufruft und das ursprüngliche HTML-Dokument vollständig geladen und geparst wurde.
loadEventEnd: Messwert für die Zeitspanne zwischen dem Aufrufen der Seite durch den Nutzer und dem Abschluss des Ladeereignisses des aktuellen Dokuments
First Input Delay: Ein Messwert, der die Zeit zwischen der Nutzerinteraktion mit einer Seite und der Reaktion des Browsers auf diese Eingabe misst.
Sie können Daten aus diesen Aufzeichnungen auf dem Untertab Seitenladezeit der Tabelle mit Aufzeichnungen unten im Dashboard Leistung aufrufen. Weitere Informationen zur Verwendung der Console finden Sie weiter unten auf dieser Seite.
Definition eines Seitenaufbau-Traces
In diesem Trace werden mehrere Messwerte zum Laden der Seiten in Ihrer App erfasst, insbesondere wie lange es dauert, bis häufige Ladepunkte erreicht werden, z. B. bei einer responsiven App.
Mit Seitenlade-Traces können Sie die Vitalparameter Ihrer App erfassen, z. B. „First Contentful Paint“.
Für Seitenaufbau-Traces erfasste Messwerte
Diese Protokolle sind standardmäßig verfügbar und können daher nicht um zusätzliche benutzerdefinierte Messwerte oder benutzerdefinierte Attribute ergänzt werden.
Largest Contentful Paint
Dieser Messwert gibt an, wie lange es dauert, bis der größte Bild-, Text- oder Videoinhalt angezeigt wird, nachdem der Nutzer eine Seite aufgerufen hat.
Dieser Messwert gibt Aufschluss darüber, wie schnell der Hauptinhalt der Webseite für den Nutzer sichtbar wird.
Wird gestartet, wenn der Nutzer eine Seite aufruft.
Stoppt, wenn die größte visuelle Änderung eintritt, einschließlich Bildern, Text oder Videoelementen. Weitere Informationen finden Sie unter Core Web Vitals.
„Element für Largest Contentful Paint“ ist ein benutzerdefiniertes Attribut, das das Element angibt, das dem größten Inhaltselement entspricht. Dieser Wert wird zusätzlich zum LCP erfasst.
Interaktion bis zur nächsten Paint-Aktualisierung
Dieser Messwert gibt an, wie lange es dauert, bis nach einer Nutzerinteraktion die nächste Zeichnaktion erfolgt.
Dieser Messwert ist nützlich, da er angibt, wie schnell eine Seite auf Nutzereingaben reagiert.
Wird gestartet, wenn der Nutzer mit der Seite interagiert (Mausklick, Tippen auf ein Gerät oder Tastatureingabe).
Wird beendet, wenn die nächste Farbänderung auftritt. Weitere Informationen finden Sie unter Core Web Vitals.
„Longest 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. Dieser Wert wird zusätzlich zum Zeitintervall zwischen Interaktion und nächster Bildaktualisierung erfasst.
Kumulative Layout-Verschiebung
Dieser Messwert gibt die größte Zunahme der Layout-Shift-Ergebnisse für jeden unerwarteten Layout Shift an, der während des gesamten Lebenszyklus der Seite auftritt.
Dieser Messwert ist nützlich, da unerwartete Layoutänderungen die Nutzererfahrung beeinträchtigen können. Der Messwert gibt eine Bewertung basierend auf der Layout Instability API zurück. Weitere Informationen zur Berechnung des Werts finden Sie unter Core Web Vitals.
„Ziel für „Largest Layout Shift““ ist ein benutzerdefiniertes Attribut, das das Element angibt, das sich bei der größten Inhaltsverschiebung bewegt hat. Dieser Wert wird zusätzlich zum Wert für die kumulative Layoutverschiebung erfasst.
First Paint
Dieser Messwert gibt an, wie viel Zeit zwischen dem Aufrufen einer Seite und der ersten visuellen Änderung vergeht.
Dieser Messwert ist nützlich, da die erste Darstellung den Nutzern signalisiert, dass die Seite begann, geladen zu werden.
Wird gestartet, wenn der Nutzer eine Seite aufruft.
Wird angehalten, wenn eine visuelle Änderung auftritt, z. B. eine Änderung der Hintergrundfarbe oder das Laden einer Überschrift.
First Contentful Paint
Mit diesem Messwert wird die Zeit gemessen, die vergeht, bis nach dem Aufrufen einer Seite aussagekräftige Inhalte wie Bilder oder Text angezeigt werden.
Dieser Messwert gibt Aufschluss darüber, wie schnell Nutzer die tatsächlichen Inhalte Ihrer App sehen, anstatt nur eine neue Hintergrundfarbe oder Überschrift.
Wird gestartet, wenn der Nutzer eine Seite aufruft.
Wird sofort beendet, nachdem der Browser die ersten Inhalte aus dem DOM gerendert hat, einschließlich Text, Bildern (einschließlich Hintergrundbildern), Canvas, der nicht weiß ist, oder SVG.
domInteractive
Dieser Messwert gibt an, wie lange es dauert, bis eine Seite für den Nutzer interaktiv wird.
Dieser Messwert gibt Aufschluss darüber, wie schnell Nutzer mit Elementen in Ihrer App wie Schaltflächen und Hyperlinks interagieren können, anstatt sie nur auf dem Bildschirm zu sehen. Das bedeutet nicht, dass der Browser auf die Interaktion reagiert. Weitere Informationen zu diesem Messwert finden Sie im Trace „First Input Delay“.
Wird gestartet, wenn der Nutzer eine Seite aufruft.
Wird sofort beendet, bevor der User-Agent die Bereitschaft des aktuellen HTML-Dokuments auf „interaktiv“ setzt.
domContentLoadedEventEnd
Mit diesem Messwert wird die Zeit zwischen dem Aufrufen einer Seite und dem vollständigen Laden und Parsen des ursprünglichen HTML-Dokuments erfasst.
Wird gestartet, wenn der Nutzer eine Seite aufruft.
Wird sofort beendet, nachdem das ursprüngliche HTML-Dokument vollständig geladen und geparst wurde (
DOMContentLoaded). Das bedeutet nicht, dass Stylesheets, Bilder und Subframes vollständig geladen sind.
loadEventEnd
Dieser Messwert gibt an, wie lange es dauert, bis der Nutzer die Seite aufruft und das Ladeereignis des aktuellen Dokuments abgeschlossen ist.
Dieser Messwert gibt Aufschluss darüber, wie lange es dauert, bis alle Inhalte geladen sind, einschließlich Stylesheets und Bildern.
Wird gestartet, wenn der Nutzer eine Seite aufruft.
Wird sofort beendet, nachdem das Ereignis „Laden“ des aktuellen HTML-Dokuments abgeschlossen wurde.
First Input Delay
Dieser Messwert gibt an, wie lange es dauert, bis der Browser auf die Interaktion eines Nutzers mit einer Seite reagieren kann.
Dieser Messwert ist nützlich, da der Browser, der auf eine Nutzerinteraktion reagiert, den Nutzern einen ersten Eindruck von der Reaktionsfähigkeit Ihrer App vermittelt.
Wird gestartet, wenn der Nutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. auf eine Schaltfläche oder einen Hyperlink klickt.
Wird sofort beendet, nachdem der Browser auf die Eingabe reagieren kann. Das bedeutet, dass der Browser nicht gerade mit dem Laden oder Parsen Ihrer Inhalte beschäftigt ist.
Hinweis: Wenn Sie den Messwert „Erstverzögerung der Eingabe“ erfassen möchten, müssen Sie die Polyfill-Bibliothek für diesen Messwert hinzufügen. Eine Installationsanleitung finden Sie in der Dokumentation der Bibliothek.
Leistungsdaten erfassen, ansehen und filtern
Damit Sie Leistungsdaten in Echtzeit sehen können, muss Ihre App eine Version des Performance Monitoring SDK verwenden, die mit der Echtzeitdatenverarbeitung kompatibel ist. Weitere Informationen zu Echtzeit-Leistungsdaten
Wichtige Messwerte im Dashboard beobachten
Wenn Sie wissen möchten, wie sich Ihre wichtigsten Messwerte entwickeln, fügen Sie sie oben im Dashboard Leistung Ihrem Messwertbereich hinzu. Sie können schnell Regressionen erkennen, indem Sie die Änderungen von Woche zu Woche analysieren, oder prüfen, ob die Leistung durch die letzten Änderungen am Code verbessert wurde.
Dashboard „Firebase Performance Monitoring“ />
So fügen Sie Ihrem Messwertbereich einen Messwert hinzu:
- Rufen Sie in der Firebase-Konsole das Dashboard „Leistung“ auf.
- Klicken Sie auf eine leere Messwertkarte und wählen Sie einen vorhandenen Messwert aus, um ihn dem Dashboard hinzuzufügen.
- Klicken Sie auf einer ausgefüllten Messwertkarte auf , um weitere Optionen aufzurufen, z. B. um einen Messwert zu ersetzen oder zu entfernen.
Auf dem Messwert-Dashboard werden erfasste Messwertdaten im Zeitverlauf sowohl grafisch als auch als numerische prozentuale Änderung dargestellt.
Weitere Informationen zur Verwendung des Dashboards
Traces und ihre Daten ansehen
Wenn Sie sich Ihre Traces ansehen möchten, rufen Sie in der Firebase-Konsole das Dashboard Leistung auf, scrollen Sie nach unten zur Tabelle mit den Traces und klicken Sie dann auf den entsprechenden Untertab. In der Tabelle werden einige der wichtigsten Messwerte für jeden Trace angezeigt. Sie können die Liste auch nach der prozentualen Änderung für einen bestimmten Messwert sortieren.
Performance Monitoring bietet in der Firebase-Konsole eine Seite zur Fehlerbehebung, auf der Messwertänderungen hervorgehoben werden. So können Sie Leistungsprobleme schnell beheben und die Auswirkungen auf Ihre Apps und Nutzer minimieren. Sie können die Seite zur Fehlerbehebung verwenden, wenn Sie potenzielle Leistungsprobleme feststellen, z. B. in den folgenden Fällen:
- Sie wählen relevante Messwerte im Dashboard aus und stellen eine große Abweichung fest.
- In der Tabelle mit den Traces sortieren Sie die Daten so, dass die größten Deltas oben angezeigt werden. Sie sehen eine deutliche 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 auf dem Messwert-Dashboard auf die Schaltfläche Messwertdetails ansehen.
- Klicken Sie auf einer Messwertkarte auf
> Details ansehen . Auf der Seite zur Fehlerbehebung werden Informationen zum ausgewählten Messwert angezeigt. - Klicken Sie in der Tabelle „Traces“ auf einen Trace-Namen oder einen Messwert in der Zeile, die mit diesem Trace verknüpft ist.
- Klicken Sie in einer E-Mail-Benachrichtigung auf Jetzt prüfen.
Wenn Sie in der Tabelle „Traces“ auf einen Trace-Namen klicken, können Sie sich die gewünschten Messwerte ansehen. 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 sehen, wie sich eine 3G-Verbindung auf Ihre App auswirkt.
- Filtern Sie nach Land, um sicherzustellen, dass sich der Speicherort Ihrer Datenbank nicht auf eine bestimmte Region auswirkt.
Weitere Informationen zum Ansehen von Daten für Ihre Traces
Nächste Schritte
Weitere Informationen zum Überwachen von Leistungsproblemen in der Firebase-Konsole
Richten Sie Benachrichtigungen für Seitenladezeiten 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 Grenzwert überschreitet.