Il monitoraggio delle prestazioni usa le tracce per raccogliere dati sui processi monitorati nella tua app. Una traccia è un report che contiene i dati acquisiti tra due punti nel tempo nella tua app.
Per le app Web, il monitoraggio delle prestazioni raccoglie automaticamente una traccia per ogni pagina della tua app chiamata traccia del caricamento della pagina . Ogni traccia del caricamento della pagina raccoglie le seguenti metriche predefinite:
first paint : una metrica che misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e il momento in cui si verificano cambiamenti visivi
first contentful paint : una metrica che misura il tempo che intercorre tra il momento in cui un utente accede a una pagina e il momento in cui viene visualizzato un contenuto significativo, come un'immagine o un testo
domInteractive : una metrica che misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e il momento in cui la pagina è considerata interattiva per l'utente
domContentLoadedEventEnd : una metrica che misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e il momento in cui il documento HTML iniziale viene completamente caricato e analizzato
loadEventEnd : una metrica che misura il tempo che intercorre tra il momento in cui l'utente accede alla pagina e il completamento dell'evento di caricamento del documento corrente
first input delay — Una metrica che misura il tempo che intercorre tra il momento in cui l'utente interagisce con una pagina e il momento in cui il browser è in grado di rispondere a tale input
Puoi visualizzare i dati di queste tracce nella sottoscheda Caricamento pagina della tabella delle tracce, che si trova nella parte inferiore del dashboard Prestazioni (ulteriori informazioni sull'utilizzo della console più avanti in questa pagina).
Definizione di una traccia di caricamento della pagina
Questa traccia misura diverse metriche su come vengono caricate le pagine nella tua app, in particolare il tempo necessario per raggiungere punti di caricamento comuni, come un'app reattiva.
Le tracce di caricamento della pagina ti aiutano a tenere traccia dei principali web vitals della tua app , come il primo disegno contenuto.
Metriche raccolte per le tracce di caricamento della pagina
Queste tracce sono tracce predefinite, pertanto non è possibile aggiungere metriche personalizzate o attributi personalizzati.
Prima vernice
Questa metrica misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e il momento in cui si verifica un cambiamento visivo.
Questa metrica è utile poiché il primo disegno segnala agli utenti che la pagina sta iniziando a caricarsi.
Si avvia quando l'utente accede a una pagina.
Si interrompe quando si verifica qualsiasi modifica visiva, inclusa una modifica del colore di sfondo o un caricamento dell'intestazione.
Prima vernice contenta
Questa metrica misura il tempo che intercorre tra il momento in cui un utente accede a una pagina e il momento in cui vengono visualizzati contenuti significativi, come un'immagine o un testo.
Questa metrica è utile per ottenere informazioni dettagliate sulla velocità con cui i tuoi utenti visualizzano i contenuti effettivi della tua app anziché solo un nuovo colore di sfondo o un'intestazione.
Si avvia quando l'utente accede a una pagina.
Si interrompe immediatamente dopo che il browser esegue il rendering del primo contenuto dal DOM, incluso qualsiasi testo, immagine (incluse le immagini di sfondo), tela non bianca o SVG.
domInterattivo
Questa metrica misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e il momento in cui la pagina è considerata interattiva per l'utente.
Questa metrica è utile per capire quanto tempo i tuoi utenti possono effettivamente interagire con gli elementi della tua app, come pulsanti e collegamenti ipertestuali, invece di vederli solo sullo schermo. Tieni presente che ciò non significa che il browser risponderà all'interazione (per questa metrica, fai riferimento a first input delay trace ).
Si avvia quando l'utente accede a una pagina.
Si interrompe immediatamente prima che l'agente utente imposti la prontezza del documento HTML corrente su "interattivo".
domContentLoadedEventEnd
Questa metrica misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e il momento in cui il documento HTML iniziale viene completamente caricato e analizzato.
Si avvia quando l'utente accede a una pagina.
Si interrompe immediatamente dopo che il documento HTML iniziale è stato completamente caricato e analizzato (
DOMContentLoaded), ma ciò non significa che i fogli di stile, le immagini e i sottoframe abbiano terminato il caricamento.
loadEventEnd
Questa metrica misura il tempo che intercorre tra il momento in cui l'utente accede alla pagina e il completamento dell'evento di caricamento del documento corrente.
Questa metrica è utile per capire quanto tempo ci vuole per caricare tutti i tuoi contenuti, inclusi fogli di stile e immagini.
Si avvia quando l'utente accede a una pagina.
Si interrompe immediatamente dopo il completamento dell'evento di caricamento del documento HTML corrente.
Primo ritardo di ingresso
Questa metrica misura il tempo che intercorre tra il momento in cui l'utente interagisce con una pagina e il momento in cui il browser è in grado di rispondere a tale input.
Questa metrica è utile poiché il browser che risponde a un'interazione dell'utente fornisce agli utenti le prime impressioni sulla reattività della tua app.
Si avvia quando l'utente interagisce per la prima volta con un elemento della pagina, ad esempio facendo clic su un pulsante o su un collegamento ipertestuale.
Si interrompe immediatamente dopo che il browser è in grado di rispondere all'input, il che significa che il browser non è impegnato nel caricamento o nell'analisi del contenuto.
Si noti che per misurare la prima metrica di ritardo di input, è necessario aggiungere la libreria polyfill per questa metrica. Per istruzioni sull'installazione, fare riferimento alla documentazione della libreria .
Tieni traccia, visualizza e filtra i dati sulle prestazioni
Per visualizzare i dati sulle prestazioni in tempo reale, assicurati che la tua app utilizzi una versione dell'SDK di monitoraggio delle prestazioni compatibile con l'elaborazione dei dati in tempo reale. Ulteriori informazioni sui dati sulle prestazioni in tempo reale .
Tieni traccia delle metriche chiave nella tua dashboard
Per conoscere l'andamento delle tue metriche chiave, aggiungile alla scheda delle metriche nella parte superiore della dashboard Performance . Puoi identificare rapidamente le regressioni visualizzando le modifiche settimanali o verificare che le modifiche recenti nel tuo codice stiano migliorando le prestazioni.
Per aggiungere una metrica alla scheda delle metriche, procedi nel seguente modo:
- Vai alla dashboard delle prestazioni nella console Firebase.
- Fai clic su una scheda metrica vuota, quindi seleziona una metrica esistente da aggiungere alla scheda.
- Fai clic su su una scheda metrica popolata per ulteriori opzioni, ad esempio per sostituire o rimuovere una metrica.
La scheda delle metriche mostra i dati metrici raccolti nel tempo, sia in forma grafica che come variazione percentuale numerica.
Ulteriori informazioni sull'utilizzo della dashboard .
Visualizza le tracce e i relativi dati
Per visualizzare le tue tracce, vai alla dashboard delle prestazioni nella console Firebase, scorri verso il basso fino alla tabella delle tracce, quindi fai clic sulla sottoscheda appropriata. La tabella mostra alcune metriche principali per ogni traccia e puoi persino ordinare l'elenco in base alla variazione percentuale per una metrica specifica.
Il monitoraggio delle prestazioni fornisce una pagina di risoluzione dei problemi nella console di Firebase che evidenzia le modifiche alle metriche, semplificando la gestione rapida e riducendo al minimo l'impatto dei problemi di prestazioni su app e utenti. Puoi utilizzare la pagina di risoluzione dei problemi quando vieni a conoscenza di potenziali problemi di prestazioni, ad esempio nei seguenti scenari:
- Selezioni le metriche pertinenti sulla dashboard e noti un grande delta.
- Nella tabella delle tracce si ordina per visualizzare i delta maggiori in alto e si vede una variazione percentuale significativa.
- Ricevi un avviso e-mail che ti informa di un problema di prestazioni.
È possibile accedere alla pagina di risoluzione dei problemi nei seguenti modi:
- Nella dashboard delle metriche, fai clic sul pulsante Visualizza dettagli metrica .
- Su qualsiasi scheda metrica, seleziona => Visualizza dettagli . La pagina di risoluzione dei problemi mostra informazioni sulla metrica selezionata.
- Nella tabella delle tracce, fare clic su un nome di traccia o su qualsiasi valore di metrica nella riga associata a tale traccia.
- In un avviso email, fai clic su Esamina ora .
Quando si fa clic sul nome di una traccia nella tabella delle tracce, è quindi possibile visualizzare in dettaglio le metriche di interesse. Fare clic sul pulsante filtro per filtrare i dati per attributo, ad esempio:
- Filtra per URL pagina per visualizzare i dati per una pagina specifica del tuo sito
- Filtra per Tipo di connessione efficace per scoprire in che modo una connessione 3G influisce sulla tua app
- Filtra per Paese per assicurarti che la posizione del tuo database non riguardi una regione specifica
Ulteriori informazioni sulla visualizzazione dei dati per le tue tracce .
Prossimi passi
Ulteriori informazioni sull'utilizzo degli attributi per esaminare i dati sulle prestazioni.
Ulteriori informazioni su come tenere traccia dei problemi di prestazioni nella console Firebase.
Imposta avvisi per i caricamenti di pagina che riducono le prestazioni della tua app. Ad esempio, puoi configurare un avviso e-mail per il tuo team se il primo ritardo di input per una pagina specifica supera una soglia impostata.