Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Erste Schritte mit Leistungsüberwachung für das Web

Bevor Sie beginnen

Wenn Sie dies noch nicht getan haben, besuchen Sie Hinzufügen von Firebase zu Ihrem JavaScript-Projekt , um zu erfahren, wie Sie:

  • Erstellen Sie ein Firebase-Projekt

  • Registrieren Sie Ihre Web-App bei Firebase

Beachten Sie, dass Sie beim Hinzufügen von Firebase zu Ihrer App möglicherweise auch einige der auf dieser Seite beschriebenen Schritte ausführen (z. B. Firebase SDKs hinzufügen und Firebase initialisieren ).

Schritt 1 : Leistungsüberwachung hinzufügen und Firebase initialisieren

Falls noch nicht geschehen, fügen Sie das Performance Monitoring SDK hinzu und initialisieren Sie Firebase in Ihrer App mit einer der folgenden Optionen. Beachten Sie Folgendes, um Ihnen bei der Auswahl Ihrer Optionen zu helfen (weitere Informationen finden Sie in den einzelnen Registerkarten):

  • Aus dem CDN (eigenständiges SDK) : Wenn die Leistungsüberwachung das einzige Firebase-Produkt in Ihrer App ist, lädt diese Option ein einzelnes, leichteres SDK aus dem CDN.

  • Aus dem CDN (Standard-SDK) : Wenn Sie andere Firebase-Produkte in Ihrer App verwenden, lädt diese Option das Leistungsüberwachungs-SDK zusammen mit anderen Firebase-Bibliotheken aus dem CDN.

  • Von Hosting-URLs – Wenn Sie Firebase Hosting verwenden, bietet diese Option eine bequeme Verwaltung Ihrer Firebase-Konfiguration beim Initialisieren von Firebase.

  • Modulbundler verwenden — Wenn Sie einen Bundler (wie Browserify oder Webpack) verwenden, verwenden Sie diese Option, um einzelne Module bei Bedarf zu importieren.

Nachdem Sie das Performance Monitoring SDK hinzugefügt haben, beginnt Firebase automatisch mit der Erfassung von Daten für das Laden der Seite Ihrer App und HTTP/S-Netzwerkanforderungen .

Aus dem CDN

Sie können den teilweisen Import des Firebase JavaScript SDK konfigurieren und nur die Firebase-Bibliotheken laden, die Sie benötigen. Firebase speichert jede Bibliothek des Firebase JavaScript SDK in unserem globalen CDN (Content Delivery Network).

Um das Performance Monitoring SDK aus dem CDN einzuschließen, haben Sie zwei Möglichkeiten:

  • Standalone-SDK – Performance Monitoring ist das einzige Firebase-Produkt, das Sie in Ihrer App verwenden.
  • Standard-SDK – Sie verwenden die Leistungsüberwachung zusammen mit anderen Firebase-Produkten in Ihrer App.

eigenständiges SDK

Wenn die Leistungsüberwachung das einzige Firebase-Produkt in Ihrer App ist, verwenden Sie das eigenständige Leistungsüberwachungs-SDK (und das empfohlene Header-Skript unten), wenn Sie daran interessiert sind:

  • Reduzieren der SDK-Paketgröße
  • Verzögern der Initialisierung des SDK bis nach dem Laden Ihrer Seite

So fügen Sie das eigenständige Performance Monitoring SDK in Ihre App ein und verzögern die Initialisierung nach dem Laden Ihrer Seite:

  1. Fügen Sie dem Header Ihrer Indexdatei das folgende Skript hinzu.
  2. Stellen Sie sicher, dass Sie das Firebase-Projektkonfigurationsobjekt Ihrer App hinzufügen .
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

wo,

  • performance_standalone ist 'https://www.gstatic.com/firebasejs/8.6.7/firebase-performance-standalone.js'
  • firebaseConfig ist das Firebase-Konfigurationsobjekt Ihrer App

Das obige Skript lädt das eigenständige SDK asynchron und initialisiert dann Firebase, nachdem das onload Ereignis des Fensters onload . Diese Taktik reduziert die Auswirkungen, die das SDK auf die Seitenlademesswerte haben könnte, da der Browser seine Lademesswerte bereits gemeldet hat, wenn Sie das SDK initialisieren.

Standard-SDK

Wenn Sie andere Firebase-Produkte (wie Authentication oder Cloud Firestore in Ihrer App) verwenden, fügen Sie das standardmäßige Performance Monitoring SDK hinzu.

Beachten Sie, dass dieses SDK erfordert, dass Sie das separate Standard-Core-SDK von Firebase einschließen und Firebase und die Leistungsüberwachung in einem separaten Skript initialisieren.

  1. Um das standardmäßige Performance Monitoring SDK einzuschließen, fügen Sie die folgenden Skripts am Ende Ihres <body> -Tags hinzu, jedoch bevor Sie Firebase-Dienste verwenden:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-performance.js"></script>
    <body>
    
  2. Initialisieren Sie Firebase und Performance Monitoring in Ihrer App:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

Von Hosting-URLs

Wenn Sie Firebase Hosting verwenden, können Sie Ihre App so konfigurieren, dass die Firebase JavaScript SDK-Bibliotheken dynamisch von reservierten URLs geladen werden. Erfahren Sie mehr über das Hinzufügen von SDKs über reservierte Hosting-URLs .

Bei dieser Einrichtungsoption ruft Ihre App nach der Bereitstellung in Firebase automatisch das Firebase-Konfigurationsobjekt aus dem Firebase-Projekt ab, in dem Sie bereitgestellt haben. Sie können dieselbe Codebase in mehreren Firebase-Projekten bereitstellen, müssen jedoch die Firebase-Konfiguration, die Sie für firebase.initializeApp() verwenden, nicht firebase.initializeApp() .

  1. Um das Performance Monitoring SDK einzuschließen, fügen Sie die folgenden Skripts am Ende Ihres <body> -Tags hinzu, jedoch bevor Sie Firebase-Dienste verwenden:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.6.7/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.6.7/firebase-performance.js"></script>
    </body>
    
  2. Initialisieren Sie Firebase und Leistungsüberwachung in Ihrer App (Sie müssen Ihr Firebase-Konfigurationsobjekt nicht einschließen, wenn Sie reservierte Hosting-URLs verwenden):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

Modulbundler verwenden

Sie können den teilweisen Import des Firebase JavaScript SDK konfigurieren und nur die Firebase-Produkte laden, die Sie benötigen. Wenn Sie einen Bundler (wie Browserify oder Webpack) verwenden, können Sie bei Bedarf einzelne Firebase-Produkte import .

  1. Installieren Sie das firebase npm-Paket und speichern Sie es in Ihrer package.json Datei, indem Sie package.json :

    npm install --save firebase
  2. Um das Performance Monitoring SDK einzuschließen, import die Firebase-Module:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Initialisieren Sie Firebase und Performance Monitoring in Ihrer App:

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Initialize Performance Monitoring and get a reference to the service
    const perf = firebase.performance();
    

Schritt 2 : Fügen Sie die erste Polyfill-Bibliothek mit Eingangsverzögerung hinzu

Um die erste Metrik für die Eingabeverzögerung zu messen, müssen Sie die Polyfill-Bibliothek für diese Metrik hinzufügen. Installationsanweisungen finden Sie in der Dokumentation der Bibliothek .

Das Hinzufügen dieser Polyfill-Bibliothek ist nicht erforderlich, damit die Leistungsüberwachung die anderen Web-App-Messwerte melden kann.

Schritt 3 : Generieren von Leistungsereignissen für die anfängliche Datenanzeige

Firebase beginnt mit der Verarbeitung der Ereignisse, wenn Sie das SDK erfolgreich zu Ihrer App hinzugefügt haben. Wenn Sie noch lokal entwickeln, interagieren Sie mit Ihrer App, um Ereignisse für die anfängliche Datenerfassung und -verarbeitung zu generieren.

  1. Bereitstellen und Anzeigen Ihrer Web-App in einer lokalen Umgebung.

  2. Generieren Sie Ereignisse, indem Sie Unterseiten für Ihre Website laden, mit Ihrer App interagieren und/oder Netzwerkanfragen auslösen. Stellen Sie sicher, dass der Browser-Tab nach dem Laden der Seite mindestens 10 Sekunden lang geöffnet ist.

  3. Rufen Sie das Leistungs- Dashboard der Firebase-Konsole auf. Sie sollten innerhalb weniger Minuten Ihre erste Datenanzeige sehen.

    Wenn Ihre Anfangsdaten nicht angezeigt werden, lesen Sie die Tipps zur Fehlerbehebung .

Schritt 4 : (Optional) Protokollnachrichten für Leistungsereignisse anzeigen

  1. Öffnen Sie die Entwicklertools Ihres Browsers (z. B. die Registerkarte Netzwerk für Chrome Dev Tools oder im Netzwerkmonitor für Firefox ).

  2. Aktualisieren Sie Ihre Web-App im Browser.

  3. Überprüfen Sie Ihre Protokollnachrichten auf Fehlermeldungen.

  4. firebaselogging.googleapis.com Sie nach einigen Sekunden in den Entwicklertools Ihres Browsers nach einem Netzwerkaufruf an firebaselogging.googleapis.com . Das Vorhandensein dieses Netzwerkaufrufs zeigt an, dass der Browser Leistungsdaten an Firebase sendet.

Wenn Ihre App keine Leistungsereignisse protokolliert, lesen Sie die Tipps zur Fehlerbehebung .

Schritt 5 : (Optional) Benutzerdefinierte Überwachung für bestimmten Code hinzufügen for

Um Leistungsdaten zu überwachen, die mit einem bestimmten Code in Ihrer App verknüpft sind, können Sie benutzerdefinierte Code-Traces instrumentieren.

Mit einer benutzerdefinierten Codeablaufverfolgung können Sie messen, wie lange Ihre App benötigt, um eine bestimmte Aufgabe oder einen Satz von Aufgaben abzuschließen, z. B. das Laden einer Reihe von Bildern oder das Abfragen Ihrer Datenbank. Die Standardmetrik für einen benutzerdefinierten Codetrace ist die Dauer, aber Sie können auch benutzerdefinierte Metriken wie Cache-Treffer und Speicherwarnungen hinzufügen.

In Ihrem Code definieren Sie den Anfang und das Ende eines benutzerdefinierten Code-Trace (und fügen beliebige benutzerdefinierte Metriken hinzu), indem Sie die vom Performance Monitoring SDK bereitgestellte API verwenden.

Besuchen Sie Überwachung für spezifischen Code hinzufügen, um mehr über diese Funktionen zu erfahren und wie Sie sie zu Ihrer App hinzufügen.

Schritt 6 : Stellen Sie Ihre App bereit und überprüfen Sie die Ergebnisse.

Nachdem Sie die Leistungsüberwachung validiert haben, können Sie die aktualisierte Version Ihrer App für Ihre Benutzer bereitstellen.

Sie können Leistungsdaten im Leistungs- Dashboard der Firebase-Konsole überwachen.

Nächste Schritte