Inizia a utilizzare il monitoraggio del rendimento per il web

Prima di iniziare

Se non l'hai ancora fatto, consulta 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 completare alcuni dei passaggi descritti più avanti in questa pagina (ad esempio, l'aggiunta dell'SDK e l'inizializzazione di Firebase).

Passaggio 1: aggiungi e inizializza Performance Monitoring

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

  2. Aggiungi l'SDK JS Performance Monitoring 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();

L'SDK Performance Monitoring registra automaticamente i Core Web Vitals.

Passaggio 2: genera eventi relativi alle prestazioni per la visualizzazione iniziale dei dati

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

  1. Pubblica 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 dashboard Prestazioni della console Firebase. Dovresti visualizzare i dati iniziali entro pochi minuti.

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

Passaggio 3: (facoltativo) visualizza i messaggi di log per gli eventi relativi alle prestazioni

  1. Apri gli strumenti per sviluppatori del browser (ad esempio, la scheda Rete per Chrome DevTools o 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 dati sul rendimento a Firebase.

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

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

Per monitorare i dati sul rendimento associati a un codice specifico nella tua app, puoi strumentare le tracce codice personalizzato.

Con una traccia del codice personalizzato, puoi misurare il tempo necessario alla 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 del codice personalizzato è la sua durata, ma puoi anche aggiungere metriche personalizzate, come successi della cache e avvisi di memoria.

Nel codice, definisci l'inizio e la fine di una traccia del codice personalizzato (e aggiungi le metriche personalizzate che preferisci) utilizzando l'API fornita dall'SDK Performance Monitoring.

Consulta Aggiungi il monitoraggio per un codice specifico per scoprire di più su queste funzionalità e su come aggiungerle alla tua app.

Passaggio 5: esegui il deployment dell'app e poi esamina i risultati

Dopo aver convalidato Performance Monitoring, puoi eseguire il deployment della versione aggiornata della tua app per gli utenti.

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

Passaggi successivi