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

Hinweis

Wenn Sie es noch nicht getan haben, lesen Sie den Hilfeartikel Firebase zu Ihrem JavaScript-Projekt hinzufügen. Dort erfahren Sie, wie Sie Folgendes tun:

  • Firebase-Projekt erstellen

  • Webanwendung bei Firebase registrieren

Beachten Sie, dass Sie beim Hinzufügen von Firebase zu Ihrer App möglicherweise einige der Schritte ausführen, die weiter unten auf dieser Seite beschrieben werden (z. B. das SDK hinzufügen und Firebase initialisieren).

Schritt 1: hinzufügen und initialisieren Performance Monitoring

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

  2. Fügen Sie das Performance Monitoring JS SDK hinzu und initialisieren Sie 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 für die erste Eingabeverzögerung, 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, wenn Sie das SDK Ihrer Anwendung hinzugefügt haben. Wenn Sie noch lokal entwickeln, interagieren Sie mit Ihrer Anwendung, um Ereignisse für die erste Datenerhebung und -verarbeitung zu generieren.

  1. Stellen Sie Ihre Webanwendung in einer lokalen Umgebung bereit und rufen Sie sie auf.

  2. Generieren Sie Ereignisse, 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 das Performance Dashboard der Firebase Console auf. Die ersten Daten sollten innerhalb weniger Minuten angezeigt werden.

    Wenn die ersten Daten nicht angezeigt werden, lesen Sie die Tipps zur Fehlerbehebung.

Schritt 4: (Optional) Logmeldungen für Leistungsereignisse ansehen

  1. Öffnen Sie die Entwicklertools Ihres Browsers (z. B. den Tab „Netzwerk“ in den Chrome-Entwicklertools oder den Netzwerkmonitor in Firefox).

  2. Aktualisieren Sie Ihre Webanwendung im Browser.

  3. Prüfen Sie die Logmeldungen 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 Ihre Anwendung keine Leistungsereignisse protokolliert, lesen Sie die Tipps zur Fehlerbehebung.

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

Wenn Sie Leistungsdaten für bestimmten Code in Ihrer Anwendung erfassen möchten, können Sie benutzerdefinierte Code-Traces instrumentieren.

Mit einem benutzerdefinierten Code-Trace können Sie messen, wie lange es dauert, bis Ihre Anwendung eine bestimmte Aufgabe oder eine Reihe von Aufgaben erledigt hat, z. B. eine Reihe von Bildern geladen oder eine Datenbank abgefragt hat. Der Standardmesswert für einen benutzerdefinierten Code-Trace ist seine Dauer. Sie können aber auch benutzerdefinierte Messwerte hinzufügen, z. B. Cache-Treffer und Warnungen zu Arbeitsspeicherproblemen.

In Ihrem Code definieren Sie den Anfang und das Ende eines benutzerdefinierten Code-Traces und fügen alle gewünschten benutzerdefinierten Messwerte hinzu. Dazu verwenden Sie die API, die vom Performance Monitoring SDK bereitgestellt wird.

Weitere Informationen zu diesen Funktionen und zum Hinzufügen zu Ihrer Anwendung finden Sie unter Monitoring für bestimmten Code hinzufügen.

Schritt 6: Anwendung bereitstellen und Ergebnisse prüfen

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

Sie können Leistungsdaten im Performance Dashboard der Firebase Console erfassen.

Nächste Schritte