Inizia a utilizzare il monitoraggio del rendimento per il web

Prima di iniziare

Se non l'hai ancora fatto, visita la pagina Aggiungere Firebase al progetto JavaScript per scoprire come:

  • Creare un progetto Firebase

  • Registrare l'app web con Firebase

Tieni presente che quando aggiungi Firebase alla tua app, potresti completare alcuni dei passaggi descritti più avanti in questa pagina (ad esempio, aggiungere l'SDK e inizializzare Firebase).

Passaggio 1: aggiungi e inizializza Performance Monitoring

  1. Se non l'hai ancora fatto, installa l'SDK Firebase JS e inizializza Firebase.

  2. Aggiungi l'SDK Performance Monitoring JS e inizializza Performance Monitoring:

Web 

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
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 libreria polyfill per il primo ritardo di input

Per misurare la metrica del primo ritardo di input, devi aggiungere la libreria polyfill per questa metrica. Per le istruzioni di installazione, consulta la documentazione della libreria's .

L'aggiunta di questa libreria polyfill non è obbligatoria per Performance Monitoring per segnalare le altre metriche delle app web.

Passaggio 3: genera eventi di prestazioni 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 l'app per generare eventi per la raccolta e l'elaborazione dei dati iniziali.

  1. Pubblica e visualizza l'app web in un ambiente locale.

  2. Genera eventi caricando le sottopagine del tuo sito, interagendo con l'app e/o attivando le richieste di rete. Assicurati di lasciare aperta la scheda del browser per almeno 10 secondi dopo il caricamento della pagina.

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

    Se non vedi la visualizzazione dei dati iniziali, consulta i suggerimenti per la risoluzione dei problemi.

Passaggio 4: (facoltativo) visualizza i messaggi di log per gli eventi di prestazioni

  1. Apri gli strumenti per sviluppatori del browser (ad esempio, la scheda Rete per Chrome DevTools o in il Monitor di rete per Firefox).

  2. Aggiorna l'app web nel browser.

  3. Controlla i messaggi di log per verificare la presenza di eventuali messaggi di errore.

  4. Dopo alcuni secondi, cerca una chiamata di rete a firebaselogging.googleapis.com negli strumenti per sviluppatori del browser. La presenza di questa chiamata di rete indica che il browser sta inviando i dati sulle prestazioni a Firebase.

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

Passaggio 5: (facoltativo) aggiungi il monitoraggio personalizzato per codice specifico

Per monitorare i dati sul rendimento associati a un codice specifico nella tua app, puoi instrumentare tracce di codice personalizzate.

Con una traccia di codice personalizzata, puoi misurare il tempo impiegato dalla tua app per completare un'attività o un insieme di attività specifiche, ad esempio il caricamento di un insieme 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, definisci l'inizio e la fine di una traccia di codice personalizzata (e aggiungi le metriche personalizzate che preferisci) utilizzando l'API fornita dall'Performance Monitoring SDK.

Visita la pagina Aggiungere il monitoraggio per codice specifico per scoprire di più su queste funzionalità e su come aggiungerle alla tua app.

Passaggio 6: implementa l'app e poi esamina i risultati

Dopo aver convalidato Performance Monitoring, puoi implementare la versione aggiornata della tua app per i tuoi utenti.

Puoi monitorare i dati sul rendimento nella dashboard Prestazioni della Firebase console.

Passaggi successivi