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

Hinweis

Falls noch nicht geschehen, rufen Sie Firebase zu Ihrem JavaScript-Projekt hinzufügen auf, um Folgendes zu erfahren:

  • Firebase-Projekt erstellen

  • Web-App bei Firebase registrieren

Wenn Sie Firebase zu Ihrer App hinzufügen, 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. 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();

Das Performance Monitoring SDK zeichnet Core Web Vitals automatisch auf.

Schritt 2: Leistungsereignisse für die erste Datenanzeige generieren

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

  1. Webanwendung in einer lokalen Umgebung bereitstellen und ansehen

  2. Generieren Sie Ereignisse, indem Sie Unterseiten Ihrer Website laden, mit Ihrer App interagieren und/oder Netzwerkanfragen auslösen. Lassen Sie den Browsertab nach dem Seitenaufbau mindestens 10 Sekunden lang geöffnet.

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

    Wenn Sie keine Anzeige Ihrer ursprünglichen Daten sehen, lesen Sie die Tipps zur Fehlerbehebung.

Schritt 3: (Optional) Logeinträge für Leistungsereignisse ansehen

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

  2. Aktualisieren Sie die Web-App 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 Ihre App keine Leistungsereignisse protokolliert, lesen Sie die Tipps zur Fehlerbehebung.

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

Wenn Sie Leistungsdaten zu bestimmtem Code in Ihrer App im Blick behalten möchten, können Sie benutzerdefinierte Code-Traces instrumentieren.

Mit einem benutzerdefinierten Code-Trace können Sie messen, wie lange Ihre App für eine bestimmte Aufgabe oder eine Reihe von Aufgaben benötigt, z. B. für das Laden einer Reihe von Bildern oder das Abfragen Ihrer Datenbank. Der Standardmesswert für einen benutzerdefinierten Code-Trace ist die 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-Trace und fügen die gewünschten benutzerdefinierten Messwerte hinzu. Verwenden Sie dazu die API, die vom Performance Monitoring SDK bereitgestellt wird.

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

Schritt 5: 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 Leistungs-Dashboard der Firebase-Konsole überwachen.

Nächste Schritte