Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

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

Die Leistungsüberwachung verwendet Ablaufverfolgungen , um Daten zu überwachten Prozessen in Ihrer App zu sammeln. Ein Trace 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 Seitenladeablaufverfolgung bezeichnet wird . Jeder Seitenlade-Trace erfasst die folgenden Standardmesswerte:

  • 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 von aussagekräftigen Inhalten wie einem Bild oder Text misst

  • domInteractive – Eine Metrik, die 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, misst

  • domContentLoadedEventEnd — Eine Metrik, die die Zeit zwischen dem Navigieren des Benutzers zu einer Seite und dem vollständigen Laden und Parsen des ursprünglichen HTML-Dokuments misst measures

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

  • Verzögerung der ersten Eingabe — 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 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.

Seitenlade- Traces helfen Ihnen dabei, die wichtigsten Web-Vitalwerte Ihrer App zu verfolgen , z. B. den ersten Contentful Paint.

Für Seitenlade-Traces gesammelte Metriken

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 dem Navigieren des Benutzers zu einer Seite und dem Auftreten einer visuellen Änderung.

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 visuelle Änderung stattfindet, einschließlich einer Änderung der Hintergrundfarbe oder des Ladens einer Kopfzeile.

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 reagiert (diese Metrik finden Sie im ersten Trace der Eingabeverzögerung ).

  • 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.

  • Stoppt sofort, nachdem das anfängliche HTML-Dokument vollständig geladen und analysiert wurde ( DOMContentLoaded ), dies bedeutet jedoch nicht, dass das Laden von Stylesheets, Bildern und Subframes abgeschlossen ist.

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 zu laden, einschließlich Stylesheets und Bilder.

  • 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.

  • Startet, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. durch Klicken auf eine Schaltfläche oder einen Hyperlink.

  • 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 parsen.

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 Dokumentation der Bibliothek .

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 sich Ihre wichtigsten Kennzahlen entwickeln, fügen Sie sie zu Ihrem Kennzahlen-Board oben im Leistungs- Dashboard hinzu. 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 Ihrem Metriken-Board einen Messwert hinzuzufügen, rufen Sie das Leistungs- Dashboard in der Firebase-Konsole auf und klicken Sie 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 auf einer auf , um weitere Optionen einen 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 die Verwendung des Dashboards .

Anzeigen von Spuren und deren Daten

Um Ihre Traces anzuzeigen, rufen Sie das Performance- Dashboard in der Firebase-Konsole auf, scrollen Sie nach unten zur Tabelle mit den Traces und klicken Sie dann auf die entsprechende Unterregisterkarte. 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 Schaltfläche zum Filtern (oben links auf dem Bildschirm) verwenden, um die Daten nach Attributen zu filtern, zum Beispiel:

ein Bild von Firebase Performance Monitoring-Daten, die nach Attributen gefiltert werden
  • Nach Seiten- URL filtern , 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 Traces .

Nächste Schritte