Weitere Informationen zu Leistungsdaten für das Laden von Seiten (Web-Apps)

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:

  • First Paint: Messwert, der die Zeit zwischen dem Aufrufen einer Seite durch den Nutzer und dem Eintreten einer 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.

Mithilfe von 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 benutzerdefinierte Messwerte oder benutzerdefinierte Attribute ergänzt werden.

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.

  • Sie wird sofort beendet, nachdem der Browser auf die Eingabe reagieren kann. Das bedeutet, dass der Browser nicht gerade damit beschäftigt ist, Ihre Inhalte zu laden oder zu parsen.

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.

Bild des Messwert-Dashboards im <span class=Dashboard „Firebase Performance Monitoring“ />

So fügen Sie Ihrem Messwertbereich einen Messwert hinzu:

  1. Rufen Sie in der Firebase-Konsole das Dashboard „Leistung“ auf.
  2. Klicken Sie auf eine leere Messwertkarte und wählen Sie einen vorhandenen Messwert aus, um ihn dem Dashboard hinzuzufügen.
  3. 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 Filter, um die Daten nach Attribut zu filtern, z. B.:

ein Bild von <span class=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