Firebase Performance Monitoring für das Web

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit Firebase Performance Monitoring die Leistung einer Chat-Web-App messen. Unter https://fireperf-friendlychat.web.app/ können Sie sich eine Live-Demo ansehen.

Aufgaben in diesem Lab

• So fügen Sie Ihrer Webanwendung Firebase Performance Monitoring hinzu, um standardmäßige Messwerte (Seitenladezeit und Netzwerkanfragen) zu erhalten.
• So messen Sie einen bestimmten Codeabschnitt mit benutzerdefinierten Traces.
• So erfassen Sie zusätzliche benutzerdefinierte Messwerte, die mit einer benutzerdefinierten Trace-Datei verknüpft sind.
• Leistungsdaten mit benutzerdefinierten Attributen weiter segmentieren
• So können Sie mit dem Dashboard zur Leistungsüberwachung die Leistung Ihrer Webanwendung analysieren.

Voraussetzungen

• Die IDE oder der Texteditor Ihrer Wahl, z. B. WebStorm, Atom, Sublime oder VS Code
• Terminal/Konsole
• Einen beliebigen Browser, z. B. Chrome
• Der Beispielcode des Codelabs (wie Sie den Code abrufen, erfahren Sie im nächsten Abschnitt dieses Codelabs)

2. Beispielcode abrufen

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

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

Wenn Sie Git nicht installiert haben, können Sie das Repository auch als ZIP-Datei herunterladen.

Start-App importieren

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

3. Firebase-Projekt erstellen und einrichten

Firebase-Projekt erstellen

1. Klicken Sie in der Firebase Console auf Projekt hinzufügen.
2. Benennen Sie Ihr Firebase-Projekt in FriendlyChat um.

Notieren Sie sich die Projekt-ID Ihres Firebase-Projekts.

3. Klicken Sie auf Projekt erstellen.

Firebase-Preismodell upgraden

Damit Sie Cloud Storage for Firebase verwenden können, muss Ihr Firebase-Projekt den Blaze-Tarif (Pay as you go) haben. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft sein muss.

• Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode wie eine Kreditkarte erforderlich.
• Wenn Sie neu bei Firebase und Google Cloud sind, prüfen Sie, ob Sie Anspruch auf ein Guthaben in Höhe von 300$und ein kostenloses Cloud Billing-Konto für den Testzeitraum haben.
• Wenn Sie dieses Codelab im Rahmen einer Veranstaltung absolvieren, fragen Sie den Organisator, ob Cloud-Guthaben verfügbar ist.

So führen Sie ein Upgrade auf den Blaze-Tarif durch:

1. Wählen Sie in der Firebase Console Tarif upgraden aus.
2. Wählen Sie den Blaze-Tarif aus. Folgen Sie der Anleitung auf dem Bildschirm, um ein Cloud-Rechnungskonto mit Ihrem Projekt zu verknüpfen.
   Wenn Sie im Rahmen dieses Upgrades ein Cloud-Rechnungskonto erstellen mussten, müssen Sie möglicherweise zur Firebase Console zurückkehren, um das Upgrade abzuschließen.

Dem Projekt eine Firebase-Web-App hinzufügen

1. Klicken Sie auf das Websymbol , um eine neue Firebase-Web-App zu erstellen.
2. Registrieren Sie die App unter dem Alias Friendly Chat und klicken Sie dann das Kästchen neben Richten Sie außerdem Firebase Hosting für diese App ein an.
3. Klicken Sie auf App registrieren.
4. Klicken Sie sich durch die restlichen Schritte. Sie müssen der Anleitung auf dem Bildschirm noch nicht folgen, da sie in späteren Schritten dieses Codelabs behandelt werden.

Google Log-in für die Firebase-Authentifizierung aktivieren

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

Sie müssen die Google-Anmeldung aktivieren:

1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Entwickeln.
2. Klicken Sie auf Authentifizierung und dann auf den Tab Anmeldemethode ( zur Konsole).
3. Aktivieren Sie den Anmeldeanbieter Google und klicken Sie dann auf Speichern.

Cloud Firestore einrichten

Die Webanwendung verwendet Cloud Firestore, um Chatnachrichten zu speichern und neue Chatnachrichten zu empfangen.

So richten Sie Cloud Firestore in Ihrem Firebase-Projekt ein:

1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Firestore-Datenbank aus.
2. Klicken Sie auf Datenbank erstellen.
3. Lassen Sie die Datenbank-ID auf (default).
4. Wählen Sie einen Speicherort für die Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort in der Nähe Ihrer Nutzer auswählen.
5. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
6. Klicken Sie auf Erstellen.

Cloud Storage for Firebase einrichten

Die Webanwendung nutzt Cloud Storage for Firebase zum Speichern, Hochladen und Teilen von Bildern.

So richten Sie Cloud Storage for Firebase in Ihrem Firebase-Projekt ein:

1. Maximieren Sie im linken Bereich der Firebase Console die Option Build und wählen Sie dann Storage aus.
2. Klicken Sie auf Jetzt starten.
3. Wählen Sie einen Speicherort für Ihren Standard-Storage-Bucket aus.
   Für Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 kann die Stufe „Immer kostenlos“ für Google Cloud Storage genutzt werden. Für Buckets an allen anderen Speicherorten gelten die Preise und Nutzungsbedingungen für Google Cloud Storage.
4. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihren Speicher-Bucket hinzuzufügen.
5. Klicken Sie auf Erstellen.

4. Firebase-Befehlszeilentool installieren

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

1. Folgen Sie der Anleitung in den Firebase-Dokumenten, um die Befehlszeile zu installieren.
2. Prüfen Sie, ob die Befehlszeile richtig installiert wurde, indem Sie in einem Terminal den folgenden Befehl ausführen:

firebase --version

Sie benötigen die Version 8.0.0 oder höher der Firebase CLI.

3. Autorisieren Sie die Firebase CLI mit dem folgenden Befehl:

firebase login

Wir haben die Web-App-Vorlage so eingerichtet, dass die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis Ihrer App (dem Repository, das Sie zuvor im Codelab geklont haben) abgerufen wird. Damit wir die Konfiguration abrufen können, müssen wir Ihre App mit Ihrem Firebase-Projekt verknüpfen.

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

firebase use --add

6. Wählen Sie auf Aufforderung Ihre Projekt-ID aus und geben Sie dann einen Alias für Ihr Firebase-Projekt an.

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

7. Folgen Sie der Anleitung in der Befehlszeile.

5. Mit Firebase Performance Monitoring integrieren

Es gibt verschiedene Möglichkeiten, das Firebase Performance Monitoring SDK für das Web zu integrieren. Weitere Informationen finden Sie in der Dokumentation. In diesem Codelab aktivieren wir die Leistungsüberwachung über Hosting-URLs.

Leistungsüberwachung hinzufügen und Firebase initialisieren

1. Öffnen Sie die Datei src/index.js und fügen Sie unter TODO die folgende Zeile ein, um das Firebase Performance Monitoring SDK einzubinden.

index.js

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

2. Außerdem müssen wir das Firebase SDK mit einem Konfigurationsobjekt initialisieren, das Informationen zum Firebase-Projekt und zur zu verwendenden Webanwendung enthält. Da wir Firebase Hosting verwenden, können Sie ein spezielles Script importieren, das diese Konfiguration für Sie durchführt. Für dieses Codelab haben wir die folgende Zeile bereits am Ende der Datei public/index.html hinzugefügt. Prüfen Sie aber, ob sie dort vorhanden ist.

index.html

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

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

index.js

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

Bei der Leistungsüberwachung werden jetzt automatisch Messwerte für das Seitenladen und Netzwerkanfragen erfasst, wenn Nutzer Ihre Website verwenden. Weitere Informationen zu automatischen Seitenlade-Traces

Polyfill-Bibliothek für First Input Delay hinzufügen

Die First Input Delay ist nützlich, da der Browser, der auf eine Nutzerinteraktion reagiert, den Nutzern einen ersten Eindruck von der Reaktionsfähigkeit Ihrer App vermittelt.

Die First Input Delay beginnt, wenn der Nutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. auf eine Schaltfläche oder einen Hyperlink klickt. Sie wird sofort beendet, nachdem der Browser auf die Eingabe reagieren kann. Das bedeutet, dass der Browser nicht gerade damit beschäftigt ist, Ihre Inhalte zu laden oder zu parsen.

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

Öffnen Sie die Datei public/index.html und entfernen Sie die Kommentarzeichen in der folgenden Zeile.

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>

Sie haben die Einbindung von Firebase Performance Monitoring in Ihrem Code abgeschlossen.

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

6. Benutzerdefinierten Trace zur App hinzufügen

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

1. 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");

2. Wenn Sie einen benutzerdefinierten Pfad aufzeichnen möchten, müssen Sie den Start- und Endpunkt des Pfads angeben. Sie können sich einen Trace als 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 eine benutzerdefinierte Trace-Datei definiert. Nach dem Bereitstellen Ihres Codes wird die Dauer der benutzerdefinierten Traces erfasst, wenn ein Nutzer eine Bildnachricht sendet. So erhalten Sie einen Eindruck davon, wie lange es dauert, bis echte Nutzer Bilder in Ihrer Chat-App senden.

7. Fügen Sie Ihrer App einen benutzerdefinierten Messwert hinzu.

Sie können eine benutzerdefinierte Trace weiter konfigurieren, um benutzerdefinierte Messwerte für leistungsbezogene Ereignisse aufzuzeichnen, die in ihrem Geltungsbereich auftreten. Sie können beispielsweise mit einem Messwert untersuchen, ob die Uploadzeit für die benutzerdefinierte Trace, die wir im letzten Schritt definiert haben, von der Größe eines Bildes beeinflusst wird.

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

index.js

 ...

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

 ...

Mit diesem Messwert können Sie bei der Leistungsüberwachung die benutzerdefinierte Trace-Dauer sowie die Größe des hochgeladenen Bildes erfassen.

8. Ihrer App ein benutzerdefiniertes Attribut hinzufügen

Aufbauend auf den vorherigen Schritten können Sie auch benutzerdefinierte Attribute in Ihren benutzerdefinierten Traces erfassen. Mit benutzerdefinierten Attributen können Sie Daten nach Kategorien segmentieren, die für Ihre App spezifisch sind. Sie können beispielsweise den MIME-Typ der Bilddatei erfassen, um zu untersuchen, wie sich der MIME-Typ auf die Leistung auswirken könnte.

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

index.js

 ...

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

 ...

Mit diesem Attribut können Sie die Dauer der benutzerdefinierten Traces basierend auf dem hochgeladenen Bildtyp kategorisieren.

9. [Erweiterung] Benutzerdefinierten Trace mit der User Timing API hinzufügen

Das Firebase Performance Monitoring SDK wurde so konzipiert, dass es asynchron geladen werden kann und sich daher nicht negativ auf die Leistung von Web-Apps beim Laden der Seite auswirkt. Bevor das SDK geladen wird, ist die Firebase Performance Monitoring API nicht verfügbar. In diesem Fall können Sie mithilfe der User Timing API weiterhin benutzerdefinierte Traces hinzufügen. Das Firebase Performance SDK ruft die Dauern von measure() ab und protokolliert sie als benutzerdefinierte Traces.

Wir messen die Dauer des Ladens von App-Styling-Scripts mit der User Timing API.

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

index.html

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

2. Fügen Sie die folgenden Zeilen hinzu, um das Ende des Ladens der App-Styling-Scripts zu markieren und 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 hier erstellte Eintrag wird automatisch von Firebase Performance Monitoring erfasst. Später finden Sie in der Firebase Performance Console einen benutzerdefinierten Trace namens loadStyling.

10. Bilder bereitstellen und senden

In Firebase Hosting bereitstellen

Nachdem Sie Ihrem Code Firebase Performance Monitoring hinzugefügt haben, können Sie ihn so bei Firebase Hosting bereitstellen:

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

firebase deploy

3. In der Konsole sollte Folgendes angezeigt werden:

=== 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.firebasestorage.app
✔  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

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

Prüfen, ob die Leistungsüberwachung aktiviert ist

Öffnen Sie die Firebase Console und rufen Sie den Tab Leistung auf. Wenn Sie die Begrüßungsnachricht „SDK erkannt“ sehen, haben Sie Firebase Performance Monitoring erfolgreich eingebunden.

