Premiers pas avec la surveillance des performances pour le Web

Avant que tu commences

Si vous avez pas déjà, visite Ajouter Firebase à votre projet JavaScript pour apprendre à:

  • Créer un projet Firebase

  • Enregistrez votre application Web avec Firebase

Notez que lorsque vous ajoutez Firebase à votre application, vous pouvez également remplir certaines des étapes décrites sur cette page (par exemple, l' ajout Firebase et SDKs initialisation Firebase ).

Étape 1: Surveillance Ajouter des performances et initialiser Firebase

Si vous ne l'avez pas déjà fait, ajoutez le SDK Performance Monitoring et initialisez Firebase dans votre application à l'aide de l'une des options ci-dessous. Tenez compte des éléments suivants pour vous aider à choisir parmi vos options (voir les onglets individuels pour des informations plus détaillées) :

  • A partir du CDN (SDK autonome) - Si la surveillance de la performance est le seul produit Firebase dans votre application, cette option charge un seul SDK plus léger du CDN.

  • A partir du CDN (SDK standard) - Si vous utilisez d' autres produits Firebase dans votre application, cette option charge le SDK Contrôle des performances ainsi que d'autres bibliothèques Firebase du CDN.

  • A partir des URL Hébergement - Si vous utilisez Firebase Hébergement, cette option offre une commodité pour la gestion de votre configuration Firebase lors de l' initialisation Firebase.

  • L' utilisation du module fardeleuses - Si vous utilisez un Bundler (comme Browserify ou webpack), utilisez cette option pour importer des modules individuels lorsque vous en avez besoin.

Une fois que vous avez ajouté le SDK suivi de la performance, Firebase démarre automatiquement la collecte de données pour votre application de la charge de la page et les requêtes réseau HTTP / S .

Du CDN

Vous pouvez configurer l'importation partielle du SDK JavaScript Firebase et charger uniquement les bibliothèques Firebase dont vous avez besoin. Firebase stocke chaque bibliothèque du SDK JavaScript Firebase sur notre CDN (réseau de diffusion de contenu) mondial.

Pour inclure le SDK de surveillance des performances à partir du CDN, vous avez deux options :

  • autonome SDK - Contrôle des performances est le seul produit Firebase que vous utilisez dans votre application.
  • norme SDK - Vous utilisez Suivi des performances ainsi que d'autres produits Firebase dans votre application.

SDK autonome

Si Performance Monitoring est le seul produit Firebase dans votre application, utilisez le SDK Performance Monitoring autonome (et le script d'en-tête recommandé ci-dessous) si vous êtes intéressé par :

  • réduire la taille de votre package SDK
  • retarder l'initialisation du SDK jusqu'à ce que votre page se charge

Pour inclure le SDK de surveillance des performances autonome dans votre application et retarder son initialisation après le chargement de votre page :

  1. Ajoutez le script suivant à l'en-tête de votre fichier d'index.
  2. Assurez - vous d'ajouter votre application Firebase objet de configuration du projet .
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

où,

  • performance_standalone est 'https://www.gstatic.com/firebasejs/8.8.1/firebase-performance-standalone.js'
  • firebaseConfig est votre application de l' objet de configuration Firebase

Le script ci - dessus charge de façon asynchrone le SDK autonome initialise Firebase après la fenêtre de onload les feux de l' événement. Cette tactique réduit l'impact que le SDK pourrait avoir sur les paramètres de chargement de page depuis le navigateur a déjà signalé ses paramètres de chargement lors de l' initialisation du SDK.

SDK standard

Si vous utilisez d'autres produits Firebase (comme l'authentification ou Cloud Firestore dans votre application, incluez le SDK de surveillance des performances standard.

Notez que ce SDK nécessite que vous incluiez le SDK principal Firebase standard distinct et que vous initialisiez Firebase et Performance Monitoring dans un script distinct.

  1. Pour inclure la norme de performance SDK de suivi, ajoutez les scripts suivants au fond de votre <body> balise, mais avant d'utiliser les services Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-performance.js"></script>
    <body>
    
  2. Initialisez Firebase et Performance Monitoring dans votre application :

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

Depuis les URL d'hébergement

Lorsque vous utilisez Firebase Hosting, vous pouvez configurer votre application pour charger dynamiquement les bibliothèques du SDK JavaScript Firebase à partir d'URL réservées. En savoir plus sur l' ajout d' URL d' hébergement via SDKs réservés .

Avec cette option de configuration, une fois que vous déployez à Firebase , votre application tire automatiquement l'objet de configuration Firebase du projet Firebase auquel vous avez déployé. Vous pouvez déployer le même code de base à plusieurs projets Firebase, mais vous ne devez pas suivre la configuration Firebase que vous utilisez pour firebase.initializeApp() .

  1. Pour inclure le SDK Performance de surveillance, ajoutez les scripts suivants au fond de votre <body> balise, mais avant d'utiliser les services Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.8.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.8.1/firebase-performance.js"></script>
    </body>
    
  2. Initialisez Firebase et Performance Monitoring dans votre application (pas besoin d'inclure votre objet de configuration Firebase lors de l'utilisation d'URL d'hébergement réservées) :

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

Utilisation de l'ensemble de modules

Vous pouvez configurer l'importation partielle du SDK JavaScript Firebase et charger uniquement les produits Firebase dont vous avez besoin. Si vous utilisez un Bundler (comme Browserify ou webpack), vous pouvez import différents produits Firebase lorsque vous en avez besoin.

  1. Installez le firebase package NPM et enregistrez - le sur votre package.json fichier en cours d' exécution:

    npm install --save firebase
  2. Pour inclure le SDK Performance de surveillance, import les modules Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Initialisez Firebase et Performance Monitoring dans votre application :

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Initialize Performance Monitoring and get a reference to the service
    const perf = firebase.performance();
    

Étape 2: Ajouter la première bibliothèque polyfil de retard d'entrée

Pour mesurer la première mesure de retard d'entrée , vous devez ajouter la bibliothèque polyfil pour cette mesure. Pour obtenir des instructions d'installation, reportez - vous à la bibliothèque de documentation .

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

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

Firebase commence à traiter les événements lorsque vous ajoutez avec succès le SDK à votre application. Si vous développez toujours 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 de performance de la console Firebase. Vous devriez voir vos données initiales s'afficher dans quelques minutes.

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

Étape 4: (Facultatif) Voir les messages du journal d'événements de performance

  1. Ouvrez votre outils de développement du navigateur (par exemple, onglet Réseau pour les outils Chrome Dev 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. Au bout de quelques secondes, cherchez un appel réseau 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'est pas des événements de performance logging, consultez les conseils de dépannage .

Étape 5: (Facultatif) Ajouter le suivi personnalisé pour le code spécifique

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

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 pour une trace de code personnalisé est sa durée, mais vous pouvez également ajouter des métriques personnalisées, telles que les accès au 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é (et ajoutez toutes les métriques personnalisées souhaitées) à l'aide de l'API fournie par le SDK Performance Monitoring.

Visite Ajouter le suivi pour le code spécifique pour en savoir plus sur ces caractéristiques et comment les ajouter à votre application.

Étape 6: Déployer votre application puis des résultats d'examen

Après avoir validé la surveillance des performances, vous pouvez déployer la version mise à jour de votre application pour vos utilisateurs.

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

Prochaines étapes