Diese Seite wurde von der Cloud Translation API übersetzt.

Firebase-Leistungsüberwachung für das Web

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit Firebase Performance Monitoring die Leistung einer Chat-Web-App messen. Besuchen Sie https://fireperf-Friendlychat.web.app/, um eine Live-Demo zu sehen.

Was Sie lernen werden

So fügen Sie Firebase Performance Monitoring zu Ihrer Web-App hinzu, um sofort einsatzbereite Metriken (Seitenlade- und Netzwerkanfragen) zu erhalten.
So messen Sie einen bestimmten Codeabschnitt mit benutzerdefinierten Traces.
So zeichnen Sie zusätzliche, benutzerdefinierte Metriken auf, die mit einer benutzerdefinierten Ablaufverfolgung verknüpft sind.
So segmentieren Sie Ihre Leistungsdaten mit benutzerdefinierten Attributen weiter.
So verwenden Sie das Leistungsüberwachungs-Dashboard, um die Leistung Ihrer Web-App zu verstehen.

Was du brauchen wirst

Die IDE oder der Texteditor Ihrer Wahl, z. B. WebStorm , Atom , Sublime oder VS Code
Ein Terminal/eine Konsole
Ein Browser Ihrer Wahl, z. B. Chrome
Der Beispielcode des Codelabs (Informationen zum Abrufen des Codes finden Sie im nächsten Abschnitt dieses Codelabs.)

2. Holen Sie sich den Beispielcode

Klonen Sie das GitHub-Repository des Codelab über die Befehlszeile:

git clone https://github.com/firebase/codelab-friendlychat-web

Alternativ können Sie, wenn Sie Git nicht installiert haben, das Repo als ZIP-Datei herunterladen .

Importieren Sie die Starter-App

Öffnen oder importieren Sie mit Ihrer IDE das Verzeichnis 📁 performance-monitoring-start aus dem geklonten Repository. Dieses 📁 performance-monitoring-start Verzeichnis enthält den Startcode für das Codelab, eine Chat-Web-App.

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen .
Benennen Sie Ihr Firebase-Projekt FriendlyChat .

Merken Sie sich die Projekt-ID für Ihr Firebase-Projekt.

Klicken Sie auf Projekt erstellen .

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

Klicken Sie auf das Websymbol um eine neue Firebase-Web-App zu erstellen.
Registrieren Sie die App mit dem Spitznamen Friendly Chat und aktivieren Sie dann das Kontrollkästchen neben Auch Firebase Hosting für diese App einrichten .
Klicken Sie auf App registrieren .
Klicken Sie sich durch die restlichen Schritte. Sie müssen den Anweisungen auf dem Bildschirm jetzt nicht mehr folgen. Diese werden in späteren Schritten dieses Codelabs behandelt.

Damit sich Benutzer mit ihren Google-Konten bei der Chat-App anmelden können, verwenden wir die Google- Anmeldemethode.

Sie müssen die Google- Anmeldung aktivieren:

Suchen Sie in der Firebase-Konsole im linken Bereich den Abschnitt „Entwickeln“ .
Klicken Sie auf Authentifizierung und dann auf die Registerkarte Anmeldemethode ( gehen Sie zur Konsole ).
Aktivieren Sie den Google -Anmeldeanbieter und klicken Sie dann auf Speichern .

Aktivieren Sie Cloud Firestore

Die Web-App verwendet Cloud Firestore, um Chat-Nachrichten zu speichern und neue Chat-Nachrichten zu empfangen.

Sie müssen Cloud Firestore aktivieren:

Klicken Sie im Abschnitt „Entwickeln“ der Firebase-Konsole auf „Datenbank“ .
Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen .
Wählen Sie die Option „Im Testmodus starten“ und klicken Sie dann auf „Aktivieren“ , nachdem Sie den Haftungsausschluss zu den Sicherheitsregeln gelesen haben.

Der Startercode für dieses Codelab enthält sicherere Regeln. Wir werden sie später im Codelab bereitstellen.

Aktivieren Sie Cloud-Speicher

Die Web-App nutzt Cloud Storage für Firebase zum Speichern, Hochladen und Teilen von Bildern.

