Firebase-Leistungsüberwachung für das Web

In diesem Codelab erfahren Sie, wie Sie mithilfe der Firebase-Leistungsüberwachung die Leistung einer Chat-Webanwendung messen. Besuchen Sie https://fireperf-friendlychat.web.app/ , um eine Live-Demo zu sehen.

Was du lernen wirst

• So fügen Sie Ihrer Webanwendung Firebase Performance Monitoring hinzu, um sofort einsatzbereite Messdaten (Seitenlast und Netzwerkanforderungen) abzurufen.
• So messen Sie einen bestimmten Code mit benutzerdefinierten Traces.
• Aufzeichnen zusätzlicher, benutzerdefinierter Metriken, die an eine benutzerdefinierte Ablaufverfolgung gebunden sind.
• So segmentieren Sie Ihre Leistungsdaten mit benutzerdefinierten Attributen weiter.
• So verwenden Sie das Dashboard zur Leistungsüberwachung, um die Leistung Ihrer Webanwendung 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 wie Chrome
• Beispielcode des Codelabs (Informationen zum Abrufen des Codes finden Sie im nächsten Abschnitt dieses Codelabs.)

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 Repo alternativ 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 enthält den Startcode für das Codelab, bei dem es sich um eine Chat-Web-App handelt.

Erstellen Sie ein Firebase-Projekt

1. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen .
2. Nennen Sie Ihr Firebase-Projekt FriendlyChat .

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

3. Klicken Sie auf Projekt erstellen .

Fügen Sie dem Projekt eine Firebase-Webanwendung hinzu

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

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

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:

1. Suchen Sie in der Firebase-Konsole den Abschnitt Entwickeln im linken Bereich.
2. Klicken Sie auf Authentifizierung, klicken Sie auf den Anmelde-Verfahren Registerkarte ( gehen Sie zu trösten ).
3. Aktivieren Sie den Google -Anmeldeanbieter und klicken Sie dann auf Speichern .

Cloud Firestore aktivieren

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

Sie müssen den Cloud Firestore aktivieren:

1. Klicken Sie im Abschnitt Entwickeln der Firebase-Konsole auf Datenbank .
2. Klicken Sie im Bereich Cloud Firestore auf Datenbank erstellen .
3. Wählen Sie die Option Im Testmodus starten und klicken Sie 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.

Cloud-Speicher aktivieren

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

Sie müssen Cloud Storage aktivieren:

1. Klicken Sie im Abschnitt Entwickeln der Firebase-Konsole auf Speicher .
2. Klicken Sie auf Erste Schritte .
3. Lesen Sie den Haftungsausschluss zu Sicherheitsregeln für Ihr Firebase-Projekt und klicken Sie dann auf Erhalten .

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

Über die Firebase-Befehlszeilenschnittstelle (CLI) können Sie Firebase-Hosting verwenden, um Ihre Webanwendung lokal bereitzustellen und Ihre Webanwendung für Ihr Firebase-Projekt bereitzustellen.

1. Installieren Sie die CLI, indem Sie diese Anweisungen in den Firebase-Dokumenten befolgen.
2. Stellen Sie sicher, dass 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.

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

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. Um die Konfiguration abzurufen, müssen wir Ihre App Ihrem Firebase-Projekt zuordnen.

4. Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale performance-monitoring-start die 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. Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt einen Alias.

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

7. Befolgen Sie die restlichen Anweisungen in Ihrer Befehlszeile.

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

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

1. Öffnen Sie die Datei public/index.html und fügen Sie die folgende Zeile unter dem TODO , um das Firebase Performance Monitoring SDK einzuschließen.

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>

2. Wir müssen das Firebase SDK auch 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 bereits die folgende Zeile am Ende der Datei public/index.html für Sie hinzugefügt. Überprüfen Sie jedoch, ob sie vorhanden ist.

index.html

<script src="/__/firebase/init.js"></script>

3. public/scripts/main.js Datei public/scripts/main.js die folgende Zeile unter dem TODO , um die Leistungsüberwachung zu initialisieren.

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

Die Leistungsüberwachung erfasst jetzt automatisch Messdaten zum Laden von Seiten und zur Netzwerkanforderung für Sie, wenn Benutzer Ihre Site verwenden! Weitere Informationen zu automatischen Seitenladeprotokollen finden Sie in der Dokumentation .

Fügen Sie die erste Polyfill-Bibliothek für Eingangsverzögerungen 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, z. B. durch Klicken auf eine Schaltfläche oder einen Hyperlink. Es wird sofort beendet, nachdem der Browser auf die Eingabe reagieren kann. Dies bedeutet, dass der Browser nicht damit beschäftigt ist, Ihre Inhalte zu laden oder zu analysieren.

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

Ö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>

Zu diesem Zeitpunkt haben Sie die Integration mit Firebase Performance Monitoring in Ihren Code abgeschlossen!

In den folgenden Schritten erfahren Sie, wie Sie mithilfe der Firebase-Leistungsüberwachung benutzerdefinierte Traces hinzufügen. Wenn Sie nur die automatischen Traces erfassen möchten, gehen Sie zum Abschnitt "Bereitstellen und Senden von Bildern".

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 Trace mithilfe der vom SDK bereitgestellten APIs.

1. public/scripts/main.js Datei public/scripts/main.js ein Leistungsobjekt ab und erstellen Sie eine benutzerdefinierte Ablaufverfolgung zum Hochladen einer Bildnachricht.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');

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

main.js

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

 ...

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

Sie haben erfolgreich einen benutzerdefinierten Trace definiert! Nach der Bereitstellung Ihres Codes wird die Dauer der benutzerdefinierten Ablaufverfolgung aufgezeichnet, wenn ein Benutzer eine Bildnachricht sendet. Auf diese Weise erhalten Sie eine Vorstellung davon, wie lange Benutzer in der realen Welt benötigen, um Bilder in Ihrer Chat-App zu senden.

Sie können eine benutzerdefinierte Ablaufverfolgung weiter konfigurieren, um benutzerdefinierte Metriken für leistungsbezogene Ereignisse aufzuzeichnen, die in ihrem Bereich auftreten. Mithilfe einer Metrik können Sie beispielsweise untersuchen, ob die Upload-Zeit von der Größe eines Bildes für den benutzerdefinierten Trace beeinflusst wird, den wir im letzten Schritt definiert haben.

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

main.js

 ...

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

 ...

Mit dieser Metrik kann die Leistungsüberwachung die benutzerdefinierte Ablaufverfolgungsdauer sowie die Größe des hochgeladenen Bildes aufzeichnen.

Aufbauend auf den vorherigen Schritten können Sie auch benutzerdefinierte Attribute für Ihre benutzerdefinierten Traces erfassen. Benutzerdefinierte Attribute können bei der Segmentierung von Daten nach Kategorien hilfreich sein, 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 kann.

1. Verwenden Sie den benutzerdefinierten Trace, der in Ihrer Datei public/scripts/main.js ist.
2. Fügen Sie die folgende Zeile unter dem TODO , um den MIME-Typ des hochgeladenen Bildes aufzuzeichnen.

main.js

 ...

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

 ...

Mit diesem Attribut kann die Leistungsüberwachung die benutzerdefinierte Ablaufverfolgungsdauer basierend auf dem hochgeladenen Bildtyp kategorisieren.

Das Firebase Performance Monitoring SDK wurde so konzipiert, dass es asynchron geladen werden kann und die Leistung von Webanwendungen beim Laden von Seiten nicht beeinträchtigt. Vor dem Laden des SDK 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-Leistungs-SDK erfasst 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.

1. public/index.html 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>

2. Fügen Sie die folgenden Zeilen hinzu, um das Ende des Ladens der App-Styling-Skripte 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. Sie können loadStyling in der Firebase Performance-Konsole einen benutzerdefinierten Trace namens loadStyling finden.

Bereitstellung auf Firebase-Hosting

Führen Sie nach dem Hinzufügen von Firebase Performance Monitoring zu Ihrem Code die folgenden Schritte aus, um Ihren Code für Firebase Hosting bereitzustellen:

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

firebase deploy

3. 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

4. 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 wechseln Sie zur Registerkarte Leistung . Wenn eine Begrüßungsnachricht mit der Meldung "SDK erkannt" angezeigt wird, haben Sie sich erfolgreich in Firebase Performance Monitoring integriert!

Bildnachricht senden

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

1. Klicken Sie nach der Anmeldung bei Ihrer Chat-App auf die Schaltfläche zum Hochladen von Bildern .
2. Wählen Sie mit der Dateiauswahl eine Bilddatei aus.
3. Versuchen Sie, mehrere Bilder zu senden (einige Beispiele sind in public/images/ gespeichert), damit Sie die Verteilung von benutzerdefinierten Metriken und benutzerdefinierten Attributen testen können.

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

Nach der Bereitstellung Ihrer Webanwendung und dem Senden von Image-Nachrichten als Benutzer können Sie die Leistungsdaten im Leistungsüberwachungs-Dashboard (in der Firebase-Konsole) überprüfen.

Greifen Sie auf Ihr Dashboard zu

1. Wählen Sie in der Firebase-Konsole das Projekt aus, in dem sich Ihre Friendly Chat App befindet.
2. Suchen Sie im linken Bereich den Abschnitt Qualität und klicken Sie auf Leistung .

Überprüfen Sie die Gerätedaten

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

1. Klicken Sie auf die Registerkarte Auf Gerät .

• Die Seite lädt Tabelle zeigt die verschiedenen Performance - Metriken , dass die Leistung automatisch Überwachung sammelt , während die Seite geladen ist.
• 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 Metriken für den Trace zu überprüfen.

3. 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.

4. Klicken Sie im vorherigen Schritt neben Aggregat auf Über die Zeit . Sie können auch die Dauer der benutzerdefinierten Ablaufverfolgung anzeigen. Klicken Sie auf Mehr anzeigen, um die gesammelten Daten detaillierter zu überprüfen.

5. Auf der sich öffnenden Seite können Sie die Dauer nach Segment-MIME-Typ segmentieren, indem Sie auf imageType klicken. Diese spezifischen Daten wurden aufgrund des imageType-Attributs protokolliert, das Sie Ihrem benutzerdefinierten Trace hinzugefügt haben.

Überprüfen Sie die Netzwerkdaten

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

1. Kehren Sie zum Hauptbildschirm des Leistungsüberwachungs-Dashboards zurück.
2. Klicken Sie auf die Registerkarte Netzwerk , um eine Liste der Netzwerkanforderungseinträge für Ihre Web-App anzuzeigen.
3. Durchsuchen Sie sie, um langsame Anfragen zu identifizieren, und arbeiten Sie an einem Fix, um die Leistung Ihrer App zu verbessern!

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

Was wir behandelt haben:

• Hinzufügen des Firebase Performance Monitoring SDK zu Ihrer Web-App.
• Hinzufügen von benutzerdefinierten Traces zu Ihrem Code.
• Aufzeichnen von benutzerdefinierten Metriken, die an die benutzerdefinierte Ablaufverfolgung gebunden sind.
• Segmentieren von Leistungsdaten mithilfe benutzerdefinierter Attribute.
• Verstehen, wie Sie das Dashboard zur Leistungsüberwachung verwenden, um Einblicke in die Leistung Ihrer App zu erhalten.

Mehr erfahren:

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