Google is committed to advancing racial equity for Black communities. See how.
Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

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 scoprire come:

  • 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 bundle di moduli : se si utilizza un bundler (come Browserify o webpack), utilizzare questa opzione per importare i singoli moduli quando necessario.

Dopo aver aggiunto l'SDK di monitoraggio delle prestazioni, Firebase avvia automaticamente la raccolta dei 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 ciascuna libreria dell'SDK JavaScript Firebase sulla nostra CDN (rete di distribuzione dei contenuti) globale.

Per includere l'SDK di monitoraggio delle prestazioni dalla rete 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:

  1. Aggiungi il seguente script all'intestazione del tuo file di indice.
  2. 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/7.21.0/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.

  1. 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/7.21.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-performance.js"></script>
    <body>
    
  2. 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>
    

Da Hosting URL

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() .

  1. 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/7.21.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/7.21.0/firebase-performance.js"></script>
    </body>
    
  2. 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.

  1. Installa il pacchetto firebase npm e salvalo nel tuo file package.json eseguendo:

    npm install --save firebase
  2. Per includere l'SDK di monitoraggio delle prestazioni, import i moduli Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. 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 prestazioni per la visualizzazione iniziale dei dati

Firebase è in grado di rilevare che hai aggiunto correttamente l'SDK alla tua app quando riceve 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.

  1. Offri e visualizza la tua app web in un ambiente locale.

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

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

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

  1. Apri gli strumenti per sviluppatori del browser (ad esempio, la scheda Rete per Chrome Dev Tools o in 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 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