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

Hinweis

Falls noch nicht geschehen, lesen Sie den Abschnitt Firebase Ihrem JavaScript-Projekt hinzufügen. Dort erfahren Sie, wie Sie:

  • Firebase-Projekt erstellen

  • Web-App bei Firebase registrieren

Wenn Sie Firebase in Ihre App einbinden, führen Sie möglicherweise einige der später auf dieser Seite beschriebenen Schritte aus, z. B. das Hinzufügen des SDK und das Initialisieren von Firebase.

Schritt 1: Performance Monitoring hinzufügen und initialisieren

  1. Falls noch nicht geschehen, installieren Sie das Firebase JS SDK und initialisieren Sie Firebase.

  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: Erste Polyfill-Bibliothek für 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. Installationsanweisungen finden Sie in der Dokumentation der Bibliothek.

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

Schritt 3: Leistungsereignisse für die erste Datenanzeige generieren

Firebase beginnt mit der Verarbeitung der Ereignisse, wenn Sie das SDK erfolgreich in Ihre App eingebunden haben. Wenn Sie noch lokal entwickeln, interagieren Sie mit Ihrer App, um Ereignisse für die erste Datenerhebung und ‑verarbeitung zu generieren.

  1. Web-App in einer lokalen Umgebung bereitstellen und ansehen

  2. Erstellen Sie Ereignisse, indem Sie Unterseiten für Ihre Website laden, mit Ihrer App interagieren und/oder Netzwerkanfragen auslösen. Lassen Sie den Browser-Tab nach dem Laden der Seite mindestens 10 Sekunden lang geöffnet.

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

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

Schritt 4: (Optional) Log-Meldungen für Leistungsereignisse ansehen

  1. Öffnen Sie die Entwicklertools Ihres Browsers, z. B. den Tab „Netzwerk“ in den Chrome-Entwicklertools oder den Netzwerkmonitor für Firefox.

  2. Aktualisieren Sie die Web-App im Browser.

  3. Prüfen Sie Ihre 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 in Ihrer App keine Leistungsereignisse protokolliert werden, finden Sie hier Tipps zur Fehlerbehebung.

Schritt 5: (Optional) Benutzerdefinierte Überwachung für bestimmten Code hinzufügen

Wenn Sie Leistungsdaten für bestimmten 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 App für die Ausführung einer bestimmten Aufgabe oder einer Reihe von Aufgaben benötigt, z. B. zum Laden einer Reihe von Bildern oder zum 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 mithilfe der vom Performance Monitoring SDK bereitgestellten API alle gewünschten benutzerdefinierten Messwerte hinzu.

Weitere Informationen zu diesen Funktionen und dazu, wie Sie sie in Ihre App einfügen, finden Sie hier.

Schritt 6: App bereitstellen und Ergebnisse ansehen

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

Leistungsdaten können Sie im Dashboard zur Leistungsüberwachung der Firebase-Konsole einsehen.

Nächste Schritte