Monitoraggio delle prestazioni di Firebase per il web

1. Panoramica

In questo codelab imparerai come utilizzare il monitoraggio delle prestazioni di Firebase 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 il monitoraggio delle prestazioni di Firebase alla tua app Web per ottenere metriche predefinite (caricamento della pagina e richieste di rete).
  • Come misurare uno specifico pezzo 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 il dashboard di monitoraggio delle prestazioni per comprendere le prestazioni dell'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 (consulta 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 di avviamento

Usando il tuo 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

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 l'hosting Firebase per questa app .
  3. Fare clic su Registra app .
  4. Fai clic sui passaggi rimanenti. Non è necessario seguire le istruzioni sullo schermo ora; questi saranno 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. Fare clic su Autenticazione , quindi fare clic sulla scheda Metodo di accesso ( vai alla console ).
  3. Abilita il provider di accesso di 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. Seleziona l'opzione Avvia in modalità test , quindi fai clic su Abilita dopo aver letto il disclaimer sulle regole di sicurezza.

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

24bd1a097492eac6.png

Abilita archiviazione cloud

L'app Web utilizza Cloud Storage per 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 il disclaimer 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 verrà distribuita 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 al tuo progetto Firebase.

  1. Installa la CLI seguendo queste istruzioni nei documenti di Firebase.
  2. Verificare che la CLI sia stata installata correttamente eseguendo il seguente comando in un terminale:
firebase --version

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

  1. Autorizza l'interfaccia a riga di comando di Firebase eseguendo il comando seguente:
firebase login

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

  1. Assicurati che la tua 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 il tuo ID progetto, quindi assegna un alias al tuo progetto Firebase.

Un alias è utile se hai 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 di Firebase

Esistono vari modi per integrarsi con l'SDK di monitoraggio delle prestazioni di Firebase 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.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. È inoltre necessario inizializzare l'SDK Firebase con un oggetto di configurazione che contenga informazioni sul progetto Firebase e sull'app Web che desideriamo utilizzare. Poiché utilizziamo Firebase Hosting, puoi importare uno script speciale che eseguirà questa configurazione per te. Per questo codelab, abbiamo già aggiunto per te la seguente riga nella parte inferiore del file public/index.html , ma verifica che sia presente.

indice.html

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

index.js

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

Il monitoraggio delle prestazioni ora raccoglierà automaticamente le metriche del caricamento della pagina e delle richieste di rete per te 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 di polyfill con ritardo di input

Il primo ritardo di input è utile poiché il browser che risponde a un'interazione dell'utente offre 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 un collegamento ipertestuale. Si interrompe immediatamente dopo che il browser è in grado di rispondere all'input, il che significa che il browser non è occupato 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 terminato l'integrazione con Firebase Performance Monitoring nel tuo codice!

Nei passaggi seguenti, imparerai come aggiungere tracce personalizzate utilizzando Firebase Performance Monitoring. Se vuoi 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 rapporto per la durata di un blocco di esecuzione nell'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 performance, quindi crea una traccia personalizzata per caricare un messaggio immagine.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Per registrare una traccia personalizzata, è necessario specificare il punto di partenza e il punto di arresto per la 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 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 metriche personalizzate per eventi relativi alle prestazioni che si verificano all'interno del 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 riga seguente 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. Aggiungi un attributo personalizzato alla tua app

Sulla base dei passaggi precedenti, puoi anche raccogliere attributi personalizzati sulle tue tracce personalizzate . Gli attributi personalizzati possono aiutare 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 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 delle prestazioni di classificare la durata della traccia personalizzata in base al tipo di immagine caricato.

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

L'SDK di monitoraggio delle prestazioni di Firebase è stato progettato in modo che potesse essere caricato in modo asincrono e quindi non avrebbe un impatto negativo 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 usando 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 , aggiungi 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 righe seguenti 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à automaticamente raccolta da Firebase Performance Monitoring. Sarai in grado di trovare una traccia personalizzata chiamata loadStyling nella console Firebase Performance in un secondo momento.

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 tua 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 viene visualizzato un messaggio di benvenuto che mostra "Rilevato SDK", significa che hai integrato correttamente 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 campioni sono archiviati in public/images/ ) in modo da poter testare la distribuzione di metriche personalizzate e attributi personalizzati.

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

11. Monitorare la dashboard

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

Accedi alla tua dashboard

  1. Nella console Firebase , seleziona il progetto che ha 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 dei caricamenti della pagina mostra le varie metriche delle prestazioni 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. Fare clic su saveImageMessage nella tabella Durate per rivedere le metriche specifiche per la traccia.

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

  1. Fare clic su Nel tempo accanto ad Aggrega nel passaggio precedente. È inoltre possibile visualizzare la Durata della traccia personalizzata. Fare clic su Visualizza altro per rivedere i dati raccolti in modo più dettagliato.

16983baa31e05732.png

  1. Nella pagina che si apre, puoi segmentare i dati di durata per tipo di immagine MIME facendo clic su imageType . Questi dati specifici sono stati registrati a causa dell'attributo imageType che hai aggiunto alla traccia personalizzata.

8e5c9f32f42a1ca1.png

Rivedere i dati di rete

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

  1. Torna alla schermata principale della dashboard di monitoraggio delle prestazioni.
  2. Fare clic sulla scheda Rete per visualizzare un elenco di voci di richiesta di rete per l'app Web.
  3. Sfogliali per identificare le richieste lente e inizia 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 hai raccolto tracce automatiche e tracce personalizzate per misurare le prestazioni reali della tua app di chat!

Cosa abbiamo trattato:

  • Aggiunta dell'SDK di monitoraggio delle prestazioni di Firebase 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 il dashboard di monitoraggio delle prestazioni per ottenere informazioni dettagliate sulle prestazioni della tua app.

Scopri di più: