Erste Schritte mit der Leistungsüberwachung für das Web

Hinweis

Unter Firebase zu Ihrem JavaScript-Projekt hinzufügen finden Sie Informationen zu folgenden Schritten:

  • Firebase-Projekt erstellen

  • Web-App bei Firebase registrieren

Wenn Sie Firebase zu Ihrer App hinzufügen, müssen Sie möglicherweise einige der weiter unten auf dieser Seite beschriebenen Schritte ausführen, z. B. das SDK hinzufügen und Firebase initialisieren.

Schritt 1: Performance Monitoring hinzufügen und initialisieren

  1. Installieren und initialisieren Sie das Firebase JS SDK, falls noch nicht geschehen.

  2. Füge das Performance Monitoring JS SDK hinzu und initialisiere Performance Monitoring:

Web 

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

Schritt 2: Polyfill-Bibliothek für die erste Eingabeverzögerung hinzufügen

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.

Das Hinzufügen dieser Polyfill-Bibliothek ist nicht erforderlich, damit Performance Monitoring die anderen Messwerte für Webanwendungen erfasst.

Schritt 3: Leistungsereignisse für die erste Datenanzeige generieren

Firebase beginnt mit der Verarbeitung der Ereignisse, sobald Sie das SDK Ihrer App hinzugefügt haben. Wenn Sie noch lokal entwickeln, interagieren Sie mit Ihrer App, um Ereignisse für die anfängliche Datenerhebung und -verarbeitung zu generieren.

  1. Ihre Webanwendung in einer lokalen Umgebung bereitstellen und aufrufen

  2. Sie können Ereignisse generieren, indem Sie Unterseiten für Ihre Website laden, mit Ihrer Anwendung interagieren und/oder Netzwerkanfragen auslösen. Lassen Sie den Browsertab nach dem Laden der Seite mindestens 10 Sekunden lang geöffnet.

  3. Rufen Sie in der Firebase-Konsole das Dashboard Leistungs auf. Die ersten Daten sollten innerhalb weniger Minuten angezeigt werden.

    Wenn Ihre ursprünglichen Daten nicht angezeigt werden, lesen Sie die Tipps zur Fehlerbehebung.

Schritt 4: Optional: Protokollmeldungen für Leistungsereignisse ansehen

  1. Öffnen Sie die Entwicklertools Ihres Browsers (z. B. den Tab „Network“ für Chrome-Entwicklertools oder im Netzwerkmonitor für Firefox).

  2. Aktualisieren Sie die Webanwendung im Browser.

  3. Prüfen Sie Ihre Logeinträge auf Fehlermeldungen.

  4. Suchen Sie nach einigen Sekunden in den Entwicklertools Ihres Browsers nach einem Netzwerkaufruf an firebaselogging.googleapis.com. Das Vorhandensein dieses Netzwerkaufrufs zeigt, dass der Browser Leistungsdaten an Firebase sendet.

Wenn in Ihrer App keine Leistungsereignisse protokolliert werden, lesen Sie die Tipps zur Fehlerbehebung.

Schritt 5: (Optional) Benutzerdefiniertes Monitoring für bestimmten Code hinzufügen

Wenn Sie Leistungsdaten im Zusammenhang mit bestimmtem Code in Ihrer App erfassen möchten, können Sie benutzerdefinierte Code-Traces instrumentieren.

Mit einem benutzerdefinierten Code-Trace können Sie messen, wie lange Ihre Anwendung für eine bestimmte Aufgabe oder eine Reihe von Aufgaben benötigt, z. B. das Laden einer Reihe von Bildern oder das Abfragen Ihrer Datenbank. Der Standardmesswert für einen benutzerdefinierten Code-Trace ist seine Dauer. Sie können aber auch benutzerdefinierte Messwerte wie Cache-Treffer und Speicherwarnungen hinzufügen.

In Ihrem Code definieren Sie den Anfang und das Ende eines benutzerdefinierten Code-Traces (und fügen alle gewünschten benutzerdefinierten Messwerte hinzu) mithilfe der vom Performance Monitoring SDK bereitgestellten API.

Unter Monitoring für bestimmten Code hinzufügen finden Sie weitere Informationen zu diesen Funktionen und dazu, wie Sie sie Ihrer App hinzufügen.

Schritt 6: App bereitstellen und Ergebnisse prüfen

Nachdem Sie Performance Monitoring validiert haben, können Sie die aktualisierte Version Ihrer App für Ihre Nutzer bereitstellen.

Sie können Leistungsdaten im Dashboard „Leistung“ der Firebase-Konsole beobachten.

Nächste Schritte