Surveillance des performances Firebase pour le Web

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez à utiliser la surveillance des performances de Firebase pour mesurer les performances d'une application Web de chat. Visitez https://fireperf-friendlychat.web.app/ pour voir une démo en direct.

3b1284f5144b54f6.png

Ce que vous apprendrez

  • Comment ajouter Firebase Performance Monitoring à votre application Web pour obtenir des métriques prêtes à l'emploi (chargement de la page et requêtes réseau).
  • Comment mesurer un morceau de code spécifique avec des traces personnalisées.
  • Comment enregistrer des métriques personnalisées supplémentaires liées à une trace personnalisée.
  • Comment segmenter davantage vos données de performances avec des attributs personnalisés.
  • Comment utiliser le tableau de bord de surveillance des performances pour comprendre les performances de votre application Web.

Ce dont vous aurez besoin

  • L'IDE ou l'éditeur de texte de votre choix, tel que WebStorm , Atom , Sublime ou VS Code
  • Un terminal/console
  • Un navigateur de votre choix, tel que Chrome
  • L'exemple de code de l'atelier de programmation (voir la section suivante de cet atelier de programmation pour savoir comment obtenir le code.)

2. Obtenez l'exemple de code

Clonez le dépôt GitHub de l'atelier de programmation à partir de la ligne de commande :

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

Alternativement, si vous n'avez pas installé git, vous pouvez télécharger le référentiel sous forme de fichier zip .

Importer l'application de démarrage

À l'aide de votre IDE, ouvrez ou importez le répertoire 📁 performance-monitoring-start à partir du référentiel cloné. Ce répertoire 📁 performance-monitoring-start contient le code de démarrage du codelab, qui est une application Web de chat.

3. Créer et configurer un projet Firebase

Créer un projet Firebase

  1. Dans la console Firebase , cliquez sur Ajouter un projet .
  2. Nommez votre projet Firebase FriendlyChat .

N'oubliez pas l'ID de projet pour votre projet Firebase.

  1. Cliquez sur Créer un projet .

Ajouter une application Web Firebase au projet

  1. Cliquez sur l'icône Internet 58d6543a156e56f9.png pour créer une nouvelle application Web Firebase.
  2. Enregistrez l'application avec le surnom Friendly Chat , puis cochez la case à côté de Configurer également l'hébergement Firebase pour cette application .
  3. Cliquez sur Enregistrer l'application .
  4. Cliquez sur les étapes restantes. Vous n'avez pas besoin de suivre les instructions à l'écran maintenant ; ceux-ci seront couverts dans les étapes ultérieures de cet atelier de programmation.

ea9ab0db531a104c.png

Activer la connexion Google pour l'authentification Firebase

Pour permettre aux utilisateurs de se connecter à l'application de chat avec leurs comptes Google, nous utiliserons la méthode de connexion Google .

Vous devrez activer la connexion Google :

  1. Dans la console Firebase, recherchez la section Développer dans le panneau de gauche.
  2. Cliquez sur Authentification , puis sur l'onglet Méthode de connexion ( accédez à la console ).
  3. Activez le fournisseur de connexion Google , puis cliquez sur Enregistrer .

7f3040a646c2e502.png

Activer Cloud Firestore

L'application Web utilise Cloud Firestore pour enregistrer les messages de chat et recevoir de nouveaux messages de chat.

Vous devrez activer Cloud Firestore :

  1. Dans la section Développer de la console Firebase, cliquez sur Base de données .
  2. Cliquez sur Créer une base de données dans le volet Cloud Firestore.
  3. Sélectionnez l'option Démarrer en mode test , puis cliquez sur Activer après avoir lu la clause de non-responsabilité concernant les règles de sécurité.

Le code de démarrage de cet atelier de programmation inclut des règles plus sécurisées. Nous les déploierons plus tard dans le codelab.

24bd1a097492eac6.png

Activer le stockage en nuage

L'application Web utilise Cloud Storage pour Firebase pour stocker, télécharger et partager des images.

Vous devez activer Cloud Storage :

  1. Dans la section Développer de la console Firebase, cliquez sur Stockage .
  2. Cliquez sur Commencer .
  3. Lisez la clause de non-responsabilité concernant les règles de sécurité de votre projet Firebase, puis cliquez sur Compris .

