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 Messwerte (Seitenladevorgänge und Netzwerkanforderungen) zu erhalten.
- So messen Sie einen bestimmten Codeabschnitt mit benutzerdefinierten Ablaufverfolgungen.
- So zeichnen Sie zusätzliche benutzerdefinierte Metriken auf, die mit einer benutzerdefinierten Ablaufverfolgung verknüpft sind.
- Wie Sie Ihre Leistungsdaten mit benutzerdefinierten Attributen weiter segmentieren.
- So verwenden Sie das Leistungsüberwachungs-Dashboard, um die Leistung Ihrer Web-App zu verstehen.
Was du brauchen wirst
2. Holen Sie sich den Beispielcode
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, das eine Chat-Web-App ist.
3. Erstellen und richten Sie ein Firebase-Projekt ein
Erstellen Sie ein Firebase-Projekt
- Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen .
- Nennen 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-Web-App hinzu
- Klicken Sie auf das Web-Symbol
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 verbleibenden 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 Nutzer 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 den Abschnitt „ Entwickeln “ im linken Bereich.
- 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 Startcode 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 for Firebase, um Bilder zu speichern, hochzuladen und zu teilen.
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 der Firebase-Dokumentation 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 v8.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 eingerichtet, um die Konfiguration Ihrer App für Firebase-Hosting aus dem lokalen Verzeichnis Ihrer App (dem Repository, das Sie zuvor im Codelab geklont haben) abzurufen. Aber um die Konfiguration abzurufen, müssen wir Ihre App mit Ihrem Firebase-Projekt verknüpfen.
- Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale
performance-monitoring-start
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 mehrere Umgebungen haben (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch einfach den Alias default
.
- Befolgen Sie die verbleibenden 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 (Details finden Sie in der Dokumentation ). In diesem Codelab aktivieren wir die Leistungsüberwachung von Hosting-URLs .
Leistungsüberwachung hinzufügen und Firebase initialisieren
- Öffnen Sie die Datei
src/index.js
und fügen Sie dann die folgende Zeile unterTODO
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 bereits die folgende Zeile am Ende der Datei
public/index.html
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 unterTODO
hinzu, um die Leistungsüberwachung zu initialisieren.
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
Die Leistungsüberwachung erfasst jetzt automatisch Messwerte zum Laden von Seiten und Netzwerkanfragen für Sie, wenn Benutzer Ihre Website verwenden! Lesen Sie die Dokumentation , um mehr über automatische Ablaufverfolgungen für das Laden von Seiten zu erfahren.
Fügen Sie die erste Eingangsverzögerungs-Polyfill-Bibliothek hinzu
Die Verzögerung bei 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 gibt.
Die Verzögerung bei der ersten Eingabe beginnt, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. auf eine Schaltfläche oder einen Hyperlink klickt. 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 parsen.
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>
An diesem Punkt haben Sie die Integration mit Firebase Performance Monitoring in Ihrem Code abgeschlossen!
In den folgenden Schritten erfahren Sie, wie Sie mithilfe der Firebase-Leistungsüberwachung benutzerdefinierte Ablaufverfolgungen hinzufügen. Wenn Sie nur die automatischen Ablaufverfolgungen erfassen möchten, gehen Sie zum Abschnitt „Bereitstellen und mit dem Senden von Bildern beginnen“.
6. Fügen Sie Ihrer App eine benutzerdefinierte Ablaufverfolgung hinzu
Mit der Leistungsüberwachung können Sie benutzerdefinierte Ablaufverfolgungen erstellen. Ein benutzerdefinierter Trace ist ein Bericht für die Dauer eines Ausführungsblocks in Ihrer App. Sie definieren den Beginn und das Ende einer benutzerdefinierten Ablaufverfolgung mithilfe der vom SDK bereitgestellten APIs.
- Rufen Sie in der Datei
src/index.js
ein Leistungsobjekt ab und erstellen Sie dann eine benutzerdefinierte Ablaufverfolgung 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 Start- und Endpunkt für die Ablaufverfolgung angeben. Sie können sich eine Ablaufverfolgung 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 erfolgreich einen benutzerdefinierten Trace definiert! Nach der Bereitstellung Ihres Codes wird die Dauer der benutzerdefinierten Ablaufverfolgung 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 eine benutzerdefinierte Ablaufverfolgung weiter konfigurieren, um benutzerdefinierte Metriken für leistungsbezogene Ereignisse aufzuzeichnen, die in ihrem Bereich auftreten. Beispielsweise können Sie 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
src/index.js
-Datei). - 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 der Leistungsüberwachung, die benutzerdefinierte Ablaufverfolgungsdauer sowie die hochgeladene Bildgröße 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 Kategorien helfen, 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 auswirkt.
- 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 hochgeladenen Bildtyp 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 nicht negativ auf die Leistung von Web-Apps während des Ladens von Seiten auswirkt. Vor dem Laden des SDK ist die Firebase Performance Monitoring API nicht verfügbar. In diesem Szenario können Sie immer noch benutzerdefinierte Traces 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 Ladevorgangs der App-Styling-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>
- Fügen Sie die folgenden Zeilen hinzu, um das Ende des Ladevorgangs der App-Styling-Skripts 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 von Ihnen hier erstellte Eintrag wird automatisch von Firebase Performance Monitoring erfasst. Später finden Sie in der Firebase-Leistungskonsole eine benutzerdefinierte Ablaufverfolgung namens loadStyling
.
10. Stellen Sie Bilder bereit und beginnen Sie mit dem Senden
Bereitstellen auf Firebase-Hosting
Führen Sie nach dem Hinzufügen von Firebase Performance Monitoring zu Ihrem Code die folgenden Schritte aus, um Ihren Code auf Firebase Hosting bereitzustellen:
- Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale
performance-monitoring-start
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
undhttps://<projectId>.web.app
.
Stellen Sie sicher, dass die Leistungsüberwachung aktiviert ist
Öffnen Sie die Firebase-Konsole und wechseln Sie zur Registerkarte Leistung . Wenn Sie eine Willkommensnachricht mit dem Inhalt „SDK erkannt“ sehen, haben Sie die Firebase-Leistungsüberwachung erfolgreich integriert!
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 sind in
public/images/
gespeichert), damit Sie die Verteilung von benutzerdefinierten Metriken und benutzerdefinierten Attributen 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 mit Ihrer
Friendly Chat
App aus. - 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 am oberen Rand des Dashboards 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 Seitenladevorgänge zeigt die verschiedenen Leistungsmetriken, die die Leistungsüberwachung automatisch sammelt, während Ihre Seite geladen wird.
- Die Tabelle Dauer zeigt alle benutzerdefinierten Ablaufverfolgungen, die Sie im Code Ihrer App definiert haben.
- Klicken Sie in der Tabelle Durations 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 Aggregate auf Im Laufe der Zeit . Sie können auch die Dauer des benutzerdefinierten Trace 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 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 Traces und benutzerdefinierte Traces gesammelt, um die reale Leistung Ihrer Chat-App zu messen!
Was wir abgedeckt haben:
- Hinzufügen des Firebase Performance Monitoring SDK zu Ihrer Web-App.
- Hinzufügen benutzerdefinierter Ablaufverfolgungen zu Ihrem Code.
- Aufzeichnen benutzerdefinierter Metriken, die mit dem benutzerdefinierten Trace verknüpft sind.
- Leistungsdaten mit benutzerdefinierten Attributen segmentieren.
- Verstehen, wie Sie das Leistungsüberwachungs-Dashboard verwenden, um Einblicke in die Leistung Ihrer App zu erhalten.