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 momenti temporali nell'app.
Per le app Web, il monitoraggio delle prestazioni raccoglie automaticamente una traccia per ogni pagina dell'app denominata traccia del caricamento della pagina . Ogni traccia di 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 verifica qualsiasi cambiamento visivo
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 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 viene 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
primo ritardo di input : 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 diversi parametri relativi al modo in cui vengono caricate le pagine della tua app, in particolare il tempo necessario per raggiungere punti di caricamento comuni, come un'app reattiva.
Le tracce del caricamento della pagina ti aiutano a tenere traccia dei principali aspetti web vitali della tua app, come la prima creazione di contenuti.
Metriche raccolte per le tracce di caricamento della pagina
Queste tracce sono tracce pronte all'uso, quindi non è possibile aggiungervi 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 qualsiasi cambiamento visivo.
Questa metrica è utile poiché il primo disegno segnala ai tuoi utenti che la pagina sta iniziando a caricarsi.
Inizia quando l'utente accede a una pagina.
Si arresta quando si verifica qualsiasi modifica visiva, inclusa una modifica del colore dello sfondo o il caricamento di un'intestazione.
Prima vernice piena di contenuti
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 informazioni dettagliate sulla velocità con cui gli utenti vedono i contenuti effettivi della tua app anziché solo un nuovo colore di sfondo o un'intestazione.
Inizia quando l'utente accede a una pagina.
Si interrompe immediatamente dopo che il browser ha eseguito il rendering del primo contenuto dal DOM, incluso qualsiasi testo, immagine (comprese le immagini di sfondo), tela non bianca o SVG.
domInteractive
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 viene considerata interattiva per l'utente.
Questa metrica è utile per informazioni dettagliate sulla velocità con cui gli utenti possono effettivamente interagire con gli elementi della tua app, come pulsanti e collegamenti ipertestuali, anziché vederli semplicemente sullo schermo. Tieni presente che ciò non significa che il browser risponderà all'interazione (per questa metrica, fai riferimento alla prima traccia del ritardo di input ).
Inizia quando l'utente accede a una pagina.
Si ferma immediatamente prima che l'agente utente imposti la disponibilità 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.
Inizia 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.
caricamentoEventEnd
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 comprendere quanto tempo è necessario per caricare tutti i tuoi contenuti, inclusi fogli di stile e immagini.
Inizia 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 all'interazione dell'utente fornisce ai tuoi utenti le prime impressioni sulla reattività della tua app.
Inizia 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.
Tieni presente che per misurare la prima metrica del ritardo di input, devi aggiungere la libreria polyfill per questa metrica. Per le istruzioni di 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 sul rendimento in tempo reale .
Tieni traccia delle metriche chiave nella tua dashboard
Per scoprire l'andamento delle tue metriche chiave, aggiungile alla scheda delle metriche nella parte superiore della dashboard Prestazioni . Puoi identificare rapidamente le regressioni visualizzando le modifiche settimana dopo settimana o verificare che le modifiche recenti nel codice stiano migliorando le prestazioni.
Per aggiungere una metrica alla scheda delle metriche, procedi nel seguente modo:
- Vai alla dashboard Prestazioni nella console Firebase.
- Fai clic su una scheda metrica vuota, quindi seleziona una metrica esistente da aggiungere alla tua 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 del dashboard .
Visualizza le tracce e i relativi dati
Per visualizzare le tracce, vai al dashboard 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 ed è anche possibile 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 Firebase che evidenzia le modifiche alle metriche, semplificando la risoluzione rapida e riducendo al minimo l'impatto dei problemi di prestazioni sulle app e sugli utenti. Puoi utilizzare la pagina di risoluzione dei problemi quando scopri potenziali problemi di prestazioni, ad esempio, nei seguenti scenari:
- Selezioni le metriche pertinenti sulla dashboard e noti un grande delta.
- Nella tabella delle tracce ordini per visualizzare i delta più grandi in alto e vedi 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, fare clic sul pulsante Visualizza dettagli metrica .
- Su qualsiasi scheda metrica, seleziona
=> Visualizza dettagli . La pagina di risoluzione dei problemi visualizza informazioni sulla metrica selezionata. - Nella tabella delle tracce, fare clic sul nome di una traccia o su qualsiasi valore di metrica nella riga associata a tale traccia.
- In un avviso email, fai clic su Esamina adesso .
Quando fai clic sul nome di una traccia nella tabella delle tracce, puoi approfondire i parametri di interesse. Clicca il
- Filtra per URL della pagina per visualizzare i dati per una pagina specifica del tuo sito
- Filtra per tipo di connessione effettiva per scoprire l'impatto di una connessione 3G sulla tua app
- Filtra per Paese per assicurarti che la posizione del tuo database non influisca su una regione specifica
Ulteriori informazioni sulla visualizzazione dei dati per le tracce .
Prossimi passi
Ulteriori informazioni sull'utilizzo degli attributi per esaminare i dati sulle prestazioni.
Scopri di più su come monitorare i 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.