Bildnachricht senden

Senden Sie Bilder in Ihrer Chat-App, um Leistungsdaten zu generieren.

1. Klicken Sie nach der Anmeldung in Ihrer Chat-App auf die Schaltfläche zum Hochladen von Bildern .
2. Wählen Sie mit der Dateiauswahl eine Bilddatei aus.
3. Senden Sie mehrere Bilder (einige Musterbeispiele sind in public/images/ gespeichert), damit Sie die Verteilung benutzerdefinierter Messwerte und benutzerdefinierter Attribute testen können.

Neue Mitteilungen sollten in der App-UI zusammen mit den ausgewählten Bildern angezeigt werden.

11. Dashboard überwachen

Nachdem Sie Ihre Webanwendung bereitgestellt und als Nutzer Bildnachrichten gesendet haben, können Sie die Leistungsdaten im Dashboard zur Leistungsüberwachung in der Firebase Console prüfen.

Auf Ihr Dashboard zugreifen

1. Wählen Sie in der Firebase Console das Projekt mit Ihrer Friendly Chat-App aus.
2. Klicken Sie im linken Bereich auf Leistung.

On-Device-Daten prüfen

Nachdem die Daten Ihrer App im Rahmen der Leistungsüberwachung verarbeitet wurden, werden oben im Dashboard Tabs angezeigt. Wenn Sie noch keine Daten oder Tabs sehen, sehen Sie später noch einmal nach.

1. Klicken Sie auf den Tab Auf dem Gerät.

• In der Tabelle Seitenaufrufe sehen Sie die verschiedenen Leistungsmesswerte, die während des Ladevorgangs automatisch erfasst werden.
• In der Tabelle Dauer werden alle benutzerdefinierten Traces angezeigt, die Sie im Code Ihrer App definiert haben.

2. Klicken Sie in der Tabelle Dauer auf saveImageMessage, um bestimmte Messwerte für den Trace aufzurufen.

3. Klicken Sie auf Zusammenfassen, um die Verteilung der Bildgrößen zu sehen. Sie sehen den Messwert, den Sie zum Ermitteln der Bildgröße für diese benutzerdefinierte Trace-Datei hinzugefügt haben.

4. Klicken Sie im vorherigen Schritt neben Zusammenfassen auf Im Zeitverlauf. Außerdem sehen Sie die Dauer des benutzerdefinierten Tracings. Klicken Sie auf Mehr anzeigen, um sich die erhobenen Daten genauer anzusehen.

5. Auf der Seite, die sich öffnet, können Sie die Daten zur Dauer nach dem MIME-Typ des Bilds segmentieren. Klicken Sie dazu auf imageType. Diese Daten wurden aufgrund des Attributs „imageType“ protokolliert, das Sie Ihrer benutzerdefinierten Trace-Datei hinzugefügt haben.

Netzwerkdaten überprüfen

Eine HTTP/S-Netzwerkanfrage ist ein Bericht, in dem die Antwortzeit und die Nutzlastgröße von Netzwerkaufrufen erfasst werden.

1. Kehren Sie zum Hauptbildschirm des Dashboards für die Leistungsüberwachung zurück.
2. Klicken Sie auf den Tab Netzwerk, um eine Liste der Netzwerkanfrageeinträge für Ihre Webanwendung aufzurufen.
3. Sehen Sie sich die Daten an, um langsame Anfragen zu identifizieren, und beginnen Sie mit der Behebung, um die Leistung Ihrer App zu verbessern.

12. Glückwunsch!

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

Folgende Themen wurden behandelt:

• Fügen Sie Ihrer Web-App das Firebase Performance Monitoring SDK hinzu.
• Fügen Sie Ihrem Code benutzerdefinierte Traces hinzu.
• Benutzerdefinierte Messwerte erfassen, die mit der benutzerdefinierten Trace-Datei verknüpft sind.
• Segmentieren von Leistungsdaten mit benutzerdefinierten Attributen
• Informationen zum Dashboard zur Leistungsüberwachung, mit dem Sie Einblicke in die Leistung Ihrer App erhalten

Weitere Informationen:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/