Inizia con il monitoraggio delle prestazioni per il web

Prima di iniziare

Se non l'hai già, visitare Aggiungi Firebase al progetto JavaScript per imparare a:

  • Crea un progetto Firebase

  • Registra la tua app web con Firebase

Si noti che quando si aggiunge Firebase per la vostra applicazione, si potrebbe anche completare alcuni dei passi descritti in questa pagina (ad esempio, l'aggiunta di Firebase SDK e l'inizializzazione Firebase ).

Fase 1: Add monitoraggio delle prestazioni e inizializzare Firebase

Se non l'hai già fatto, aggiungi l'SDK di monitoraggio delle prestazioni e inizializza Firebase nella tua app utilizzando una delle opzioni seguenti. Considera quanto segue per aiutarti a scegliere tra le tue opzioni (vedi le singole schede per informazioni più dettagliate):

  • Dal CDN (standalone SDK) - Se monitoraggio delle prestazioni è il prodotto unico Firebase nella vostra app, questo viene caricato un singolo, più leggero SDK dalla CDN.

  • Dal CDN (SDK standard) - Se si utilizzano altri prodotti Firebase nella vostra app, questa opzione carica il Monitoraggio del rendimento SDK insieme ad altre biblioteche Firebase dalla CDN.

  • Da Hosting URL - Se stai usando Firebase Hosting, Questa opzione offre una comodità per la gestione della configurazione Firebase durante l'inizializzazione Firebase.

  • Utilizzando fardellatrici modulo - Se si utilizza un bundler (come Browserify o webpack), utilizzare questa opzione per importare singoli moduli quando ne avete bisogno.

Dopo aver aggiunto il Monitoraggio del rendimento SDK, Firebase avvia automaticamente raccolta dei dati per la vostra applicazione di caricamento della pagina e HTTP / S richieste di rete .

Dal CDN

Puoi configurare l'importazione parziale dell'SDK JavaScript di Firebase e caricare solo le librerie Firebase di cui hai bisogno. Firebase archivia ogni libreria dell'SDK JavaScript Firebase sul nostro CDN globale (rete di distribuzione dei contenuti).

Per includere l'SDK di monitoraggio delle prestazioni dalla rete CDN, hai due opzioni:

  • standalone SDK - monitoraggio delle prestazioni è il prodotto unico Firebase che usate nella vostra applicazione.
  • Standard SDK - Si sta usando Monitoraggio del rendimento insieme ad altri prodotti Firebase nella vostra app.

SDK autonomo

Se Performance Monitoring è l'unico prodotto Firebase nella tua app, utilizza l'SDK Performance Monitoring autonomo (e lo script di intestazione consigliato di seguito) se sei interessato a:

  • riducendo le dimensioni del pacchetto SDK
  • ritardare l'inizializzazione dell'SDK fino al caricamento della pagina

Per includere l'SDK di monitoraggio delle prestazioni autonomo nella tua app e ritardarne l'inizializzazione dopo il caricamento della pagina:

  1. Aggiungi il seguente script all'intestazione del tuo file di indice.
  2. Assicurarsi di aggiungere la vostra applicazione oggetto di configurazione del progetto Firebase .
(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);

dove,

  • performance_standalone è 'https://www.gstatic.com/firebasejs/8.8.1/firebase-performance-standalone.js'
  • firebaseConfig è la vostra applicazione oggetto config Firebase

Lo script precedente carica in modo asincrono l'SDK standalone poi inizializza Firebase dopo della finestra onload generato l'evento. Questa tattica riduce l'impatto che l'SDK potrebbe avere sulle metriche di caricamento delle pagine dal momento che il browser ha già segnalato le sue metriche di carico quando si inizializza l'SDK.

SDK standard

