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 è pensato come un sequel del codelab Firebase web in cui impari a creare un'app di chat utilizzando l'SDK Firebase Web. Se vuoi scoprire come utilizzare la piattaforma Firebase sul web creando un'app di chat, segui prima il codelab Firebase web. 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 di monitoraggio delle prestazioni per comprendere il rendimento 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 di esempio del codelab (vedi la sezione successiva di questo codelab per scoprire come ottenere il codice).

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: se vuoi eseguire l'app completata, dovrai comunque creare un progetto Firebase nella Console Firebase.

Importare 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 del codelab, ovvero 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 un nome al progetto Firebase FriendlyChat.

Ricorda l'ID progetto per il tuo 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 viene identificato il progetto (anche nella CLI), mentre FriendlyChat è semplicemente un nome visualizzato.

Eseguire l'upgrade del piano tariffario di Firebase

Per utilizzare Cloud Storage for Firebase, il progetto Firebase deve utilizzare il piano tariffario Blaze (pagamento a consumo), il che significa che deve essere 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 senza costi.
• Se stai svolgendo questo codelab nell'ambito di un evento, chiedi all'organizzatore se sono disponibili crediti Cloud.

Per eseguire l'upgrade del progetto al piano Blaze:

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 tuo progetto.
   Se hai dovuto creare un account di fatturazione Cloud nell'ambito di questo upgrade, potresti dover tornare al flusso di upgrade nella console Firebase per completarlo.

Nota: puoi eseguire il downgrade del progetto al piano tariffario Spark senza costi aggiuntivi 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. Segui i 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.

Configurare 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 Build e seleziona Database Firestore.
2. Fai clic su Crea database.
3. Lascia l'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 relativo alle regole di sicurezza.
   Più avanti in questo codelab, aggiungerai le 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.

Configurare Cloud Storage for 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 Build e seleziona Archiviazione.
2. Fai clic su Inizia.
3. Seleziona una posizione per il bucket di archiviazione predefinito.
   I bucket in US-WEST1, US-CENTRAL1 e US-EAST1 possono usufruire del livello"Sempre senza costi" per Google Cloud Storage. I bucket in tutte le altre località rispettano 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 di eseguirne il deployment nel tuo progetto Firebase.

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

firebase --version

Assicurati di utilizzare la versione 8.0.0 o successive dell'interfaccia a riga di comando di Firebase.

3. Autorizza Firebase CLI eseguendo il seguente 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 la tua app al progetto Firebase eseguendo il seguente 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. Eseguire l'integrazione con Firebase Performance Monitoring

Esistono diversi modi per eseguire l'integrazione con l'SDK Firebase Performance Monitoring per il web (per maggiori dettagli, consulta la documentazione). In questo codelab, attiveremo il monitoraggio del rendimento dagli URL di hosting.

Aggiungi il monitoraggio delle prestazioni e inizializza 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 riga seguente alla fine del 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 del rendimento.

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. Consulta la documentazione per saperne di più sulle tracce di caricamento automatico delle pagine.

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.

index.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 informazioni dettagliate, vedi Guida introduttiva al monitoraggio del rendimento per il web.

Nei passaggi che seguono 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. Aggiungere una traccia personalizzata all'app

Il monitoraggio delle prestazioni ti consente di creare tracce personalizzate. Una traccia personalizzata è un report per la durata di un blocco di esecuzione nell'app. Definisci l'inizio e la fine di una traccia personalizzata utilizzando le API fornite dall'SDK.

1. Nel file src/index.js, ottieni 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. Dopo aver implementato il codice, la durata della traccia personalizzata verrà registrata se un utente invia un messaggio con 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 traccia personalizzata per registrare metriche personalizzate per gli eventi relativi al rendimento 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 che abbiamo definito 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 aiutarti a segmentare i dati in base a categorie specifiche per la tua app. Ad esempio, puoi raccogliere il tipo MIME del file immagine per esaminare in che modo il tipo MIME potrebbe influire sul rendimento.

1. Utilizza la traccia personalizzata definita nel file src/index.js.
2. Aggiungi la seguente riga 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 per poter essere caricato in modo asincrono e non 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 acquisirà le durate da measure() e le registrerà come tracce personalizzate.

Misureremo la durata del caricamento degli script di stile dell'app utilizzando 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.

index.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.

index.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 un secondo momento, nella console Firebase Performance potrai trovare una traccia personalizzata denominata loadStyling.

10. Esegui il deployment e inizia a inviare le immagini

Esegui il deployment in 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 deployment dei file nel progetto Firebase eseguendo il seguente comando:

firebase deploy

3. La console dovrebbe mostrare 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, ora completamente ospitata utilizzando Firebase Hosting, su due dei tuoi sottodomini Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app.

Verificare che il monitoraggio delle prestazioni sia attivo

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 nell'app di chat.

1. Dopo aver eseguito l'accesso all'app di chat, fai clic sul pulsante di caricamento delle immagini .
2. Seleziona un file immagine utilizzando il selettore di file.
3. Prova a inviare più immagini (alcuni esempi sono memorizzati in public/images/) per testare la distribuzione delle metriche 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 dell'app web e aver inviato messaggi con immagini come utente, puoi esaminare i dati sulle prestazioni nella dashboard di monitoraggio delle prestazioni (nella Console Firebase).

Nota: in genere i dati sul rendimento vengono visualizzati entro 12 ore. Se non visualizzi risultati nella Console Firebase, torna a controllare in un secondo momento.

Accedere alla dashboard

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

Controllare 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 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 vedere la metrica che hai aggiunto per misurare le dimensioni delle immagini per questa traccia personalizzata.

4. Fai clic su Nel tempo accanto a Aggregato nel passaggio precedente. Puoi anche visualizzare la durata della traccia personalizzata. Fai clic su Visualizza 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 iniziare a lavorare a una correzione 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 associate alla traccia personalizzata.
• Segmentare i dati sul rendimento utilizzando 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/