Sie müssen Cloud Storage aktivieren:

Klicken Sie im Abschnitt „Entwickeln“ der Firebase-Konsole auf „Speicher“ .
Klicken Sie auf „Erste Schritte“ .
Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln für Ihr Firebase-Projekt und klicken Sie dann auf Verstanden .

Der Startcode enthält eine grundlegende Sicherheitsregel, die wir später im Codelab bereitstellen.

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

Mit der Firebase-Befehlszeilenschnittstelle (CLI) können Sie Firebase Hosting verwenden, um Ihre Web-App lokal bereitzustellen und Ihre Web-App in Ihrem Firebase-Projekt bereitzustellen.

Installieren Sie die CLI, indem Sie diese Anweisungen in den Firebase-Dokumenten befolgen.
Überprüfen Sie, ob die CLI korrekt installiert wurde, indem Sie den folgenden Befehl in einem Terminal ausführen:

firebase --version

Stellen Sie sicher, dass Ihre Version der Firebase-CLI Version 8.0.0 oder höher ist.

Autorisieren Sie die Firebase-CLI, indem Sie den folgenden Befehl ausführen:

firebase login

Wir haben die Web-App-Vorlage so eingerichtet, dass sie die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis Ihrer App (dem Repository, das Sie zuvor im Codelab geklont haben) abruft. Um die Konfiguration abzurufen, müssen wir Ihre App jedoch mit Ihrem Firebase-Projekt verknüpfen.

Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale performance-monitoring-start Verzeichnis Ihrer App zugreift.
Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:

firebase use --add

Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt dann einen Alias.

