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 della pagina. Ogni traccia di caricamento pagina raccoglie le seguenti metriche predefinite:
Largest Contentful Paint: una metrica che misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e quello in cui si verifica la maggiore variazione visiva
Interaction to Next Paint: una metrica che misura il tempo più lungo tra l'interazione dell'utente con la pagina e l'esecuzione del successivo rendering
variazione layout cumulativa: una metrica che misura e assegna un punteggio alle variazioni di layout impreviste in una pagina
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 modifica visiva
First Contentful Paint: una metrica che misura il tempo tra il momento in cui un utente accede a una pagina e quello in cui vengono visualizzati contenuti significativi, come un'immagine o un testo
domInteractive: una metrica che misura il tempo 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 tra il momento in cui l'utente accede a una pagina e il momento in cui il documento HTML iniziale viene caricato e analizzato completamente
loadEventEnd: una metrica che misura il tempo che intercorre tra il momento in cui l'utente passa alla pagina e il completamento dell'evento di caricamento del documento corrente.
First Input Delay: una metrica che misura il tempo che intercorre tra l'interazione dell'utente con una pagina e il momento in cui il browser è in grado di rispondere a quell'input.
Puoi visualizzare i dati di queste tracce nella sottoscheda Caricamento pagina della tabella delle tracce, che si trova nella parte inferiore della dashboard Rendimento (scopri di più sull'utilizzo della console più avanti in questa pagina).
Definizione di una traccia di caricamento pagina
Questa traccia misura diverse metriche relative al caricamento delle pagine della tua app, in particolare il tempo necessario per raggiungere punti di caricamento comuni, ad esempio un'app adattabile.
Le tracce di caricamento pagina ti consentono di monitorare le metriche vitals essenziali della tua app, come First Contentful Paint.
Metriche raccolte per le tracce di caricamento della pagina
Poiché queste tracce sono predefinite, non puoi aggiungere altre metriche o attributi personalizzati.
Largest Contentful Paint
Questa metrica misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e quello in cui vengono visualizzati i contenuti video, di testo o immagine più grandi.
Questa metrica è utile per capire quanto velocemente i contenuti principali della pagina web diventano visibili all'utente.
Si avvia quando l'utente accede a una pagina.
Si interrompe quando si verifica la modifica visiva più grande, ad esempio immagini, testo o elementi video. Per ulteriori dettagli, consulta gli indicatori chiave della web core.
"Elemento Largest Contentful Paint" è un attributo personalizzato che identifica l'elemento corrispondente al Largest Contentful Paint. Questo viene acquisito in aggiunta al tempo di visualizzazione più grande con contenuti.
Interazione con la successiva elaborazione di immagini
Questa metrica misura il tempo che intercorre tra l'interazione di un utente con una pagina e la successiva applicazione della pittura.
Questa metrica è utile perché misura l'adattabilità di una pagina all'input utente.
Inizia quando l'utente interagisce con la pagina (clic del mouse, tocco su un dispositivo o input da tastiera).
Si interrompe al successivo aggiornamento. Per ulteriori dettagli, consulta gli indicatori web di base.
"Interazione con il successivo 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 viene acquisito oltre al tempo di interaction to next paint.
Cumulative Layout Shift
Questa metrica misura la più ampia serie di punteggi di variazione del layout per ogni variazione del layout imprevista che si verifica durante l'intero ciclo di vita della pagina.
Questa metrica è utile perché i cambiamenti imprevisti del layout 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 le metriche Core Web Vitals.
"Target Cumulative Layout Shift più grande" è un attributo personalizzato che identifica l'elemento che si è spostato quando si è verificato lo spostamento più grande dei contenuti. Questo valore viene acquisito oltre al punteggio della variazione del layout cumulativa.
Prima visualizzazione
Questa metrica misura il tempo che intercorre tra il momento in cui l'utente accede a una pagina e il momento in cui avviene qualsiasi modifica visiva.
Questa metrica è utile perché la prima visualizzazione indica agli utenti che il caricamento della pagina sta iniziando.
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 il caricamento di un'intestazione.
First Contentful Paint
Questa metrica misura il tempo che intercorre tra il momento in cui un utente accede a una pagina e quello in cui vengono visualizzati contenuti significativi, come un'immagine o del testo.
Questa metrica è utile per capire quanto velocemente gli 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 ha eseguito il rendering dei primi contenuti del DOM, inclusi testo, immagini (incluse le immagini di sfondo), canvas non bianche 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 è considerata interattiva per l'utente.
Questa metrica è utile per capire quanto velocemente gli utenti possono effettivamente interagire con gli elementi della tua app, come pulsanti e link ipertestuali, anziché limitarsi a visualizzarli sullo schermo. Tieni presente che questo non significa che il browser risponderà all'interazione (per questa metrica, fai riferimento alla traccia first input delay).
Si avvia quando l'utente accede a una pagina.
Si interrompe immediatamente prima che lo user agent imposti il documento HTML corrente come "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 il caricamento e l'analisi completi del documento HTML iniziale (
DOMContentLoaded), ma questo non significa che il caricamento di fogli di stile, immagini e frame secondari sia stato completato.
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 il tempo necessario per caricare tutti i contenuti, inclusi gli stili e le immagini.
Si avvia quando l'utente accede a una pagina.
Si arresta immediatamente dopo il completamento dell'evento di caricamento del documento HTML corrente.
First Input Delay
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 questo input.
Questa metrica è utile perché il browser che risponde a un'interazione dell'utente offre ai tuoi utenti le prime impressioni sull'adattabilità 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 iperlink.
Si interrompe immediatamente dopo che il browser è in grado di rispondere all'input, il che significa che il browser non è impegnato a caricare o analizzare i tuoi contenuti.
Tieni presente che per misurare la metrica del primo ritardo di inserimento, devi aggiungere la raccolta polyfill per questa metrica. Per le istruzioni di installazione, consulta la documentazione della libreria.
Monitorare, visualizzare e filtrare i dati sul rendimento
Per visualizzare i dati sulle prestazioni 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 conoscere le tendenze delle tue metriche principali, aggiungile alla scheda delle metriche nella parte superiore della dashboard Rendimento. Puoi identificare rapidamente le regressioni monitorando le variazioni di settimana in settimana o verificare che le modifiche recenti al codice stiano migliorando il rendimento.
Dashboard di Firebase Performance Monitoring" />
Per aggiungere una metrica alla scheda delle metriche:
- Vai alla dashboard Rendimentonella console Firebase.
- Fai clic su una scheda metrica vuota, quindi seleziona una metrica esistente da aggiungere alla scheda.
- Fai clic su in 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 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 e fai clic sulla sottoscheda appropriata. La tabella mostra alcune metriche principali per ogni traccia e puoi anche 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 mette in evidenza le variazioni delle metriche, consentendo di risolvere rapidamente e ridurre al minimo l'impatto dei problemi di prestazioni sulle tue app e sui tuoi utenti. Puoi utilizzare la pagina di risoluzione dei problemi quando vengono rilevati potenziali problemi di prestazioni, ad esempio nei seguenti scenari:
- Seleziona le metriche pertinenti nella dashboard e noti un delta elevato.
- Nella tabella delle tracce, ordina in modo da visualizzare i delta più grandi in alto e vedrai una variazione percentuale significativa.
- Ricevi un avviso via email che ti informa di un problema di rendimento.
Puoi accedere alla pagina di risoluzione dei problemi nei seguenti modi:
- Nella dashboard delle metriche, fai clic sul pulsante Visualizza i dettagli della metrica.
- In qualsiasi scheda delle metriche, seleziona
=> Visualizza dettagli . La pagina di risoluzione dei problemi mostra informazioni sulla metrica selezionata. - Nella tabella delle tracce, fai clic sul nome di una traccia o su un valore della metrica nella riga associata alla traccia.
- In un avviso via email, fai clic su Esegui accertamenti 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 in base a URL pagina per visualizzare i dati relativi a 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 database non influisca su una regione specifica.
Scopri di più su come visualizzare i dati relativi alle tue 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 consoleFirebase.
Configura avvisi per i caricamenti di pagine che stanno peggiorando il rendimento della tua app. Ad esempio, puoi configurare un avviso via email per il tuo team se il primo ritardo di input per una pagina specifica supera una soglia che hai impostato.