Le code de démarrage inclut une règle de sécurité de base, que nous déploierons plus tard dans l'atelier de programmation.

4. Installez l'interface de ligne de commande Firebase

L'interface de ligne de commande (CLI) Firebase vous permet d'utiliser Firebase Hosting pour servir votre application Web localement ainsi que pour déployer votre application Web sur votre projet Firebase.

  1. Installez l'interface de ligne de commande en suivant ces instructions dans la documentation Firebase.
  2. Vérifiez que la CLI a été correctement installée en exécutant la commande suivante dans un terminal :
firebase --version

Assurez-vous que votre version de la CLI Firebase est v8.0.0 ou ultérieure.

  1. Autorisez la CLI Firebase en exécutant la commande suivante :
firebase login

Nous avons configuré le modèle d'application Web pour extraire la configuration de votre application pour l'hébergement Firebase à partir du répertoire local de votre application (le référentiel que vous avez cloné précédemment dans l'atelier de programmation). Mais pour extraire la configuration, nous devons associer votre application à votre projet Firebase.

  1. Assurez-vous que votre ligne de commande accède au répertoire local performance-monitoring-start de votre application.
  2. Associez votre application à votre projet Firebase en exécutant la commande suivante :
firebase use --add
  1. Lorsque vous y êtes invité, sélectionnez votre ID de projet, puis attribuez un alias à votre projet Firebase.

Un alias est utile si vous avez plusieurs environnements (production, staging, etc.). Cependant, pour cet atelier de programmation, utilisons simplement l'alias de default .

  1. Suivez les instructions restantes dans votre ligne de commande.

5. Intégration avec Firebase Performance Monitoring

Il existe différentes manières d'intégrer le SDK de surveillance des performances Firebase pour le Web (reportez-vous à la documentation pour plus de détails). Dans cet atelier de programmation, nous allons activer la surveillance des performances à partir des URL d'hébergement .

Ajouter la surveillance des performances et initialiser Firebase

  1. Ouvrez le fichier src/index.js , puis ajoutez la ligne suivante sous le TODO pour inclure le SDK de surveillance des performances Firebase.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Nous devons également initialiser le SDK Firebase avec un objet de configuration contenant des informations sur le projet Firebase et l'application Web que nous souhaitons utiliser. Puisque nous utilisons Firebase Hosting, vous pouvez importer un script spécial qui effectuera cette configuration pour vous. Pour cet atelier de programmation, nous avons déjà ajouté la ligne suivante pour vous au bas du fichier public/index.html , mais vérifiez bien qu'elle s'y trouve.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Dans le fichier src/index.js , ajoutez la ligne suivante sous le TODO pour initialiser la surveillance des performances.

index.js

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

La surveillance des performances collectera désormais automatiquement les métriques de charge de page et de demande de réseau pour vous lorsque les utilisateurs utiliseront votre site ! Reportez-vous à la documentation pour en savoir plus sur les traces de chargement automatique des pages.

Ajouter la première bibliothèque polyfill de délai d'entrée

Le délai de première saisie est utile car le navigateur répondant à une interaction de l'utilisateur donne aux utilisateurs leurs premières impressions sur la réactivité de votre application.

Le premier délai de saisie commence lorsque l'utilisateur interagit pour la première fois avec un élément de la page, par exemple en cliquant sur un bouton ou un lien hypertexte. Il s'arrête immédiatement après que le navigateur est en mesure de répondre à l'entrée, ce qui signifie que le navigateur n'est pas occupé à charger ou à analyser votre contenu.

Cette bibliothèque polyfill est facultative pour l'intégration de la surveillance des performances.

Ouvrez le fichier public/index.html , puis décommentez la ligne suivante.

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>

À ce stade, vous avez terminé l'intégration avec Firebase Performance Monitoring dans votre code !

Dans les étapes suivantes, vous apprendrez à ajouter des traces personnalisées à l'aide de Firebase Performance Monitoring. Si vous souhaitez uniquement collecter les traces automatiques, rendez-vous dans la section "Déployer et commencer à envoyer des images".

6. Ajoutez une trace personnalisée à votre application

La surveillance des performances vous permet de créer des traces personnalisées . Une trace personnalisée est un rapport pour la durée d'un bloc d'exécution dans votre application. Vous définissez le début et la fin d'une trace personnalisée à l'aide des API fournies par le SDK.

  1. Dans le fichier src/index.js , obtenez un objet de performance, puis créez une trace personnalisée pour télécharger un message image.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Pour enregistrer une trace personnalisée, vous devez spécifier le point de départ et le point d'arrêt de la trace. Vous pouvez considérer une trace comme une minuterie.

index.js

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

 ...

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

Vous avez défini avec succès une trace personnalisée ! Après avoir déployé votre code, la durée de la trace personnalisée sera enregistrée si un utilisateur envoie un message image. Cela vous donnera une idée du temps qu'il faut aux utilisateurs du monde réel pour envoyer des images dans votre application de chat.

7. Ajoutez une métrique personnalisée à votre application.

Vous pouvez également configurer une trace personnalisée pour enregistrer des métriques personnalisées pour les événements liés aux performances qui se produisent dans sa portée. Par exemple, vous pouvez utiliser une métrique pour déterminer si le temps de téléchargement est affecté par la taille d'une image pour la trace personnalisée que nous avons définie à la dernière étape.

  1. Localisez la trace personnalisée de l'étape précédente (définie dans votre fichier src/index.js ).
  2. Ajoutez la ligne suivante sous le TODO pour enregistrer la taille de l'image téléchargée.

index.js

 ...

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

 ...

Cette métrique permet à la surveillance des performances d'enregistrer la durée de la trace personnalisée ainsi que la taille de l'image téléchargée.

8. Ajoutez un attribut personnalisé à votre application

En vous basant sur les étapes précédentes, vous pouvez également collecter des attributs personnalisés sur vos traces personnalisées . Les attributs personnalisés peuvent aider à segmenter les données par catégories spécifiques à votre application. Par exemple, vous pouvez collecter le type MIME du fichier image pour étudier comment le type MIME peut affecter les performances.

  1. Utilisez la trace personnalisée définie dans votre fichier src/index.js .
  2. Ajoutez la ligne suivante sous TODO pour enregistrer le type MIME de l'image téléchargée.

index.js

 ...

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

 ...

Cet attribut permet à la surveillance des performances de catégoriser la durée de trace personnalisée en fonction du type d'image téléchargé.

9. [Étendre] Ajouter une trace personnalisée avec l'API User Timing

Le SDK de surveillance des performances de Firebase a été conçu pour pouvoir être chargé de manière asynchrone, afin de ne pas avoir d'impact négatif sur les performances des applications Web lors du chargement de la page. Avant le chargement du SDK, l'API Firebase Performance Monitoring n'est pas disponible. Dans ce scénario, vous pouvez toujours ajouter des traces personnalisées à l'aide de l' API User Timing . Le SDK de performance Firebase récupère les durées de measure() et les consigne en tant que traces personnalisées.

Nous allons mesurer la durée de chargement des scripts de style d'application à l'aide de l'API User Timing.

  1. Dans le fichier public/index.html , ajoutez la ligne suivante pour marquer le début du chargement des scripts de style d'application.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Ajoutez les lignes suivantes pour marquer la fin du chargement des scripts de style d'application et pour mesurer la durée entre le début et la fin.

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>

L'entrée que vous avez créée ici sera automatiquement collectée par Firebase Performance Monitoring. Vous pourrez trouver ultérieurement une trace personnalisée appelée loadStyling dans la console Firebase Performance.

10. Déployez et commencez à envoyer des images

Déployer sur l'hébergement Firebase

Après avoir ajouté Firebase Performance Monitoring à votre code, suivez ces étapes pour déployer votre code sur Firebase Hosting :

  1. Assurez-vous que votre ligne de commande accède au répertoire local performance-monitoring-start de votre application.
  2. Déployez vos fichiers dans votre projet Firebase en exécutant la commande suivante :
firebase deploy
  1. La console doit afficher les éléments suivants :
=== 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. Visitez votre application Web qui est désormais entièrement hébergée à l'aide de Firebase Hosting sur deux de vos propres sous-domaines Firebase : https://<projectId>.firebaseapp.com et https://<projectId>.web.app .

Vérifier que la surveillance des performances est activée

Ouvrez la console Firebase et accédez à l'onglet Performances . Si vous voyez un message de bienvenue indiquant "SDK détecté", alors vous avez réussi l'intégration avec Firebase Performance Monitoring !

30df67e5a07d03b0.png

Envoyer un message image

Générez des données de performance en envoyant des images dans votre application de chat.

  1. Après vous être connecté à votre application de chat, cliquez sur le bouton de téléchargement d'image 13734cb66773e5a3.png .
  2. Sélectionnez un fichier image à l'aide du sélecteur de fichiers.
  3. Essayez d'envoyer plusieurs images (quelques échantillons sont stockés dans public/images/ ) afin de pouvoir tester la distribution des métriques personnalisées et des attributs personnalisés.

Les nouveaux messages doivent s'afficher dans l'interface utilisateur de l'application avec vos images sélectionnées.

11. Surveillez le tableau de bord

Après avoir déployé votre application Web et envoyé des messages image en tant qu'utilisateur, vous pouvez consulter les données de performances dans le tableau de bord de surveillance des performances (dans la console Firebase).

Accédez à votre tableau de bord

  1. Dans la console Firebase , sélectionnez le projet qui contient votre application Friendly Chat .
  2. Dans le panneau de gauche, recherchez la section Qualité et cliquez sur Performances .

Examiner les données sur l'appareil

Une fois que la surveillance des performances a traité les données de votre application, vous verrez des onglets en haut du tableau de bord. Assurez-vous de revenir plus tard si vous ne voyez pas encore de données ou d'onglets.

  1. Cliquez sur l'onglet Sur l'appareil .
  • Le tableau des chargements de page affiche les différentes mesures de performances que la surveillance des performances collecte automatiquement pendant le chargement de votre page.
  • Le tableau Durées affiche toutes les traces personnalisées que vous avez définies dans le code de votre application.
  1. Cliquez sur saveImageMessage dans le tableau Durées pour examiner des métriques spécifiques pour la trace.

e28758fd02d9ffac.png

  1. Cliquez sur Agréger pour examiner la distribution des tailles d'image. Vous pouvez voir la métrique que vous avez ajoutée pour mesurer la taille de l'image pour cette trace personnalisée.

c3cbcfc0c739a0a8.png

  1. Cliquez sur Au fil du temps qui se trouve à côté de Agréger à l'étape précédente. Vous pouvez également afficher la durée de la trace personnalisée. Cliquez sur Afficher plus pour examiner les données collectées plus en détail.

16983baa31e05732.png

  1. Dans la page qui s'ouvre, vous pouvez segmenter les données de durée par type MIME d'image en cliquant sur imageType . Ces données spécifiques ont été enregistrées en raison de l'attribut imageType que vous avez ajouté à votre trace personnalisée.

8e5c9f32f42a1ca1.png

Examiner les données du réseau

Une requête réseau HTTP/S est un rapport qui capture le temps de réponse et la taille de la charge utile des appels réseau.

  1. Revenez à l'écran principal du tableau de bord de suivi des performances.
  2. Cliquez sur l'onglet Réseau pour afficher une liste des entrées de demande de réseau pour votre application Web.
  3. Parcourez-les pour identifier les requêtes lentes et commencez à travailler sur un correctif pour améliorer les performances de votre application !

26a2be152a77ffb9.png

12. Félicitations !

Vous avez activé le SDK Firebase pour la surveillance des performances et collecté des traces automatiques et des traces personnalisées pour mesurer les performances réelles de votre application de chat !

Ce que nous avons couvert :

  • Ajout du SDK de surveillance des performances Firebase à votre application Web.
  • Ajout de traces personnalisées à votre code.
  • Enregistrement de métriques personnalisées liées à la trace personnalisée.
  • Segmentation des données de performance à l'aide d'attributs personnalisés.
  • Comprendre comment utiliser le tableau de bord de surveillance des performances pour obtenir des informations sur les performances de votre application.

Apprendre encore plus: