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

Hinweis

Falls noch nicht geschehen, besuchen Sie Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu, um zu erfahren, wie Sie

  • Firebase-Projekt erstellen

  • Web-App bei Firebase registrieren

Wenn Sie Firebase Ihrer App hinzufügen, müssen Sie 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: Performance Monitoring hinzufügen und initialisieren

  1. Installieren und initialisieren Sie das Firebase JS SDK, 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: Erste Polyfill-Bibliothek für Eingabeverzögerungen hinzufügen

Um die First Input Delay-Messwert, müssen Sie die Polyfill-Bibliothek für diesen Messwert hinzufügen. Zur Installation finden Sie in der Bibliothek Dokumentation.

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

Schritt 3: Leistungsereignisse für die erste Datenanzeige generieren

Firebase beginnt mit der Verarbeitung der Ereignisse, sobald Sie das SDK erfolgreich in Ihr Wenn Sie noch lokal entwickeln, interagieren Sie mit Ihrer App, um für die erste Datenerhebung und -verarbeitung.

  1. Webanwendung in einer lokalen Umgebung bereitstellen und ansehen.

  2. Ereignisse generieren, indem Sie Unterseiten für Ihre Website laden und mit Ihren App und/oder das Auslösen von Netzwerkanfragen. Lassen Sie den Browsertab nach dem Laden der Seite mindestens 10 Sekunden lang geöffnet.

  3. Rufen Sie das Dashboard Leistungs auf. der Firebase-Konsole. Die erste Datenanzeige sollte innerhalb ein paar Minuten.

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

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

  1. Öffnen Sie die Entwicklertools Ihres Browsers, z. B. Tab „Netzwerk“ 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. Warten Sie einige Sekunden, bis ein Netzwerkanruf an die firebaselogging.googleapis.com in den Entwicklertools deines Browsers. Wenn dieser Netzwerkaufruf vorhanden ist, sendet der Browser Leistungsdaten an Firebase.

Wenn Ihre App keine Leistungsereignisse protokolliert, lesen Sie die Fehlerbehebung Tipps

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

Um Leistungsdaten im Zusammenhang mit einem bestimmten Code in Ihrer App zu beobachten, können Sie benutzerdefinierte Code-Traces instrumentieren.

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

In Ihrem Code definieren Sie den Anfang und das Ende eines benutzerdefinierten Code-Trace (und Fügen Sie die gewünschten benutzerdefinierten Messwerte hinzu. Verwenden Sie dazu die vom Performance Monitoring SDK bereitgestellte API.

Weitere Informationen finden Sie unter Monitoring für bestimmten Code hinzufügen. findest du weitere Informationen zu diesen Funktionen und dazu, wie du sie deiner App hinzufügst.

Schritt 6: Anwendung 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 die Leistungsdaten auf der Seite Leistung Dashboard von der Firebase-Konsole.

Nächste Schritte