Se stai utilizzando altri prodotti Firebase (come Authentication o Cloud Firestore nella tua app, includi l'SDK di monitoraggio delle prestazioni standard.

Tieni presente che questo SDK richiede di includere l'SDK di base Firebase standard separato e di inizializzare Firebase e Performance Monitoring in uno script separato.

  1. Per includere il rendimento standard di monitoraggio SDK, aggiungere i seguenti script per la parte inferiore del <body> tag, ma prima di utilizzare qualsiasi servizio Firebase:

    <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.8.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-performance.js"></script>
    <body>
    
  2. Inizializza Firebase e il monitoraggio delle prestazioni nella tua 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>
    

Da URL di hosting

Quando utilizzi Firebase Hosting, puoi configurare la tua app per caricare dinamicamente le librerie di Firebase JavaScript SDK dagli URL riservati. Scopri di più su l'aggiunta di SDK tramite URL Hosting riservati .

Con questa opzione di impostazione, dopo che si distribuisce a Firebase , la vostra applicazione estrae automaticamente l'oggetto di configurazione Firebase dal progetto Firebase a cui è stato distribuito. È possibile distribuire la stessa base di codice per più progetti Firebase, ma non si dispone di monitorare la configurazione Firebase che si sta utilizzando per firebase.initializeApp() .

  1. Per includere il Monitoraggio del rendimento SDK, aggiungere i seguenti script per la parte inferiore del <body> tag, ma prima di utilizzare qualsiasi servizio Firebase:

    <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.8.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.8.1/firebase-performance.js"></script>
    </body>
    
  2. Inizializza Firebase e Performance Monitoring nella tua app (non è necessario includere il tuo oggetto di configurazione Firebase quando utilizzi URL di hosting riservati):

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

Utilizzo del bundler di moduli

Puoi configurare l'importazione parziale dell'SDK JavaScript di Firebase e caricare solo i prodotti Firebase di cui hai bisogno. Se stai usando un bundler (come Browserify o webpack), è possibile import singoli prodotti Firebase quando ne avete bisogno.

  1. Installare il firebase pacchetto di NPM e salvarlo sul package.json file eseguendo:

    npm install --save firebase
  2. Per includere il Monitoraggio del rendimento SDK, import i moduli Firebase:

    // 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. Inizializza Firebase e il monitoraggio delle prestazioni nella tua 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();
    

Fase 2: Aggiungere la libreria ritardo polyfill primo ingresso

Per misurare la prima metrica ritardo di ingresso , è necessario aggiungere la libreria polyfill per questa metrica. Per le istruzioni di installazione, consultare la biblioteca di documentazione .

L'aggiunta di questa libreria polyfill non è necessaria per il monitoraggio delle prestazioni per segnalare le altre metriche dell'app Web.

Fase 3: Generare eventi performativi per la visualizzazione dei dati iniziali

Firebase inizia a elaborare gli eventi quando aggiungi correttamente l'SDK alla tua app. Se stai ancora sviluppando in locale, interagisci con la tua app per generare eventi per la raccolta e l'elaborazione iniziali dei dati.

  1. Servi e visualizza la tua app Web in un ambiente locale.

  2. Genera eventi caricando pagine secondarie per il tuo sito, interagendo con la tua app e/o attivando richieste di rete. Assicurati di tenere aperta la scheda del browser per almeno 10 secondi dopo il caricamento della pagina.

  3. Vai alla performance dashboard della console Firebase. Dovresti vedere la visualizzazione dei dati iniziali entro pochi minuti.

    Se non si vede una visualizzazione dei dati iniziali, rivedere i suggerimenti di risoluzione dei problemi .

Fase 4: (facoltativo) Visualizza i messaggi di log per gli eventi di performance

  1. Aprire gli strumenti di sviluppo del browser (ad esempio, scheda per Chrome Dev Tools Network o nel Network Monitor per Firefox ).

  2. Aggiorna la tua app web nel browser.

  3. Controlla i tuoi messaggi di registro per eventuali messaggi di errore.

  4. Dopo pochi secondi, per cercare una chiamata di rete per firebaselogging.googleapis.com nei tool di sviluppo del browser. La presenza di quella chiamata di rete mostra che il browser sta inviando dati sulle prestazioni a Firebase.

Se l'applicazione non sta registrando eventi di prestazioni, rivedere i suggerimenti di risoluzione dei problemi .

Passo 5: (facoltativo) aggiungere personalizzato monitoraggio di codice specifico

Per monitorare i dati delle prestazioni associati a codice specifico nella vostra applicazione, è possibile strumento tracce di codice personalizzato .

Con una traccia del codice personalizzata, puoi misurare quanto tempo impiega la tua app per completare un'attività specifica o una serie di attività, come il caricamento di una serie di immagini o l'esecuzione di query sul database. La metrica predefinita per una traccia di codice personalizzata è la sua durata, ma puoi anche aggiungere metriche personalizzate, come riscontri nella cache e avvisi di memoria.

Nel codice, definisci l'inizio e la fine di una traccia del codice personalizzato (e aggiungi eventuali metriche personalizzate desiderate) utilizzando l'API fornita dall'SDK di monitoraggio delle prestazioni.

Visita Aggiungi il monitoraggio di codice specifico per saperne di più su queste funzioni e come per aggiungerli alla vostra applicazione.

Passo 6: distribuire l'applicazione poi risultati recensione

Dopo aver convalidato il monitoraggio delle prestazioni, puoi distribuire la versione aggiornata della tua app ai tuoi utenti.

È possibile monitorare i dati sulle prestazioni nella performance dashboard della console Firebase.

Prossimi passi