Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Ulteriori informazioni sui dati sulle prestazioni di caricamento delle pagine (app Web)

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Il monitoraggio delle prestazioni utilizza le tracce per raccogliere dati sui processi monitorati nell'app. Una traccia è un rapporto che contiene i dati acquisiti tra due momenti nella tua app.

Per le app Web, Performance Monitoring 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 passaggio dell'utente 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 quando un utente naviga su una pagina e quando viene visualizzato un contenuto significativo, come un'immagine o un testo

  • domInteractive — Una metrica che misura il tempo tra quando l'utente naviga su una pagina e quando la pagina è considerata interattiva per l'utente

  • domContentLoadedEventEnd — Una metrica che misura il tempo che intercorre tra quando l'utente naviga in una pagina e quando il documento HTML iniziale viene completamente caricato e analizzato

  • loadEventEnd — Una metrica che misura il tempo tra il momento in cui l'utente accede alla pagina e il completamento dell'evento di caricamento del documento corrente

  • ritardo del primo input : 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 tale input

Puoi visualizzare i dati di queste tracce nella sottoscheda Caricamento della pagina della tabella delle tracce, che si trova nella parte inferiore del dashboard delle 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 quanto tempo ci vuole per raggiungere punti di caricamento comuni, come un'app reattiva.

Le tracce di caricamento della pagina ti aiutano a tenere traccia degli elementi vitali web principali della tua app, come la prima pittura di contenuto.

Metriche raccolte per le tracce di caricamento della pagina

Queste tracce sono tracce predefinite, quindi non puoi aggiungere metriche personalizzate o attributi personalizzati ad esse.

Prima vernice

Questa metrica misura il tempo che intercorre tra quando l'utente passa a una pagina e quando 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 passa a una pagina.

  • Si interrompe quando si verifica qualsiasi modifica visiva, inclusa una modifica del colore dello sfondo o il caricamento di un'intestazione.

Prima vernice contenta

Questa metrica misura il tempo che intercorre tra il passaggio di un utente a una pagina e la visualizzazione di contenuti significativi, come un'immagine o un testo.

Questa metrica è utile per ottenere informazioni dettagliate sulla rapidità con cui i tuoi utenti vedono i contenuti effettivi della tua app anziché solo un nuovo colore di sfondo o intestazione.

  • Inizia quando l'utente passa a una pagina.

  • Si interrompe immediatamente dopo che il browser esegue il rendering del primo contenuto dal DOM, inclusi testo, immagine (incluse immagini di sfondo), tela non bianca o SVG.

domInteractive

Questa metrica misura il tempo che intercorre tra il passaggio dell'utente a una pagina e il momento in cui la pagina è considerata interattiva per l'utente.

Questa metrica è utile per ottenere informazioni dettagliate sulla rapidità con cui i tuoi 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, fare riferimento alla prima traccia del ritardo di input ).

  • Inizia quando l'utente passa a una pagina.

  • Si interrompe immediatamente prima che l'interprete imposti la disponibilità del documento HTML corrente su "interattivo".

domContentLoadedEventEnd

Questa metrica misura il tempo che intercorre tra il momento in cui l'utente passa a una pagina e il momento in cui il documento HTML iniziale viene completamente caricato e analizzato.

  • Inizia quando l'utente passa a una pagina.

  • Si interrompe immediatamente dopo che il documento HTML iniziale è stato completamente caricato e analizzato ( DOMContentLoaded ), ma ciò non significa che il caricamento di fogli di stile, immagini e sottoframe sia terminato.

loadEventEnd

Questa metrica misura il tempo tra il momento in cui l'utente passa alla pagina e il completamento dell'evento di caricamento del documento corrente.

Questa metrica è utile per ottenere informazioni dettagliate su quanto tempo ci vuole per caricare tutti i tuoi 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 corrente.

Primo ritardo di ingresso

Questa metrica 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 tale input.

Questa metrica è utile poiché il browser che risponde 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 collegamento ipertestuale.

  • 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 il 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.

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 del rendimento . Puoi identificare rapidamente le regressioni visualizzando le modifiche settimana dopo settimana o verificare che le modifiche recenti al codice stiano migliorando le prestazioni.

un'immagine della scheda delle metriche nella dashboard di monitoraggio delle prestazioni di Firebase

Per aggiungere una metrica alla scheda delle metriche, procedi nel seguente modo:

  1. Vai alla dashboard delle prestazioni nella console Firebase.
  2. Fai clic su una scheda metrica vuota, quindi seleziona una metrica esistente da aggiungere alla tua bacheca.
  3. 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 loro dati

Per visualizzare le tue 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 ciascuna traccia e puoi persino ordinare l'elenco in base alla variazione percentuale per una metrica specifica.

Monitoraggio delle prestazioni fornisce una pagina per la risoluzione dei problemi nella console Firebase che evidenzia le modifiche alle metriche, semplificando la rapida risoluzione e riducendo al minimo l'impatto dei problemi di prestazioni sulle tue app e sugli utenti. Puoi utilizzare la pagina di risoluzione dei problemi per conoscere 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 più grandi 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 sul nome di una traccia o su qualsiasi valore di metrica nella riga associata a tale traccia.
  • In un avviso e-mail, fai clic su Esamina ora .

Quando si fa clic sul nome di una traccia nella tabella delle tracce, è possibile visualizzare in dettaglio le metriche di interesse. Fare clic sul pulsante filtro per filtrare i dati per attributo, ad esempio:

un'immagine dei dati di monitoraggio delle prestazioni di Firebase filtrati per attributo
  • 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 database non influisca su 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.

  • Scopri di più su come tenere traccia dei problemi di prestazioni nella console Firebase.

  • Imposta avvisi per i caricamenti di pagina che stanno degradando 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.