Ein Alias ist nützlich, wenn Sie über mehrere Umgebungen verfügen (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch einfach den Alias default .

Befolgen Sie die restlichen Anweisungen in Ihrer Befehlszeile.

5. Integration mit Firebase Performance Monitoring

Es gibt verschiedene Möglichkeiten zur Integration mit dem Firebase Performance Monitoring SDK für das Web (Einzelheiten finden Sie in der Dokumentation ). In diesem Codelab aktivieren wir die Leistungsüberwachung von Hosting-URLs .

Fügen Sie eine Leistungsüberwachung hinzu und initialisieren Sie Firebase

Öffnen Sie die Datei src/index.js und fügen Sie dann die folgende Zeile unter dem TODO hinzu, um das Firebase Performance Monitoring SDK einzuschließen.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

Außerdem müssen wir das Firebase SDK mit einem Konfigurationsobjekt initialisieren, das Informationen über das Firebase-Projekt und die Web-App enthält, die wir verwenden möchten. Da wir Firebase Hosting verwenden, können Sie ein spezielles Skript importieren, das diese Konfiguration für Sie übernimmt. Für dieses Codelab haben wir am Ende der Datei public/index.html bereits die folgende Zeile für Sie hinzugefügt, aber überprüfen Sie noch einmal, ob sie vorhanden ist.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

Fügen Sie in der Datei src/index.js die folgende Zeile unterhalb des TODO hinzu, um die Leistungsüberwachung zu initialisieren.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Die Leistungsüberwachung erfasst jetzt automatisch Seitenlast- und Netzwerkanfragemetriken für Sie, wenn Benutzer Ihre Website nutzen! Weitere Informationen zu automatischen Seitenladeverfolgungen finden Sie in der Dokumentation .

Fügen Sie die erste Polyfill-Bibliothek für die Eingabeverzögerung hinzu

Die Verzögerung der ersten Eingabe ist nützlich, da der Browser, der auf eine Benutzerinteraktion reagiert, den Benutzern einen ersten Eindruck von der Reaktionsfähigkeit Ihrer App vermittelt.

Die erste Eingabeverzögerung beginnt, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, beispielsweise auf eine Schaltfläche oder einen Hyperlink. Es stoppt sofort, nachdem der Browser auf die Eingabe reagieren kann, was bedeutet, dass der Browser nicht damit beschäftigt ist, Ihre Inhalte zu laden oder zu analysieren.

Diese Polyfill-Bibliothek ist für die Integration der Leistungsüberwachung optional.

Öffnen Sie die Datei public/index.html und kommentieren Sie die folgende Zeile aus.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

An diesem Punkt haben Sie die Integration mit Firebase Performance Monitoring in Ihrem Code abgeschlossen!

In den folgenden Schritten erfahren Sie, wie Sie benutzerdefinierte Traces mithilfe von Firebase Performance Monitoring hinzufügen. Wenn Sie nur die automatischen Spuren erfassen möchten, gehen Sie zum Abschnitt „Bereitstellen und Senden von Bildern starten“.

6. Fügen Sie Ihrer App einen benutzerdefinierten Trace hinzu

Mit der Leistungsüberwachung können Sie benutzerdefinierte Traces erstellen. Eine benutzerdefinierte Ablaufverfolgung ist ein Bericht für die Dauer eines Ausführungsblocks in Ihrer App. Sie definieren den Anfang und das Ende eines benutzerdefinierten Trace mithilfe der vom SDK bereitgestellten APIs.

Rufen Sie in der Datei src/index.js ein Leistungsobjekt ab und erstellen Sie dann einen benutzerdefinierten Trace zum Hochladen einer Bildnachricht.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

Um eine benutzerdefinierte Ablaufverfolgung aufzuzeichnen, müssen Sie den Startpunkt und den Endpunkt für die Ablaufverfolgung angeben. Sie können sich eine Ablaufverfolgung als einen Timer vorstellen.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Sie haben erfolgreich einen benutzerdefinierten Trace definiert! Nach der Bereitstellung Ihres Codes wird die Dauer des benutzerdefinierten Trace aufgezeichnet, wenn ein Benutzer eine Bildnachricht sendet. Dadurch erhalten Sie eine Vorstellung davon, wie lange echte Benutzer brauchen, um Bilder in Ihrer Chat-App zu senden.

7. Fügen Sie Ihrer App eine benutzerdefinierte Metrik hinzu.

Sie können einen benutzerdefinierten Trace außerdem so konfigurieren, dass benutzerdefinierte Metriken für leistungsbezogene Ereignisse aufgezeichnet werden, die in seinem Bereich auftreten. Sie können beispielsweise eine Metrik verwenden, um zu untersuchen, ob die Upload-Zeit von der Größe eines Bildes für die benutzerdefinierte Ablaufverfolgung beeinflusst wird, die wir im letzten Schritt definiert haben.

Suchen Sie den benutzerdefinierten Trace aus dem vorherigen Schritt (definiert in Ihrer Datei src/index.js ).
Fügen Sie die folgende Zeile unter TODO hinzu, um die Größe des hochgeladenen Bildes aufzuzeichnen.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Diese Metrik ermöglicht die Leistungsüberwachung, um die Dauer der benutzerdefinierten Ablaufverfolgung sowie die Größe des hochgeladenen Bildes aufzuzeichnen.

8. Fügen Sie Ihrer App ein benutzerdefiniertes Attribut hinzu

Aufbauend auf den vorherigen Schritten können Sie auch benutzerdefinierte Attribute für Ihre benutzerdefinierten Ablaufverfolgungen erfassen. Benutzerdefinierte Attribute können bei der Segmentierung von Daten nach für Ihre App spezifischen Kategorien hilfreich sein. Sie können beispielsweise den MIME-Typ der Bilddatei erfassen, um zu untersuchen, wie sich der MIME-Typ auf die Leistung auswirken könnte.

Verwenden Sie den benutzerdefinierten Trace, der in Ihrer Datei src/index.js definiert ist.
Fügen Sie die folgende Zeile unter TODO hinzu, um den MIME-Typ des hochgeladenen Bildes aufzuzeichnen.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Dieses Attribut ermöglicht die Leistungsüberwachung, um die benutzerdefinierte Ablaufverfolgungsdauer basierend auf dem Typ des hochgeladenen Bildes zu kategorisieren.

9. [Erweitern] Fügen Sie einen benutzerdefinierten Trace mit der User Timing API hinzu

Das Firebase Performance Monitoring SDK wurde so konzipiert, dass es asynchron geladen werden kann und sich beim Laden der Seite nicht negativ auf die Leistung von Web-Apps auswirkt. Bevor das SDK geladen ist, ist die Firebase Performance Monitoring API nicht verfügbar. In diesem Szenario können Sie weiterhin benutzerdefinierte Ablaufverfolgungen hinzufügen, indem Sie die User Timing API verwenden. Das Firebase Performance SDK übernimmt die Dauer von Measure() und protokolliert sie als benutzerdefinierte Traces.

Wir werden die Dauer des Ladens von App-Styling-Skripten mithilfe der User Timing API messen.

Fügen Sie in der Datei public/index.html die folgende Zeile hinzu, um den Beginn des Ladens der App-Styling-Skripte zu markieren.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

Fügen Sie die folgenden Zeilen hinzu, um das Ende des Ladevorgangs der App-Styling-Skripte zu markieren und um die Dauer zwischen Start und Ende zu messen.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

Der von Ihnen hier erstellte Eintrag wird automatisch von Firebase Performance Monitoring erfasst. Später finden Sie in der Firebase Performance-Konsole einen benutzerdefinierten Trace namens loadStyling .

10. Stellen Sie es bereit und beginnen Sie mit dem Senden von Bildern

Auf Firebase Hosting bereitstellen

Nachdem Sie Firebase Performance Monitoring zu Ihrem Code hinzugefügt haben, führen Sie die folgenden Schritte aus, um Ihren Code auf Firebase Hosting bereitzustellen:

Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale performance-monitoring-start Verzeichnis Ihrer App zugreift.
Stellen Sie Ihre Dateien in Ihrem Firebase-Projekt bereit, indem Sie den folgenden Befehl ausführen:

firebase deploy

Die Konsole sollte Folgendes anzeigen:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

Besuchen Sie Ihre Web-App, die jetzt vollständig mit Firebase Hosting in zwei Ihrer eigenen Firebase-Subdomains gehostet wird: https://<projectId>.firebaseapp.com und https://<projectId>.web.app .

Stellen Sie sicher, dass die Leistungsüberwachung aktiviert ist

Öffnen Sie die Firebase-Konsole und gehen Sie zur Registerkarte „Leistung“ . Wenn Sie die Begrüßungsmeldung „SDK erkannt“ sehen, haben Sie die Integration mit Firebase Performance Monitoring erfolgreich durchgeführt!

Bildnachricht senden

Generieren Sie einige Leistungsdaten, indem Sie Bilder in Ihrer Chat-App senden.

Nachdem Sie sich bei Ihrer Chat-App angemeldet haben, klicken Sie auf die Schaltfläche zum Hochladen von Bildern .
Wählen Sie mit der Dateiauswahl eine Bilddatei aus.
Versuchen Sie, mehrere Bilder zu senden (einige Beispiele werden in public/images/ gespeichert), damit Sie die Verteilung benutzerdefinierter Metriken und benutzerdefinierter Attribute testen können.

Neue Nachrichten sollten zusammen mit Ihren ausgewählten Bildern in der Benutzeroberfläche der App angezeigt werden.

11. Überwachen Sie das Dashboard

Nachdem Sie Ihre Web-App bereitgestellt und Bildnachrichten als Benutzer gesendet haben, können Sie Leistungsdaten im Leistungsüberwachungs-Dashboard (in der Firebase-Konsole) überprüfen.

Greifen Sie auf Ihr Dashboard zu

Wählen Sie in der Firebase-Konsole das Projekt aus, das Ihre Friendly Chat App enthält.
Suchen Sie im linken Bereich den Abschnitt „Qualität“ und klicken Sie auf „Leistung“ .

Überprüfen Sie die Daten auf dem Gerät

Nachdem die Leistungsüberwachung die Daten Ihrer App verarbeitet hat, werden oben im Dashboard Registerkarten angezeigt. Schauen Sie später noch einmal vorbei, wenn Sie noch keine Daten oder Registerkarten sehen.

Klicken Sie auf die Registerkarte Auf dem Gerät .

Die Tabelle zum Laden von Seiten zeigt die verschiedenen Leistungsmetriken, die die Leistungsüberwachung automatisch erfasst, während Ihre Seite geladen wird.
In der Tabelle „Dauer“ werden alle benutzerdefinierten Ablaufverfolgungen angezeigt, die Sie im Code Ihrer App definiert haben.

Klicken Sie in der Tabelle „Dauer “ auf „saveImageMessage“ , um bestimmte Metriken für die Ablaufverfolgung zu überprüfen.

Klicken Sie auf Aggregieren , um die Verteilung der Bildgrößen zu überprüfen. Sie können die Metrik sehen, die Sie hinzugefügt haben, um die Bildgröße für diese benutzerdefinierte Ablaufverfolgung zu messen.

Klicken Sie im vorherigen Schritt neben „Aggregieren“ auf „Über Zeit“ . Sie können auch die Dauer der benutzerdefinierten Ablaufverfolgung anzeigen. Klicken Sie auf „Mehr anzeigen“ , um die gesammelten Daten detaillierter anzuzeigen.

Auf der sich öffnenden Seite können Sie die Dauerdaten nach Bild-MIME-Typ segmentieren, indem Sie auf imageType klicken. Diese spezifischen Daten wurden aufgrund des imageType-Attributs protokolliert, das Sie Ihrer benutzerdefinierten Ablaufverfolgung hinzugefügt haben.

Überprüfen Sie die Netzwerkdaten

Eine HTTP/S-Netzwerkanforderung ist ein Bericht, der die Antwortzeit und die Nutzlastgröße von Netzwerkaufrufen erfasst.

Gehen Sie zurück zum Hauptbildschirm des Leistungsüberwachungs-Dashboards.
Klicken Sie auf die Registerkarte „Netzwerk“ , um eine Liste der Netzwerkanforderungseinträge für Ihre Web-App anzuzeigen.
Durchsuchen Sie sie, um langsame Anfragen zu identifizieren und beginnen Sie mit der Arbeit an einer Lösung, um die Leistung Ihrer App zu verbessern!

12. Herzlichen Glückwunsch!

Sie haben das Firebase SDK für die Leistungsüberwachung aktiviert und automatische und benutzerdefinierte Ablaufverfolgungen gesammelt, um die tatsächliche Leistung Ihrer Chat-App zu messen!

Was wir abgedeckt haben:

Hinzufügen des Firebase Performance Monitoring SDK zu Ihrer Web-App.
Hinzufügen benutzerdefinierter Traces zu Ihrem Code.
Aufzeichnen benutzerdefinierter Metriken, die mit der benutzerdefinierten Ablaufverfolgung verknüpft sind.
Leistungsdaten mithilfe benutzerdefinierter Attribute segmentieren.
Erfahren Sie, wie Sie mit dem Leistungsüberwachungs-Dashboard Erkenntnisse über die Leistung Ihrer App gewinnen.

Firebase-Leistungsüberwachung für das Web

1. Übersicht

Was Sie lernen werden

Was du brauchen wirst

2. Holen Sie sich den Beispielcode

Importieren Sie die Starter-App

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

Aktivieren Sie die Google-Anmeldung für die Firebase-Authentifizierung

Aktivieren Sie Cloud Firestore

Aktivieren Sie Cloud-Speicher

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

5. Integration mit Firebase Performance Monitoring

Fügen Sie eine Leistungsüberwachung hinzu und initialisieren Sie Firebase

Fügen Sie die erste Polyfill-Bibliothek für die Eingabeverzögerung hinzu

6. Fügen Sie Ihrer App einen benutzerdefinierten Trace hinzu

7. Fügen Sie Ihrer App eine benutzerdefinierte Metrik hinzu.

8. Fügen Sie Ihrer App ein benutzerdefiniertes Attribut hinzu

9. [Erweitern] Fügen Sie einen benutzerdefinierten Trace mit der User Timing API hinzu

10. Stellen Sie es bereit und beginnen Sie mit dem Senden von Bildern

Auf Firebase Hosting bereitstellen

Stellen Sie sicher, dass die Leistungsüberwachung aktiviert ist

Bildnachricht senden

11. Überwachen Sie das Dashboard

Greifen Sie auf Ihr Dashboard zu

Überprüfen Sie die Daten auf dem Gerät

Überprüfen Sie die Netzwerkdaten

12. Herzlichen Glückwunsch!

Was wir abgedeckt haben:

Erfahren Sie mehr: