Premiers pas avec Performance Monitoring pour le Web

Avant de commencer

Si ce n'est pas encore fait, consultez Ajouter Firebase à votre projet JavaScript pour découvrir comment:

  • Créer un projet Firebase

  • Enregistrer votre application Web auprès de Firebase

Notez que lorsque vous ajoutez Firebase à votre application, vous pouvez suivre certaines des étapes décrites plus loin sur cette page (par exemple, ajouter le SDK et initialiser Firebase).

Étape 1: Ajoutez et initialisez Performance Monitoring

  1. Si ce n'est pas déjà fait, installez le SDK JS Firebase et initialisez Firebase.

  2. Ajoutez le SDK JavaScript Performance Monitoring et initialisez Performance Monitoring:

Web 

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

Étape 2: Ajoutez la première bibliothèque de polyfill de délai d'entrée

Pour mesurer la métrique de délai de première entrée, vous devez ajouter la bibliothèque de polyfill pour cette métrique. Pour obtenir des instructions d'installation, consultez la documentation de la bibliothèque.

L'ajout de cette bibliothèque de polyfill n'est pas nécessaire pour que Performance Monitoring signale les autres métriques de l'application Web.

Étape 3: Générer des événements de performances pour l'affichage initial des données

Firebase commence à traiter les événements lorsque vous avez correctement ajouté le SDK à votre application. Si vous êtes toujours en cours de développement local, interagissez avec votre application pour générer des événements afin de collecter et de traiter les données de manière initiale.

  1. Diffuser et afficher votre application Web dans un environnement local

  2. Générez des événements en chargeant des sous-pages de votre site, en interagissant avec votre application et/ou en déclenchant des requêtes réseau. Veillez à laisser l'onglet du navigateur ouvert pendant au moins 10 secondes après le chargement de la page.

  3. Accédez au tableau de bord des performances de la console Firebase. Vos données initiales devraient s'afficher au bout de quelques minutes.

    Si vos données initiales ne s'affichent pas, consultez les conseils de dépannage.

Étape 4: (Facultatif) Afficher les messages de journal pour les événements de performances

  1. Ouvrez les outils pour les développeurs de votre navigateur (par exemple, l'onglet Network (Réseau) pour les outils pour les développeurs Chrome ou Network Monitor (Surveillance du réseau) pour Firefox).

  2. Actualisez votre application Web dans le navigateur.

  3. Recherchez d'éventuels messages d'erreur dans les messages de journal.

  4. Après quelques secondes, recherchez un appel réseau à firebaselogging.googleapis.com dans les outils pour les développeurs de votre navigateur. La présence de cet appel réseau montre que le navigateur envoie des données de performances à Firebase.

Si votre application ne consigne pas d'événements de performances, consultez les conseils de dépannage.

Étape 5: (Facultatif) Ajouter une surveillance personnalisée pour un code spécifique

Pour surveiller les données de performances associées à un code spécifique de votre application, vous pouvez instrumenter des traces de code personnalisées.

Avec une trace de code personnalisée, vous pouvez mesurer le temps nécessaire à votre application pour effectuer une tâche ou un ensemble de tâches spécifiques, comme charger un ensemble d'images ou interroger votre base de données. La métrique par défaut d'une trace de code personnalisée est sa durée, mais vous pouvez également ajouter des métriques personnalisées, telles que les éventuelles requêtes du cache et les avertissements de mémoire.

Dans votre code, vous définissez le début et la fin d'une trace de code personnalisée (et ajoutez les métriques personnalisées souhaitées) à l'aide de l'API fournie par le SDK Performance Monitoring.

Consultez Ajouter la surveillance d'un code spécifique pour en savoir plus sur ces fonctionnalités et découvrir comment les ajouter à votre application.

Étape 6: Déployez votre application, puis examinez les résultats

Une fois que vous avez validé Performance Monitoring, vous pouvez déployer la version mise à jour de votre application auprès de vos utilisateurs.

Vous pouvez surveiller les données de performances dans le tableau de bord "Performances" de la console Firebase.

Étapes suivantes