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