Monitoraggio delle prestazioni Firebase per il Web

1. Panoramica

In questo codelab imparerai come utilizzare Firebase Performance Monitoring per misurare le prestazioni di un'app Web di chat. Visita https://fireperf-friendlychat.web.app/ per vedere una demo dal vivo.

3b1284f5144b54f6.png

Cosa imparerai

  • Come aggiungere Firebase Performance Monitoring alla tua app Web per ottenere metriche pronte all'uso (caricamento della pagina e richieste di rete).
  • Come misurare una porzione specifica di codice con tracce personalizzate.
  • Come registrare metriche personalizzate aggiuntive legate a una traccia personalizzata.
  • Come segmentare ulteriormente i dati sul rendimento con attributi personalizzati.
  • Come utilizzare la dashboard di monitoraggio delle prestazioni per comprendere le prestazioni della tua app Web.

Di cosa avrai bisogno

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

2. Ottieni il codice di esempio

Clona il repository GitHub del codelab dalla riga di comando:

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

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

Importa l'app iniziale

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

3. Crea e configura un progetto Firebase

Crea un progetto Firebase

  1. Nella console Firebase , fai clic su Aggiungi progetto .
  2. Assegna un nome al tuo progetto Firebase FriendlyChat .

Ricorda l'ID progetto per il tuo progetto Firebase.

  1. Fare clic su Crea progetto .

Aggiungi un'app Web Firebase al progetto

  1. Fare clic sull'icona Web 58d6543a156e56f9.png 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 visualizzate sullo schermo adesso; questi verranno trattati nei passaggi successivi di questo codelab.

ea9ab0db531a104c.png

Abilita l'accesso a 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 di Google .

Dovrai abilitare l'accesso a Google :

  1. Nella console Firebase, individua la sezione Sviluppo nel pannello di sinistra.
  2. Fai clic su Autenticazione , quindi sulla scheda Metodo di accesso ( vai alla console ).
  3. Abilita il provider di accesso Google , quindi fai clic su Salva .

7f3040a646c2e502.png

Abilita Cloud Firestore

L'app Web utilizza Cloud Firestore per salvare i messaggi di chat e ricevere nuovi messaggi di chat.

Dovrai abilitare Cloud Firestore:

  1. Nella sezione Sviluppo della console Firebase, fai clic su Database .
  2. Fai clic su Crea database nel riquadro Cloud Firestore.
  3. Selezionare l'opzione Avvia in modalità test , quindi fare clic su Abilita dopo aver letto la dichiarazione di non responsabilità sulle regole di sicurezza.

Il codice iniziale per questo codelab include regole più sicure. Li distribuiremo più tardi nel codelab.

24bd1a097492eac6.png

Abilita archiviazione cloud

L'app Web utilizza Cloud Storage for Firebase per archiviare, caricare e condividere immagini.

Dovrai abilitare Cloud Storage:

  1. Nella sezione Sviluppo della console Firebase, fai clic su Archiviazione .
  2. Fare clic su Inizia .
  3. Leggi la dichiarazione di non responsabilità sulle regole di sicurezza per il tuo progetto Firebase, quindi fai clic su OK .

Il codice iniziale include una regola di sicurezza di base, che implementeremo più avanti nel codelab.

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

L'interfaccia della riga di comando (CLI) di Firebase ti consente di utilizzare Firebase Hosting per servire la tua app Web localmente e per distribuire la tua app Web nel tuo progetto Firebase.

  1. Installa la CLI seguendo queste istruzioni nella documentazione Firebase.
  2. Verifica che la CLI sia stata installata correttamente eseguendo il seguente comando in un terminale:
firebase --version

Assicurati che la tua versione della CLI Firebase sia v8.0.0 o successiva.

  1. Autorizza la CLI Firebase eseguendo il comando seguente:
firebase login

Abbiamo configurato il modello dell'app Web per estrarre la configurazione della tua app per Firebase Hosting dalla directory locale della tua app (il repository che hai clonato in precedenza nel codelab). Ma per eseguire il pull della configurazione, dobbiamo associare la tua app al tuo progetto Firebase.

  1. Assicurati che la riga di comando acceda alla directory performance-monitoring-start locale dell'app.
  2. Associa la tua app al tuo progetto Firebase eseguendo il comando seguente:
firebase use --add
  1. Quando richiesto, seleziona l'ID del tuo progetto, quindi assegna un alias al tuo progetto Firebase.

Un alias è utile se disponi di più ambienti (produzione, staging, ecc.). Tuttavia, per questo codelab, utilizziamo semplicemente l'alias di default .

  1. Segui le restanti istruzioni nella riga di comando.

5. Integrazione con il monitoraggio delle prestazioni Firebase

Esistono vari modi per integrarsi con Firebase Performance Monitoring SDK per il Web (fare riferimento alla documentazione per i dettagli). In questo codelab abiliteremo il monitoraggio delle prestazioni dagli URL di hosting .

Aggiungi il monitoraggio delle prestazioni e inizializza Firebase

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

indice.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Dobbiamo anche 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 controlla attentamente che sia lì.

indice.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Nel file src/index.js , aggiungi la seguente riga sotto TODO per inizializzare il monitoraggio delle prestazioni.

indice.js

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

Il monitoraggio delle prestazioni ora raccoglierà automaticamente i parametri relativi al caricamento della pagina e alle richieste di rete quando gli utenti utilizzano il tuo sito! Fare riferimento alla documentazione per ulteriori informazioni sulle tracce di caricamento automatico delle pagine.

Aggiungi la prima libreria polyfill del ritardo di input

Il primo ritardo di input è utile poiché il browser che risponde all'interazione dell'utente fornisce agli utenti le prime impressioni sulla reattività della tua app.

Il primo ritardo di input inizia quando l'utente interagisce per la prima volta con un elemento della pagina, ad esempio facendo clic su un pulsante o su 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.

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

Apri il file public/index.html , quindi decommenta la 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 con Firebase Performance Monitoring nel tuo codice!

Nei passaggi seguenti imparerai come aggiungere tracce personalizzate utilizzando Firebase Performance Monitoring. Se desideri raccogliere solo le tracce automatiche, vai alla sezione "Distribuisci e inizia a inviare immagini".

6. Aggiungi una traccia personalizzata alla tua app

Il monitoraggio delle prestazioni 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 , ottieni un oggetto prestazione, quindi crea una traccia personalizzata per caricare un messaggio immagine.

indice.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Per registrare una traccia personalizzata, è necessario specificare il punto iniziale e il punto finale della traccia. Puoi pensare a una traccia come a un timer.

indice.js

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

 ...

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

Hai definito con successo una traccia personalizzata! Dopo aver distribuito il codice, la durata della traccia personalizzata verrà registrata se un utente invia un messaggio immagine. Questo ti darà un'idea di quanto tempo impiegano gli utenti del mondo reale per inviare immagini nella tua app di chat.

7. Aggiungi una metrica personalizzata alla tua app.

È possibile configurare ulteriormente una traccia personalizzata per registrare parametri personalizzati per eventi relativi alle prestazioni che si verificano nel suo ambito. Ad esempio, puoi utilizzare una metrica per verificare se il tempo di caricamento è influenzato dalla dimensione 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 la dimensione dell'immagine caricata.

indice.js

 ...

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

 ...

Questa metrica consente il monitoraggio delle prestazioni per registrare la durata della traccia personalizzata e la dimensione dell'immagine caricata.

8. Aggiungi un attributo personalizzato alla tua app

Basandosi sui passaggi precedenti, puoi anche raccogliere attributi personalizzati sulle tue tracce personalizzate . Gli attributi personalizzati possono aiutare a segmentare i dati in categorie specifiche della tua app. Ad esempio, puoi raccogliere il tipo MIME del file immagine per verificare in che modo il tipo MIME potrebbe influire sulle prestazioni.

  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.

indice.js

 ...

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

 ...

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

9. [Estendi] Aggiungi una traccia personalizzata con l'API User Timing

L'SDK Firebase Performance Monitoring è stato progettato in modo da poter essere caricato in modo asincrono e in modo da non influire negativamente sulle prestazioni delle app Web durante il caricamento della pagina. Prima che l'SDK venga caricato, l'API Firebase Performance Monitoring non è disponibile. In questo scenario, puoi ancora aggiungere tracce personalizzate utilizzando l' API User Timing . L'SDK delle prestazioni di Firebase raccoglierà le durate da Measure() e le registrerà come tracce personalizzate.

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

  1. Nel file public/index.html aggiungere la riga seguente 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>
  1. 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. Successivamente potrai trovare una traccia personalizzata chiamata loadStyling nella console Firebase Performance.

10. Distribuisci e inizia a inviare immagini

Distribuisci su Firebase Hosting

Dopo aver aggiunto Firebase Performance Monitoring al tuo codice, segui questi passaggi per distribuire il tuo codice su Firebase Hosting:

  1. Assicurati che la riga di comando acceda alla directory performance-monitoring-start locale dell'app.
  2. Distribuisci i tuoi file nel tuo progetto Firebase eseguendo il comando seguente:
firebase deploy
  1. La console dovrebbe visualizzare 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.appspot.com
✔  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
  1. Visita la tua app Web che ora è completamente ospitata utilizzando Firebase Hosting in due dei tuoi sottodomini Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app .

Verificare che il monitoraggio delle prestazioni sia abilitato

Apri la console Firebase e vai alla scheda Prestazioni . Se vedi un messaggio di benvenuto che mostra "SDK rilevato", hai eseguito correttamente l'integrazione con Firebase Performance Monitoring!

30df67e5a07d03b0.png

Invia messaggio immagine

Genera alcuni dati sulle prestazioni inviando immagini nella tua app di chat.

  1. Dopo aver effettuato l'accesso all'app di chat, fai clic sul pulsante di caricamento dell'immagine 13734cb66773e5a3.png .
  2. Seleziona un file immagine utilizzando il selettore file.
  3. Prova a inviare più immagini (alcuni esempi sono archiviati in public/images/ ) in modo da poter 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 il dashboard

Dopo aver distribuito la tua app Web e inviato messaggi immagine come utente, puoi esaminare i dati sulle prestazioni nel dashboard di monitoraggio delle prestazioni (nella console Firebase).

Accedi alla tua dashboard

  1. Nella console Firebase , seleziona il progetto che contiene la tua app Friendly Chat .
  2. Nel pannello di sinistra, individua la sezione Qualità e fai clic su Prestazioni .

Esamina i dati sul dispositivo

Dopo che il monitoraggio delle prestazioni ha elaborato i dati della tua app, vedrai le schede nella parte superiore della dashboard. Assicurati di ricontrollare più tardi se non vedi ancora dati o schede.

  1. Fare clic sulla scheda Sul dispositivo .
  • La tabella Caricamenti pagina mostra le varie metriche prestazionali che il monitoraggio delle prestazioni raccoglie automaticamente durante il caricamento della pagina.
  • La tabella Durate mostra tutte le tracce personalizzate che hai definito nel codice della tua app.
  1. Fai clic su saveImageMessage nella tabella Durations per rivedere le metriche specifiche per la traccia.

e28758fd02d9ffac.png

  1. Fai clic su Aggrega per esaminare la distribuzione delle dimensioni delle immagini. Puoi vedere la metrica che hai aggiunto per misurare la dimensione dell'immagine per questa traccia personalizzata.

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

  1. Nella pagina che si apre, 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.

8e5c9f32f42a1ca1.png

Esaminare i dati di rete

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

  1. Torna alla schermata principale del dashboard di monitoraggio delle prestazioni.
  2. Fai clic sulla scheda Rete per visualizzare un elenco di voci di richieste di rete per la tua app Web.
  3. Sfogliali per identificare le richieste lente e iniziare a lavorare su una soluzione per migliorare le prestazioni della tua app!

26a2be152a77ffb9.png

12. Congratulazioni!

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

Di cosa abbiamo parlato:

  • Aggiunta dell'SDK Firebase Performance Monitoring alla tua app Web.
  • Aggiunta di tracce personalizzate al tuo codice.
  • Registrazione di metriche personalizzate legate alla traccia personalizzata.
  • Segmentazione dei dati sulle prestazioni utilizzando attributi personalizzati.
  • Comprendere come utilizzare la dashboard di monitoraggio delle prestazioni per ottenere informazioni dettagliate sulle prestazioni della tua app.

Saperne di più: