Catch up on highlights from Firebase at Google I/O 2023. Learn more

Premiers pas avec la surveillance des performances pour le Web

Avant que tu commences

Si vous ne l'avez pas déjà fait, consultez Ajouter Firebase à votre projet JavaScript pour découvrir comment :

  • Créer un projet Firebase

  • Enregistrez votre application Web avec Firebase

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

Étape 1 : Ajouter et initialiser la surveillance des performances

  1. Si vous ne l'avez pas déjà fait, installez le SDK Firebase JS et initialisez Firebase .

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

API Web modulaire

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);

API d'espace de noms 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 polyfill de délai d'entrée

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

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

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

Firebase commence à traiter les événements lorsque vous ajoutez avec succès le SDK à votre application. Si vous développez encore localement, interagissez avec votre application pour générer des événements pour la collecte et le traitement initiaux des données.

  1. Servez et affichez votre application Web dans un environnement local.

  2. Générez des événements en chargeant des sous-pages pour votre site, en interagissant avec votre application et/ou en déclenchant des requêtes réseau. Assurez-vous de garder 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. Vous devriez voir vos données initiales s'afficher dans quelques minutes.

    Si vous ne voyez pas d'affichage de vos données initiales, consultez les conseils de dépannage .

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

  1. Ouvrez les outils de développement de votre navigateur (par exemple, l'onglet Réseau pour Chrome Dev Tools ou dans le Moniteur réseau pour Firefox ).

  2. Actualisez votre application Web dans le navigateur.

  3. Vérifiez vos messages de journal pour tout message d'erreur.

  4. Après quelques secondes, recherchez un appel réseau vers firebaselogging.googleapis.com dans les outils de développement 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 n'enregistre pas les événements de performance, consultez les conseils de dépannage .

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

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

Avec une trace de code personnalisée, vous pouvez mesurer le temps qu'il faut à votre application pour effectuer une tâche ou un ensemble de tâches spécifiques, comme le chargement d'un ensemble d'images ou l'interrogation de votre base de données. La métrique par défaut d'un suivi de code personnalisé est sa durée, mais vous pouvez également ajouter des métriques personnalisées, telles que des accès au cache et des avertissements de mémoire.

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

Visitez Ajouter une surveillance pour un code spécifique pour en savoir plus sur ces fonctionnalités et sur la façon de les ajouter à votre application.

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

Après avoir 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 des performances de la console Firebase.

Prochaines étapes