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.
• Wie Sie ein bestimmtes Code-Snippet mit benutzerdefinierten Traces messen.
• Informationen zum Aufzeichnen zusätzlicher, benutzerdefinierter Messwerte, die mit einem benutzerdefinierten Trace verknüpft sind.
• Leistungsdaten mithilfe benutzerdefinierter Attribute weiter segmentieren
• Hier erfahren Sie, wie Sie das Leistungsüberwachungs-Dashboard verwenden, um die Leistung Ihrer Webanwendung zu verstehen.

Voraussetzungen

• Die IDE oder der Texteditor Ihrer Wahl, z. B. WebStorm, Atom, Sublime oder VS Code
• Ein Terminal/eine Konsole
• Browser Ihrer Wahl, 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 Codelab ü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. Geben Sie dem Firebase-Projekt den Namen FriendlyChat.

Merken 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 für Ihr Firebase-Projekt das „Pay as you go“-Preismodell (Blaze) festgelegt sein. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft ist.

• Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode wie eine Kreditkarte erforderlich.
• Wenn Sie Firebase und Google Cloud zum ersten Mal verwenden, prüfen Sie, ob Sie Anspruch auf ein Guthaben von 300$und ein kostenloses Cloud-Rechnungskonto für die Testversion 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 Tarif „Blaze“ 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 zum Upgradevorgang in der 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 mit dem Alias Friendly Chat und klicken Sie dann auf das Kästchen neben Firebase Hosting auch für diese App einrichten.
3. Klicken Sie auf App registrieren.
4. Klicken Sie sich durch die restlichen Schritte. Sie müssen nicht gleich der Anleitung auf dem Bildschirm folgen. Sie werden in späteren Schritten dieses Codelabs behandelt.

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 den Abschnitt Develop.
2. Klicken Sie auf Authentifizierung und dann auf den Tab Anmeldemethode ( zur Konsole).
3. Aktivieren Sie den Google-Anmeldeanbieter 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 Web-App verwendet Cloud Storage for Firebase, um Bilder zu speichern, hochzuladen und zu teilen.

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 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 können Sie die Stufe „Immer kostenlos“ für Google Cloud Storage nutzen. Für Buckets an allen anderen Speicherorten gelten die Preise und Nutzungsbedingungen für Google Cloud Storage.
4. Klicken Sie auf Im Testmodus starten. Lies dir den Haftungsausschluss zu den Sicherheitsregeln durch.
   Später in diesem Codelab kannst du Sicherheitsregeln hinzufügen, um deine 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 können Sie Firebase Hosting verwenden, um Ihre Web-App lokal bereitzustellen und Ihre Web-App in Ihrem Firebase-Projekt bereitzustellen.

1. Folgen Sie dieser Anleitung in der Firebase-Dokumentation, 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 jedoch mit Ihrem Firebase-Projekt verknüpfen.

4. Prüfen Sie, ob die Befehlszeile auf das lokale Verzeichnis performance-monitoring-start 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 einfach den Alias default.

7. Folgen Sie der Anleitung in der Befehlszeile.

5. In Firebase Performance Monitoring einbinden

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 für Hosting-URLs.

Leistungsüberwachung hinzufügen und Firebase initialisieren

1. Öffnen Sie die Datei src/index.js und fügen Sie die folgende Zeile unter TODO hinzu, 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 muss das Firebase SDK mit einem Konfigurationsobjekt initialisiert werden, das Informationen über das Firebase-Projekt und die zu verwendende Web-App enthält. 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 bereits die folgende Zeile am Ende der Datei public/index.html hinzugefügt. Prüfen Sie aber noch einmal, 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 ein, 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 Traces für den automatischen Seitenaufbau finden Sie in der Dokumentation.

Erste Polyfill-Bibliothek für Eingabeverzögerungen 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 beendet, sobald der Browser auf die Eingabe reagieren kann. Dies bedeutet, dass der Browser nicht gerade damit beschäftigt ist, Ihren Content 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 für die folgende 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>

Damit haben Sie die Integration von Firebase Performance Monitoring in Ihren 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. Zum Aufzeichnen eines benutzerdefinierten Trace müssen Sie den Start- und Endpunkt für den Trace 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 eine Vorstellung 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 ein benutzerdefiniertes Trace weiter konfigurieren, um benutzerdefinierte Messwerte für leistungsbezogene Ereignisse innerhalb dieses Geltungsbereichs zu erfassen. 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 das benutzerdefinierte Trace aus dem vorherigen Schritt, das in der Datei src/index.js definiert ist.
2. Fügen Sie die folgende Zeile unter TODO ein, um die Größe des hochgeladenen Bildes zu erfassen.

index.js

 ...

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

 ...

Mit diesem Messwert kann die Leistungsüberwachung die benutzerdefinierte Trace-Dauer sowie die Größe des hochgeladenen Bildes aufzeichnen.

8. Benutzerdefiniertes Attribut zur App hinzufügen

Aufbauend auf den vorherigen Schritten können Sie auch benutzerdefinierte Attribute in Ihren benutzerdefinierten Traces erfassen. Benutzerdefinierte Attribute können helfen, Daten nach App-Kategorien zu segmentieren. 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 kann die Leistungsüberwachung die benutzerdefinierte Trace-Dauer anhand des hochgeladenen Bildtyps kategorisieren.

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

Das Firebase Performance Monitoring SDK wurde so entwickelt, dass es asynchron geladen werden kann und die Leistung von Web-Apps beim Seitenaufbau nicht beeinträchtigt. Bevor das SDK geladen wird, ist die Firebase Performance Monitoring API nicht verfügbar. In diesem Szenario können Sie mithilfe der User Timing API weiterhin benutzerdefinierte Traces hinzufügen. Das Firebase Performance SDK ruft die Dauer 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 der Datei public/index.html die folgende Zeile hinzu, um den Ladevorgang der App-Stil-Skripts 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. Images 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 die 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 Webanwendung auf, die jetzt vollständig mit Firebase Hosting gehostet wird, auf zwei Ihrer eigenen Firebase-Subdomains: 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 in einer Willkommensnachricht „SDK erkannt“ angezeigt wird, haben Sie Firebase Performance Monitoring integriert.

Bildnachricht senden

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

1. Melden Sie sich in der Chat-App an und klicken Sie 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.

Dashboard aufrufen

1. Wählen Sie in der Firebase Console das Projekt mit Ihrer Friendly Chat-App aus.
2. Suchen Sie im linken Bereich den Abschnitt Qualität und klicken Sie auf Leistung.

On-Device-Daten prüfen

Nachdem die Leistungsüberwachung die Daten Ihrer App verarbeitet hat, sehen Sie oben im Dashboard Tabs. 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 Messen der Bildgröße für diesen benutzerdefinierten Trace hinzugefügt haben.

4. Klicken Sie im vorherigen Schritt neben Aggregieren auf Im Zeitverlauf. Sie können auch die Dauer des benutzerdefinierten Trace anzeigen. Klicken Sie auf Mehr anzeigen, um sich die erhobenen Daten genauer anzusehen.

5. Auf der Seite, die geöffnet wird, können Sie die Daten für die Dauer nach Bild-MIME-Typ segmentieren, indem Sie auf imageType klicken. Diese Daten wurden aufgrund des „imageType“-Attributs protokolliert, das Sie Ihrem benutzerdefinierten Trace hinzugefügt haben.

Netzwerkdaten überprüfen

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

1. Kehren Sie zum Hauptbildschirm des Dashboards zur Leistungsüberwachung zurück.
2. Klicken Sie auf den Tab Netzwerk, um eine Liste der Netzwerkanfrageeinträge für Ihre Web-App 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
• Hier erfahren Sie, wie Sie das Dashboard zur Leistungsüberwachung verwenden können, um Informationen zur Leistung Ihrer App zu erhalten.

Weitere Informationen:

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