Inizia con il monitoraggio delle prestazioni per il Web

Prima di iniziare

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

Crea un progetto Firebase
Registra la tua app web con Firebase
Per utilizzare il monitoraggio delle prestazioni in un'app web, devi aggiungere la tua app come app web Firebase nella console Firebase.
Se utilizzi già i prodotti Firebase nella tua app web esistente e desideri iniziare a utilizzare Performance Monitoring SDK, devi aggiornare il tuo oggetto di configurazione Firebase per includere il tuo appID .

Tieni presente che quando aggiungi Firebase alla tua app, potresti anche completare alcuni dei passaggi descritti in questa pagina (ad esempio, l' aggiunta di SDK Firebase e l'inizializzazione di Firebase ).

Passaggio 1 : aggiungi il monitoraggio delle prestazioni e inizializza 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):

Dalla CDN (SDK autonomo) : se Performance Monitoring è l'unico prodotto Firebase nella tua app, questa opzione carica un singolo SDK più leggero dalla CDN.
Dalla CDN (SDK standard) : se utilizzi altri prodotti Firebase nella tua app, questa opzione carica l'SDK di monitoraggio delle prestazioni insieme ad altre librerie Firebase dalla CDN.
Dagli URL di hosting : se utilizzi Firebase Hosting, questa opzione offre una comodità per la gestione della configurazione di Firebase durante l'inizializzazione di Firebase.
Utilizzo di bundler di moduli : se si utilizza un bundler (come Browserify o webpack), utilizzare questa opzione per importare i singoli moduli quando ne hai bisogno.

Dopo aver aggiunto l'SDK di monitoraggio delle prestazioni, Firebase inizia automaticamente a raccogliere i dati per il caricamento della pagina dell'app e le richieste di rete HTTP / S.

Dal CDN

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

Per includere Performance Monitoring SDK dalla CDN, hai due opzioni:

SDK autonomo : il monitoraggio delle prestazioni è l'unico prodotto Firebase che utilizzi nella tua app.
SDK standard : stai utilizzando il monitoraggio delle prestazioni insieme ad altri prodotti Firebase nella tua app.

SDK autonomo

