Performance Monitoring utilizza 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, Performance Monitoring raccoglie automaticamente una traccia per ogni pagina della tua app chiamata traccia di caricamento pagina. Ogni traccia di caricamento pagina raccoglie le seguenti metriche predefinite:
Largest Contentful Paint: una metrica che misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui si verifica la modifica visiva più grande .
Interaction to Next Paint: una metrica che misura il tempo più lungo trascorso tra il momento in cui l'utente interagisce con la pagina e il momento in cui si verifica la visualizzazione successiva.
Cumulative Layout Shift: una metrica che misura e assegna un punteggio alle variazioni di layout impreviste in una pagina.
First Paint: una metrica che misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui si verifica qualsiasi modifica visiva.
First Contentful Paint: una metrica che misura il tempo trascorso tra il momento in cui un utente passa a una pagina e il momento in cui vengono visualizzati contenuti significativi, come un'immagine o un testo.
domInteractive: una metrica che misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui la pagina viene considerata interattiva per l'utente.
domContentLoadedEventEnd: una metrica che misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui il documento HTML iniziale viene caricato e analizzato completamente.
loadEventEnd: una metrica che misura il tempo trascorso tra il momento in cui l'utente passa alla pagina e il momento in cui l'evento di caricamento del documento attuale viene completato.
First Input Delay: una metrica che misura il tempo trascorso tra il momento in cui l'utente interagisce con una pagina e il momento in cui il browser è in grado di rispondere all'input.
Puoi visualizzare i dati di queste tracce nella scheda secondaria Caricamento pagina della tabella delle tracce, che si trova nella parte inferiore della dashboard Rendimento (scopri di più su come utilizzare la console più avanti in questa pagina).
Definizione di una traccia di caricamento pagina
Questa traccia misura diverse metriche relative al caricamento delle pagine nella tua app, in particolare il tempo necessario per raggiungere i punti di caricamento comuni, ad esempio un'app reattiva.
Le tracce di caricamento pagina ti aiutano a monitorare i Core Web Vitals della tua app, come First Contentful Paint.
Metriche raccolte per le tracce di caricamento pagina
Queste tracce sono predefinite, quindi non puoi aggiungere altre metriche personalizzate o attributi personalizzati.
Largest Contentful Paint
Questa metrica misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui vengono visualizzati i contenuti di immagine, testo o video più grandi.
Questa metrica è utile per capire la velocità con cui i contenuti principali della pagina web diventano visibili all'utente.
Inizia quando l'utente passa a una pagina.
Si interrompe quando si verifica la modifica visiva più grande, inclusi elementi di immagine, testo o video. Per ulteriori dettagli, consulta i core web vitals for more details.
"Elemento Largest Contentful Paint" è un attributo personalizzato che identifica l'elemento corrispondente a Largest Contentful Paint. Questo valore viene acquisito in aggiunta al tempo di Largest Contentful Paint.
Interaction to Next Paint
Questa metrica misura il tempo trascorso tra il momento in cui un utente interagisce con una pagina e il momento in cui si verifica la visualizzazione successiva.
Questa metrica è utile perché misura la reattività di una pagina all'input dell'utente.
Inizia quando l'utente interagisce con la pagina (clic del mouse, tocco su un dispositivo o input da tastiera).
Si interrompe quando si verifica la visualizzazione successiva. Per ulteriori dettagli, consulta i core web vitals for more details.
"Target Interaction to Next Paint più lunga" è un attributo personalizzato che identifica l'elemento con cui l'utente ha interagito quando si è verificato l'evento Interaction to Next Paint. Questo valore viene acquisito in aggiunta al tempo di Interaction to Next Paint.
Cumulative Layout Shift
Questa metrica misura il burst più grande di punteggi di variazione del layout per ogni variazione di layout imprevista che si verifica durante l'intero ciclo di vita della pagina.
Questa metrica è utile perché le variazioni di layout impreviste possono interrompere l'esperienza utente. La metrica riporta un punteggio basato sull'API Layout Instability. Per ulteriori dettagli su come viene calcolato il punteggio, consulta i core web vitals per maggiori dettagli.
"Target variazione layout più grande" è un attributo personalizzato che identifica l' elemento che è cambiato quando si è verificata la variazione di layout più grande. Questo valore viene acquisito in aggiunta al punteggio di Cumulative Layout Shift.
First Paint
Questa metrica misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui si verifica qualsiasi modifica visiva.
Questa metrica è utile perché First Paint indica agli utenti che la pagina sta iniziando a caricarsi.
Inizia quando l'utente passa a una pagina.
Si interrompe quando si verifica qualsiasi modifica visiva, inclusa una modifica del colore di sfondo o il caricamento di un'intestazione.
First Contentful Paint
Questa metrica misura il tempo trascorso tra il momento in cui un utente passa a una pagina e il momento in cui vengono visualizzati contenuti significativi, come un'immagine o un testo.
Questa metrica è utile per ottenere informazioni su quanto tempo impiegano gli utenti a visualizzare i contenuti effettivi della tua app anziché solo un nuovo colore di sfondo o un'intestazione.
Inizia quando l'utente passa a una pagina.
Si interrompe immediatamente dopo che il browser esegue il rendering dei primi contenuti del DOM, inclusi testo, immagini (incluse le immagini di sfondo), canvas non bianco o SVG.
domInteractive
Questa metrica misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui la pagina viene considerata interattiva per l'utente.
Questa metrica è utile per ottenere informazioni su quanto tempo impiegano gli utenti a interagire effettivamente con gli elementi della tua app, come pulsanti e link ipertestuali, anziché solo visualizzarli sullo schermo. Tieni presente che questo non significa che il browser risponderà all'interazione (per questa metrica, consulta la traccia First Input Delay).
Inizia quando l'utente passa a una pagina.
Si interrompe immediatamente prima che lo user agent imposti il documento HTML attuale come "interattivo".
domContentLoadedEventEnd
Questa metrica misura il tempo trascorso tra il momento in cui l'utente passa a una pagina e il momento in cui il documento HTML iniziale viene caricato e analizzato completamente.
Inizia quando l'utente passa a una pagina.
Si interrompe immediatamente dopo che il documento HTML iniziale viene caricato e analizzato completamente (
DOMContentLoaded), ma questo non significa che il caricamento di fogli di stile, immagini e iframe secondari sia terminato.
loadEventEnd
Questa metrica misura il tempo trascorso tra il momento in cui l'utente passa alla pagina e il momento in cui l'evento di caricamento del documento attuale viene completato.
Questa metrica è utile per ottenere informazioni sul tempo necessario per caricare tutti i contenuti, inclusi fogli di stile e immagini.
Inizia quando l'utente passa a una pagina.
Si interrompe immediatamente dopo il completamento dell'evento di caricamento del documento HTML attuale.
First Input Delay
Questa metrica misura il tempo trascorso tra il momento in cui l'utente interagisce con una pagina e il momento in cui il browser è in grado di rispondere all'input.
Questa metrica è utile perché la risposta del browser a un'interazione dell'utente offre agli 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 un link ipertestuale.
Si interrompe immediatamente dopo che il browser è in grado di rispondere all'input, il che significa che il browser non è occupato a caricare o analizzare i contenuti.
Tieni presente che per misurare la metrica First Input Delay devi aggiungere la libreria polyfill per questa metrica. Per le istruzioni di installazione, consulta la documentazione della libreria's documentazione.
Monitorare, visualizzare e filtrare i dati sul rendimento
Per visualizzare i dati sul rendimento in tempo reale, assicurati che la tua app utilizzi una versione dell'SDK Performance Monitoring compatibile con l'elaborazione dei dati in tempo reale. Scopri di più sui dati sul rendimento in tempo reale.
Monitorare le metriche chiave nella dashboard
Per scoprire l'andamento delle metriche chiave, aggiungile alla scheda delle metriche nella parte superiore della dashboard Rendimento. Puoi identificare rapidamente le regressioni visualizzando le modifiche settimanali o verificare che le modifiche recenti nel codice stiano migliorando il rendimento.
Dashboard di Firebase Performance Monitoring" />
Per aggiungere una metrica alla scheda delle metriche:
- Vai alla dashboard Rendimento nella console Firebase.
- Fai clic su una scheda delle metriche vuota, quindi seleziona una metrica esistente da aggiungere alla scheda.
- Fai clic su una scheda delle metriche compilata per visualizzare altre opzioni, ad esempio per sostituire o rimuovere una metrica.
La scheda delle metriche mostra i dati delle metriche raccolti nel tempo, sia in forma grafica sia come a variazione percentuale numerica.
Scopri di più sull'utilizzo della dashboard.
Visualizzare le tracce e i relativi dati
Per visualizzare le tracce, vai alla dashboard Rendimento nella console Firebase, scorri verso il basso fino alla tabella delle tracce, quindi fai clic sulla scheda secondaria appropriata. La tabella mostra alcune delle metriche principali per ogni traccia e puoi persino ordinare l'elenco in base alla variazione percentuale di una metrica specifica.
Performance Monitoring fornisce una pagina per la risoluzione dei problemi nella console Firebase che evidenzia le modifiche delle metriche, semplificando la risoluzione rapida e la riduzione al minimo dell'impatto dei problemi di prestazioni sulle app e sugli utenti. Puoi utilizzare la pagina per la risoluzione dei problemi quando scopri potenziali problemi di rendimento, ad esempio nei seguenti scenari:
- Selezioni le metriche pertinenti nella dashboard e noti una grande differenza.
- Nella tabella delle tracce ordini i dati in modo da visualizzare le differenze più grandi nella parte superiore e noti una variazione percentuale significativa.
- Ricevi un avviso via email che ti informa di un problema di prestazioni.
Puoi accedere alla pagina per la risoluzione dei problemi nei seguenti modi:
- Nella dashboard delle metriche, fai clic sul pulsante Visualizza dettagli metrica.
- In qualsiasi scheda delle metriche, seleziona
=> Visualizza dettagli . La pagina per la risoluzione dei problemi mostra informazioni sulla metrica selezionata. - Nella tabella delle tracce, fai clic sul nome di una traccia o su qualsiasi valore della metrica nella riga associata a quella traccia.
- In un avviso via email, fai clic su Indaga ora.
Quando fai clic sul nome di una traccia nella tabella delle tracce, puoi visualizzare in dettaglio le metriche di
interesse. Fai clic sul pulsante
Dati di Firebase Performance Monitoring filtrati per attributo" />
- Filtra per URL pagina per visualizzare i dati di una pagina specifica del tuo sito.
- Filtra per Tipo effettivo di connessione per scoprire l'impatto di una connessione 3G sulla tua app.
- Filtra per Paese per assicurarti che la posizione del database non influisca su una regione specifica
Scopri di più su visualizzazione dei dati delle tracce.
Passaggi successivi
Scopri di più sull' utilizzo degli attributi per esaminare i dati sul rendimento.
Scopri di più su come monitorare i problemi di rendimento nella Firebase console.
Configura gli avvisi per i caricamenti di pagina che stanno peggiorando il rendimento della tua app. Ad esempio, puoi configurare un avviso via email per il tuo team se il First Input Delay per una pagina specifica supera una soglia che hai impostato.