Firebase Performance Monitoring per il web

1. Panoramica

In questo codelab imparerai a utilizzare Firebase Performance Monitoring per misurare il rendimento di un'app web di chat. Visita la pagina https://fireperf-friendlychat.web.app/ per guardare una demo dal vivo.

Questo codelab è inteso come un sequel del codelab web di Firebase in cui imparerai a creare un'app di chat utilizzando l'SDK web Firebase. Se vuoi imparare a utilizzare la piattaforma Firebase sul web creando un'app di chat, segui prima il codelab web di Firebase. Se sai già utilizzare la piattaforma e l'interfaccia a riga di comando di Firebase e vuoi saperne di più su Firebase Performance Monitoring, sei nel posto giusto.

Cosa imparerai a fare

• Come aggiungere Firebase Performance Monitoring alla tua app web per ottenere metriche immediate (caricamento della pagina e richieste di rete).
• Come misurare un determinato codice con tracce personalizzate.
• Come registrare metriche personalizzate aggiuntive associate a una traccia personalizzata.
• Come segmentare ulteriormente i dati sul rendimento con attributi personalizzati.
• Come utilizzare la dashboard Monitoraggio delle prestazioni per comprendere le prestazioni della tua app web.

Che cosa ti serve

• L'IDE o l'editor di testo che preferisci, ad esempio WebStorm, Atom, Sublime o VS Code
• Un terminale/una console
• Un browser a tua scelta, ad esempio Chrome
• Il codice campione del codelab (per informazioni su come ottenere il codice, consulta la sezione successiva di questo codelab).

2. recupera il codice campione

Clona il repository GitHub del codelab dalla riga di comando:

git clone https://github.com/firebase/codelab-friendlychat-web

In alternativa, se non hai installato git, puoi scaricare il repository come file ZIP.

Il repository friendlychat-web contiene progetti di esempio per più piattaforme.

Questo codelab utilizza solo questi due repository:

• 📁 performance-monitoring-start: il codice iniziale su cui lavorerai durante questo codelab.
• 📁 performance-monitoring: il codice completo dell'app di esempio completata.

Nota: per eseguire l'app completa, devi comunque creare un progetto Firebase nella console Firebase.

Importa l'app iniziale

Utilizzando l'IDE, apri o importa la directory 📁 performance-monitoring-start dal repository clonato. Questa 📁 directory performance-monitoring-start contiene il codice iniziale per il codelab, che è un'app web di chat.

3. Crea e configura un progetto Firebase

Creare un progetto Firebase

1. Nella Console Firebase, fai clic su Aggiungi progetto.
2. Assegna al progetto Firebase il nome FriendlyChat.

Ricorda l'ID per il progetto Firebase.

3. Fai clic su Crea progetto.

Importante: il progetto Firebase avrà il nome FriendlyChat,, ma Firebase gli assegnerà automaticamente un ID progetto univoco nel formato friendlychat-1234. Questo identificatore univoco è il modo in cui il tuo progetto viene effettivamente identificato (anche nell'interfaccia a riga di comando), mentre FriendlyChat è semplicemente un nome visualizzato.

Esegui l'upgrade del piano tariffario Firebase

Per utilizzare Cloud Storage for Firebase, il progetto Firebase deve avere il piano tariffario di pagamento a consumo (Blaze), il che significa che è collegato a un account di fatturazione Cloud.

• Un account di fatturazione Cloud richiede un metodo di pagamento, ad esempio una carta di credito.
• Se non hai mai utilizzato Firebase e Google Cloud, controlla se hai l'idoneità a ricevere un credito di 300 $ e un account di fatturazione Cloud per la prova gratuita.
• Se partecipi a questo codelab come parte di un evento, chiedi all'organizzatore se sono disponibili crediti Cloud.

Per eseguire l'upgrade del progetto al piano Blaze, segui questi passaggi:

1. Nella console Firebase, seleziona l'upgrade del piano.
2. Seleziona il piano Blaze. Segui le istruzioni sullo schermo per collegare un account di fatturazione Cloud al progetto.
   Se nell'ambito di questo upgrade dovevi creare un account di fatturazione Cloud, potresti dover tornare al flusso di upgrade nella console Firebase per completare l'upgrade.

Nota: puoi eseguire il downgrade del tuo progetto al piano tariffario senza costi (Spark) dopo aver completato questo codelab.

Aggiungi un'app web Firebase al progetto

1. Fai clic sull'icona web per creare una nuova app web Firebase.
2. Registra l'app con il nickname Friendly Chat, quindi seleziona la casella accanto a Configura anche Firebase Hosting per questa app.
3. Fai clic su Registra app.
4. Fai clic sui passaggi rimanenti. Non è necessario seguire le istruzioni sullo schermo ora; queste verranno trattate nei passaggi successivi di questo codelab.

Attivare Accedi con Google per l'autenticazione Firebase

Per consentire agli utenti di accedere all'app di chat con i propri Account Google, utilizzeremo il metodo di accesso Google.

Dovrai attivare l'accesso con Google:

1. Nella console Firebase, individua la sezione Sviluppa nel riquadro a sinistra.
2. Fai clic su Authentication (Autenticazione), quindi sulla scheda Sign-in method (Metodo di accesso) (vai alla console).
3. Attiva il provider di accesso Google e poi fai clic su Salva.

Configura Cloud Firestore

L'app web utilizza Cloud Firestore per salvare i messaggi della chat e ricevere nuovi messaggi.

Ecco come configurare Cloud Firestore nel tuo progetto Firebase:

1. Nel riquadro a sinistra della console Firebase, espandi Crea e seleziona Database Firestore.
2. Fai clic su Crea database.
3. Lascia il campo ID database impostato su (default).
4. Seleziona una posizione per il database, poi fai clic su Avanti.
   Per un'app reale, scegli una posizione vicina ai tuoi utenti.
5. Fai clic su Avvia in modalità di test. Leggi il disclaimer sulle regole di sicurezza.
   Più avanti in questo codelab aggiungerai Regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre pubblicamente un'app senza aggiungere regole di sicurezza per il tuo database.
6. Fai clic su Crea.

Configura Cloud Storage per Firebase

L'app web utilizza Cloud Storage per Firebase per archiviare, caricare e condividere le foto.

Ecco come configurare Cloud Storage for Firebase nel tuo progetto Firebase:

1. Nel riquadro a sinistra della console Firebase, espandi Crea e seleziona Spazio di archiviazione.
2. Fai clic su Inizia.
3. Seleziona una località per il bucket di archiviazione predefinito.
   I bucket in US-WEST1, US-CENTRAL1 e US-EAST1 possono sfruttare il livello "Sempre senza costi" per Google Cloud Storage. I bucket in tutte le altre località seguono i prezzi e l'utilizzo di Google Cloud Storage.
4. Fai clic su Avvia in modalità di test. Leggi il disclaimer relativo alle regole di sicurezza.
   Più avanti in questo codelab, aggiungerai regole di sicurezza per proteggere i tuoi dati. Non distribuire o esporre un'app pubblicamente senza aggiungere regole di sicurezza per il bucket di archiviazione.
5. Fai clic su Crea.

4. Installa l'interfaccia a riga di comando di Firebase

L'interfaccia a riga di comando (CLI) di Firebase ti consente di utilizzare Firebase Hosting per pubblicare la tua app web localmente e per eseguirne il deployment nel progetto Firebase.

1. Installa l'interfaccia a riga di comando seguendo queste istruzioni nella documentazione di Firebase.
2. Verifica che l'interfaccia a riga di comando sia stata installata correttamente eseguendo questo comando in un terminale:

firebase --version

Assicurati che la versione dell'interfaccia a riga di comando di Firebase sia 8.0.0 o successiva.

3. Autorizza l'interfaccia a riga di comando di Firebase eseguendo questo comando:

firebase login

Abbiamo configurato il modello di app web in modo che estragga la configurazione dell'app per Firebase Hosting dalla directory locale dell'app (il repository che hai clonato in precedenza nel codelab). Tuttavia, per estrarre la configurazione, dobbiamo associare la tua app al tuo progetto Firebase.

4. Assicurati che la riga di comando acceda alla directory performance-monitoring-start locale dell'app.
5. Associa l'app al progetto Firebase eseguendo questo comando:

firebase use --add

6. Quando richiesto, seleziona l'ID progetto e poi assegna un alias al progetto Firebase.

Un alias è utile se hai più ambienti (di produzione, di gestione temporanea e così via). Tuttavia, per questo codelab, utilizziamo solo l'alias di default.

7. Segui le istruzioni rimanenti nella riga di comando.

5. Integrazione con Firebase Performance Monitoring

Esistono vari modi per eseguire l'integrazione con l'SDK Firebase Performance Monitoring per il web (per informazioni dettagliate, consulta la documentazione). In questo codelab, attiveremo il monitoraggio delle prestazioni dagli URL di hosting.

Aggiungere il monitoraggio del rendimento e inizializzare Firebase

1. Apri il file src/index.js, quindi aggiungi la riga seguente sotto TODO per includere l'SDK Firebase Performance Monitoring.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. Inoltre, dobbiamo inizializzare l'SDK Firebase con un oggetto di configurazione che contenga informazioni sul progetto Firebase e sull'app web che vogliamo utilizzare. Poiché utilizziamo Firebase Hosting, puoi importare uno script speciale che eseguirà questa configurazione per te. Per questo codelab, abbiamo già aggiunto la seguente riga in fondo al file public/index.html, ma verifica che sia presente.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. Nel file src/index.js, aggiungi la seguente riga sotto TODO per inizializzare il monitoraggio delle prestazioni.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Ora il monitoraggio delle prestazioni raccoglie automaticamente le metriche relative al caricamento della pagina e alle richieste di rete quando gli utenti utilizzano il tuo sito. Fai riferimento alla documentazione per scoprire di più sulle tracce di caricamento pagina automatiche.

Aggiungi la libreria polyfill per il ritardo di primo input

Il ritardo prima interazione è utile perché il browser che risponde a un'interazione dell'utente dà agli utenti le prime impressioni sulla reattività della tua app.

Il ritardo prima interazione 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 contenuti.

Questa libreria polyfill è facoltativa per l'integrazione del monitoraggio delle prestazioni.

Apri il file public/index.html, quindi rimuovi il commento dalla riga seguente.

indice.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

A questo punto, hai completato l'integrazione di Firebase Performance Monitoring nel codice.

Esistono anche altri modi per eseguire l'integrazione con l'SDK Firebase Performance Monitoring per il web. Per maggiori dettagli, consulta la guida introduttiva a Performance Monitoring per il web.

Nei passaggi successivi, scoprirai come aggiungere tracce personalizzate utilizzando Firebase Performance Monitoring. Se vuoi raccogliere solo le tracce automatiche, vai alla sezione "Esegui il deployment e inizia a inviare le immagini".

6. Aggiungi una traccia personalizzata all'app

Performance Monitoring consente di creare tracce personalizzate. Una traccia personalizzata è un report per la durata di un blocco di esecuzione nella tua app. Puoi definire l'inizio e la fine di una traccia personalizzata utilizzando le API fornite dall'SDK.

1. Nel file src/index.js, recupera un oggetto Performance e poi crea una traccia personalizzata per il caricamento di un messaggio immagine.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Per registrare una traccia personalizzata, devi specificare il punto di inizio e il punto di arresto della traccia. Puoi pensare a una traccia come a un timer.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Hai definito una traccia personalizzata correttamente. Dopo il deployment del codice, la durata della traccia personalizzata verrà registrata se un utente invia un messaggio immagine. In questo modo avrai un'idea del tempo necessario agli utenti reali per inviare immagini nella tua app di chat.

7. Aggiungi una metrica personalizzata alla tua app.

Puoi configurare ulteriormente una tracce personalizzata per registrare metriche personalizzate per gli eventi relativi alle prestazioni che si verificano nel suo ambito. Ad esempio, puoi utilizzare una metrica per verificare se il tempo di caricamento è influenzato dalle dimensioni di un'immagine per la traccia personalizzata definita nell'ultimo passaggio.

1. Individua la traccia personalizzata del passaggio precedente (definita nel file src/index.js).
2. Aggiungi la seguente riga sotto TODO per registrare le dimensioni dell'immagine caricata.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Questa metrica consente al monitoraggio delle prestazioni di registrare la durata della traccia personalizzata e le dimensioni dell'immagine caricata.

8. Aggiungere un attributo personalizzato all'app

Basandoti sui passaggi precedenti, puoi anche raccogliere attributi personalizzati nelle tracce personalizzate. Gli attributi personalizzati possono essere utili per segmentare i dati in base a categorie specifiche della tua app. Ad esempio, puoi raccogliere il tipo MIME del file immagine per capire in che modo il tipo MIME potrebbe influire sulle prestazioni.

1. Usa la traccia personalizzata definita nel tuo file src/index.js.
2. Aggiungi la riga seguente sotto TODO per registrare il tipo MIME dell'immagine caricata.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Questo attributo consente al monitoraggio del rendimento di classificare la durata della traccia personalizzata in base al tipo di immagine caricata.

9. [Estensione] Aggiungere una traccia personalizzata con l'API User Timing

L'SDK Firebase Performance Monitoring è stato progettato in modo da poter essere caricato in modo asincrono, senza influire negativamente sulle prestazioni delle app web durante il caricamento della pagina. Prima del caricamento dell'SDK, l'API Firebase Performance Monitoring non è disponibile. In questo scenario, puoi comunque aggiungere tracce personalizzate utilizzando l'API User Timing. L'SDK Firebase Performance rileva le durate da measure() e le registra come tracce personalizzate.

Misureremo la durata del caricamento degli script di stile delle app usando l'API User Timing.

1. Nel file public/index.html, aggiungi la seguente riga per contrassegnare l'inizio del caricamento degli script di stile dell'app.

indice.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. Aggiungi le seguenti righe per contrassegnare la fine del caricamento degli script di stile dell'app e per misurare la durata tra l'inizio e la fine.

indice.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

La voce che hai creato qui verrà raccolta automaticamente da Firebase Performance Monitoring. In seguito, potrai trovare una traccia personalizzata denominata loadStyling nella Console Firebase Performance.

10. Esegui il deployment e inizia a inviare le immagini

Eseguire il deployment su Firebase Hosting

Dopo aver aggiunto Firebase Performance Monitoring al codice, segui questi passaggi per eseguire il deployment del codice su Firebase Hosting:

1. Assicurati che la riga di comando acceda alla directory performance-monitoring-start locale dell'app.
2. Esegui il comando seguente per eseguire il deployment dei file nel tuo progetto Firebase:

firebase deploy

3. Nella console dovrebbe essere visualizzato quanto segue:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. Visita la tua app web interamente ospitata utilizzando Firebase Hosting in due dei tuoi sottodomini Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app.

Verificare che il monitoraggio del rendimento sia attivato

Apri la Console Firebase e vai alla scheda Rendimento. Se viene visualizzato il messaggio di benvenuto "SDK rilevato", significa che l'integrazione con Firebase Performance Monitoring è andata a buon fine.

Inviare un messaggio con immagine

Genera alcuni dati sul rendimento inviando immagini nella tua app di chat.

1. Dopo aver eseguito l'accesso all'app di chat, fai clic sul pulsante di caricamento dell'immagine .
2. Seleziona un file immagine utilizzando il selettore di file.
3. Prova a inviare più immagini (alcuni esempi sono archiviati in public/images/) in modo da poter testare la distribuzione delle metriche personalizzate e degli attributi personalizzati.

I nuovi messaggi dovrebbero essere visualizzati nell'interfaccia utente dell'app insieme alle immagini selezionate.

11. Monitorare la dashboard

Dopo aver eseguito il deployment della tua app web e aver inviato messaggi con immagine come utente, puoi esaminare i dati sul rendimento nella dashboard di monitoraggio del rendimento (nella console Firebase).

Nota: in genere i dati sul rendimento vengono visualizzati entro 12 ore. Se non visualizzi alcun risultato nella Console Firebase, ricontrolla in un secondo momento.

Accedere alla dashboard

1. Nella console Firebase, seleziona il progetto con la tua app Friendly Chat.
2. Nel riquadro a sinistra, individua la sezione Qualità e fai clic su Rendimento.

Rivedi i dati sul dispositivo

Una volta che il monitoraggio del rendimento ha elaborato i dati della tua app, vedrai delle schede nella parte superiore della dashboard. Se non visualizzi ancora dati o schede, ricontrolla più tardi.

1. Fai clic sulla scheda Sul dispositivo.

• La tabella Caricamenti pagina mostra le varie metriche sul rendimento raccolte automaticamente dal monitoraggio del rendimento durante il caricamento della pagina.
• La tabella Durata mostra le eventuali tracce personalizzate che hai definito nel codice dell'app.

2. Fai clic su saveImageMessage nella tabella Tempo di esecuzione per esaminare metriche specifiche per la traccia.

3. Fai clic su Aggregato per esaminare la distribuzione delle dimensioni delle immagini. Puoi visualizzare la metrica che hai aggiunto per misurare le dimensioni dell'immagine per questa traccia personalizzata.

4. Fai clic su Nel tempo accanto ad Aggrega nel passaggio precedente. Puoi anche visualizzare la durata della traccia personalizzata. Fai clic su Mostra altro per esaminare i dati raccolti in modo più dettagliato.

5. Nella pagina visualizzata, puoi segmentare i dati sulla durata in base al tipo MIME dell'immagine facendo clic su imageType. Questi dati specifici sono stati registrati a causa dell'attributo imageType che hai aggiunto alla traccia personalizzata.

Esamina i dati di rete

Una richiesta di rete HTTP/S è un report che acquisisce il tempo di risposta e le dimensioni del payload delle chiamate di rete.

1. Torna alla schermata principale della dashboard di monitoraggio del rendimento.
2. Fai clic sulla scheda Rete per visualizzare un elenco di voci di richiesta di rete per la tua app web.
3. Sfogliale per identificare le richieste lente e inizia a trovare una soluzione per migliorare le prestazioni della tua app.

12. Complimenti!

Hai attivato l'SDK Firebase per il monitoraggio delle prestazioni e hai raccolto tracce automatiche e personalizzate per misurare le prestazioni reali della tua app di chat.

Argomenti trattati:

• Aggiunta dell'SDK Firebase Performance Monitoring all'app web.
• Aggiunta di tracce personalizzate al codice.
• Registrazione di metriche personalizzate collegate alla traccia personalizzata.
• Segmentazione dei dati sul rendimento mediante attributi personalizzati.
• Scopri come utilizzare la dashboard di monitoraggio del rendimento per ottenere informazioni sulle prestazioni della tua app.

Scopri di più:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/