Se Performance Monitoring è l'unico prodotto Firebase nella tua app, utilizza l'SDK standalone Performance Monitoring (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:

Aggiungi il seguente script all'intestazione del tuo file di indice.
Assicurati di aggiungere l' oggetto di configurazione del progetto Firebase della tua app.

(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.2.10/firebase-performance-standalone.js'
firebaseConfig è l' oggetto di configurazione Firebase della tua app

Lo script precedente carica in modo asincrono l'SDK autonomo, quindi inizializza Firebase dopo l' onload dell'evento onload della finestra. Questa tattica riduce l'impatto che l'SDK potrebbe avere sulle metriche di caricamento della pagina poiché il browser ha già segnalato le sue metriche di caricamento quando si inizializza l'SDK.

Informazioni sull'SDK per il monitoraggio delle prestazioni autonomo e sullo script dell'intestazione

Questo SDK autonomo è ottimizzato per le dimensioni; Gzipped, è di circa 10kb. Ha tutte le funzionalità di Firebase Performance Monitoring insieme a un set minimo di funzionalità SDK di base di Firebase.

Firebase Performance Monitoring utilizza le API fetch e Promise che non sono disponibili sui browser meno recenti. I polyfill per queste API sono inclusi nell'SDK JS Firebase Performance Monitoring standard, ma vengono omessi dall'SDK autonomo per ridurne le dimensioni.

L'SDK di monitoraggio delle prestazioni si basa, in parte, sull'API di sincronizzazione delle risorse per ottenere le metriche di caricamento della pagina dal browser.

Il frammento di codice seguente scompone lo script dell'intestazione che include quindi ritardi nell'inizializzazione dell'SDK:

(function(sdkSource, firebaseConfigObject) {
   function load(f, c) {
       // Creates a script tag to load the standalone SDK
       var sdkScript = document.createElement('script');

       // Sets it to an async script so that it doesn't interfere with page load
       sdkScript.async = 1;

       // Sets the source of the script
       sdkScript.src = f;

       // Inserts the script into the head of the page
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(sdkScript, s);
   }

   // Calls the load method
   load(sdkSource);

   // Initializes the SDK only when the onload method is called
   window.addEventListener('load', function() {
       firebase.initializeApp(firebaseConfigObject).performance();
   });
})(performance_standalone, firebaseConfig);

dove,

performance_standalone è 'https://www.gstatic.com/firebasejs/8.2.10/firebase-performance-standalone.js'
firebaseConfig è l' oggetto di configurazione Firebase della tua app

SDK standard

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

Tieni presente che questo SDK richiede l'inclusione dell'SDK core Firebase standard separato e l'inizializzazione di Firebase e Performance Monitoring in uno script separato.

Per includere l'SDK di monitoraggio delle prestazioni standard, aggiungi i seguenti script in fondo al tag <body> , 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.2.10/firebase-app.js"></script>

  <!-- Add the standard Performance Monitoring library -->
  <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-performance.js"></script>
<body>

Inizializza Firebase e 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>

Dagli URL di hosting

Quando utilizzi Firebase Hosting, puoi configurare la tua app per caricare dinamicamente le librerie Firebase JavaScript SDK da URL riservati. Ulteriori informazioni sull'aggiunta di SDK tramite URL di hosting riservati .

Con questa opzione di configurazione, dopo la distribuzione su Firebase , la tua app estrae automaticamente l'oggetto di configurazione Firebase dal progetto Firebase in cui hai distribuito. Puoi distribuire la stessa base di codice a più progetti Firebase, ma non devi tenere traccia della configurazione Firebase che stai utilizzando per firebase.initializeApp() .

Per includere l'SDK di monitoraggio delle prestazioni, aggiungi i seguenti script in fondo al tag <body> , 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.2.10/firebase-app.js"></script>

  <!-- Add the Performance Monitoring library -->
  <script src="/__/firebase/8.2.10/firebase-performance.js"></script>
</body>

Inizializza Firebase e Monitoraggio delle prestazioni nella tua app (non è necessario includere l'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>

Testare a livello locale l'integrazione del monitoraggio delle prestazioni quando si utilizzano URL di hosting riservati

Per testare localmente la tua integrazione del monitoraggio delle prestazioni, firebase serve attualmente non supporta l'inizializzazione di Firebase per il monitoraggio delle prestazioni tramite l'URL /__/firebase/init.js . Invece, includi il tuo oggetto di configurazione Firebase e inizializza Firebase in questo modo:

  <body>
    <!-- Previously loaded Firebase SDKs (via Hosting URLs) -->

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

Utilizzo del bundler di moduli

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

Installa il pacchetto firebase npm e salvalo nel tuo file package.json eseguendo:
```
npm install --save firebase
```

Per includere Performance Monitoring 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";

Inizializza Firebase e 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();

Passaggio 2 : aggiungi la prima libreria polyfill con ritardo di input

Per misurare la prima metrica del ritardo di input , è 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.

Passaggio 3 : generazione di eventi di performance per la visualizzazione iniziale dei dati

Firebase è in grado di rilevare che hai aggiunto correttamente l'SDK alla tua app quando riceve le informazioni sull'evento (come le interazioni dell'app) dalla tua app. Se stai ancora sviluppando localmente, interagisci con la tua app per generare eventi per il rilevamento dell'SDK e per la raccolta e l'elaborazione dei dati iniziali.

Offri e visualizza la tua app web in un ambiente locale.
Genera eventi caricando sottopagine per il tuo sito, interagendo con la tua app e / o attivando richieste di rete. Assicurati di mantenere la scheda del browser aperta per almeno 10 secondi dopo il caricamento della pagina.
Vai alla dashboard delle prestazioni della console Firebase per vedere se Firebase ha rilevato l'SDK.
Se non vedi il messaggio "SDK rilevato", consulta i suggerimenti per la risoluzione dei problemi .
Il monitoraggio delle prestazioni elabora i dati sugli eventi delle prestazioni prima di visualizzarli nel dashboard delle prestazioni . Dovresti vedere la visualizzazione dei dati iniziali entro 24 ore dalla visualizzazione del messaggio di rilevamento dell'SDK.
Se non vedi una visualizzazione dei tuoi dati iniziali, consulta i suggerimenti per la risoluzione dei problemi .

Passaggio 4 : (facoltativo) visualizzare i messaggi di registro per gli eventi relativi alle prestazioni

Apri gli strumenti per sviluppatori del tuo browser (ad esempio, la scheda Rete per Chrome Dev Tools o in Network Monitor per Firefox ).
Aggiorna la tua app web nel browser.
Controlla i tuoi messaggi di registro per eventuali messaggi di errore.
Dopo alcuni secondi, cerca una chiamata di rete a firebaselogging.googleapis.com negli strumenti per sviluppatori del tuo browser. La presenza di quella chiamata di rete mostra che il browser sta inviando i dati sulle prestazioni a Firebase.

Se la tua app non registra gli eventi relativi alle prestazioni, consulta i suggerimenti per la risoluzione dei problemi .

Passaggio 5 : (facoltativo) aggiungere un monitoraggio personalizzato per codice specifico

Per monitorare i dati sulle prestazioni associati a codice specifico nella tua app, puoi strumentare tracce di codice personalizzate .

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 hit della cache e avvisi di memoria.

Nel codice si definiscono l'inizio e la fine di una traccia di codice personalizzata (e si aggiungono le metriche personalizzate desiderate) utilizzando l'API fornita dall'SDK di monitoraggio delle prestazioni.

Visita Aggiungi monitoraggio per codice specifico per saperne di più su queste funzionalità e su come aggiungerle alla tua app.

Passaggio 6 : distribuisci la tua app, quindi esamina i risultati

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

Puoi monitorare i dati sulle prestazioni nella dashboard delle prestazioni della console Firebase.

Prossimi passi

Ottieni esperienza pratica con Firebase Performance Monitoring for Web Codelab .
Ulteriori informazioni sui dati raccolti automaticamente da Performance Monitoring:
- Dati per il caricamento della pagina nella tua app
- Dati per le richieste di rete HTTP / S emesse dalla tua app
Visualizza, monitora e filtra i dati sulle prestazioni nella console Firebase
Aggiungi il monitoraggio per attività o flussi di lavoro specifici nella tua app strumentando tracce di codice personalizzate
Utilizza gli attributi per filtrare i dati sulle prestazioni