Перейти к консоли

Get started with Performance Monitoring for web

Before you begin

If you haven't already, visit Add Firebase to your JavaScript project to learn how to:

  • Create a Firebase project

  • Register your web app with Firebase

Note that when you add your app to your Firebase project, you might also complete some of the steps in the following guide (for example, adding Firebase SDKs and initializing Firebase).

Step 1: Add Performance Monitoring and initialize Firebase

If you haven’t already, add the Performance Monitoring SDK and initialize Firebase in your app using one of the options below. Consider the following to help you choose among your options (see individual tabs for more detailed information):

  • From the CDN (standalone SDK) — If Performance Monitoring is the only Firebase product in your app, this option loads a single, lighter-weight SDK from the CDN.

  • From the CDN (standard SDK) — If you use other Firebase products in your app, this option loads the Performance Monitoring SDK along with other Firebase libraries from the CDN.

  • From Hosting URLs — If you’re using Firebase Hosting, this option offers a convenience for managing your Firebase configuration when initializing Firebase.

  • Using module bundlers — If you use a bundler (like Browserify or webpack), use this option to import individual modules when you need them.

After you've added the SDK, Firebase gets started right away monitoring automatic traces and HTTP/S network requests.

From the CDN

You can configure partial import of the Firebase JavaScript SDK and only load the Firebase libraries that you need. Firebase stores each library of the Firebase JavaScript SDK on our global CDN (content delivery network).

To include the Performance Monitoring SDK from the CDN, you have two options:

  • standalone SDK — Performance Monitoring is the only Firebase product that you use in your app.
  • standard SDK — You’re using Performance Monitoring along with other Firebase products in your app.

standalone SDK

If Performance Monitoring is the only Firebase product in your app, use the standalone Performance Monitoring SDK (and the recommended header script below) if you’re interested in:

  • reducing your SDK package size
  • delaying initialization of the SDK until after your page loads

To include the standalone Performance Monitoring SDK in your app and delay its initialization to after your page loads:

  1. Add the following script to the header of your index file.
  2. Make sure to add your app's Firebase project configuration object.
(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.onload = function() {firebase.initializeApp(fbc).performance();};
})(performance_standalone, firebaseConfig);

where,

  • performance_standalone is 'https://www.gstatic.com/firebasejs/6.4.0/firebase-performance-standalone.js'
  • firebaseConfig is your app's Firebase config object

The above script asynchronously loads the standalone SDK then initializes Firebase after the window's onload event fires. This tactic reduces the impact that the SDK could have on page load metrics since the browser has already reported its loading metrics when you initialize the SDK.

standard SDK

If you're using other Firebase products (like Authentication or Cloud Firestore in your app, include the standard Performance Monitoring SDK.

Note that this SDK requires that you include the separate standard Firebase core SDK and initialize Firebase and Performance Monitoring in a separate script.

  1. To include the standard Performance Monitoring SDK, add the following scripts to the bottom of your <body> tag, but before you use any Firebase services:

    <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/6.4.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-performance.js"></script>
    <body>
    
  2. Initialize Firebase and Performance Monitoring in your app:

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

From Hosting URLs

When you use Firebase Hosting, you can configure your app to load the Firebase JavaScript SDK libraries dynamically from reserved URLs. Learn more about adding SDKs via reserved Hosting URLs.

With this setup option, after you deploy to Firebase, your app automatically pulls the Firebase configuration object from the Firebase project to which you've deployed. You can deploy the same codebase to multiple Firebase projects, but you don't have to track the Firebase configuration that you're using for firebase.initializeApp().

  1. To include the Performance Monitoring SDK, add the following scripts to the bottom of your <body> tag, but before you use any Firebase services:

    <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/6.4.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/6.4.0/firebase-performance.js"></script>
    </body>
    
  2. Initialize Firebase and Performance Monitoring in your app (no need to include your Firebase config object when using reserved Hosting URLs):

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

Using module bundler

You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. If you're using a bundler (like Browserify or webpack), you can import individual Firebase products when you need them.

  1. Install the firebase npm package and save it to your package.json file by running:

    npm install --save firebase
  2. To include the Performance Monitoring SDK, import the Firebase modules:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Initialize Firebase and Performance Monitoring in your app:

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

Step 2: Add the first input delay polyfill library

To measure the first input delay metric, you need to add the polyfill library for this metric. For installation instructions, refer to the library's documentation.

Note that adding this polyfill library is not required for Performance Monitoring to report the other web app metrics.

Step 3: Check that Performance Monitoring is logging data

  1. Refresh your web app in the browser.

  2. After a few seconds, look for a network call to firebaselogging.googleapis.com in the Network tab for Chrome Dev Tools or in the Network Monitor for Firefox.

    The presence of that network call shows that the browser is sending performance data to Firebase.

  3. Confirm that Performance Monitoring results display in the Firebase console.

    Results usually display within 12 hours.

Step 4: (Optional) Add custom traces and custom metrics

A custom trace is a report of performance data associated with some of the code in your app. To learn more about custom traces, see the Performance Monitoring overview.

You can have multiple custom traces in your app, and it's possible to have more than one custom trace running at a time. Each custom trace can have one or more metrics to count performance-related events in your app, and those metrics are associated with the traces that create them.

Note that names for custom traces and metrics must meet the following requirements: no leading or trailing whitespace, no leading underscore (_) character, and max length is 32 characters.

  1. To start and stop a custom trace, wrap the code that you want to trace with lines of code similar to the following:

    const trace = perf.trace('customTraceName');
    trace.start();
    
    // code that you want to trace
    
    trace.stop();
    
  2. To add a custom metric, add lines of code similar to the following each time that the event occurs. For example, this custom metric counts performance-related events that occur in your app.

    async function getInventory(inventoryIds) {
      const trace = perf.trace('inventoryRetrieval');
    
      // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
      trace.incrementMetric('numberOfIds', inventoryIds.length);
    
      // Measures the time it takes to request inventory based on the amount of inventory
      trace.start();
      const inventoryData = await retrieveInventory(inventoryIds);
      trace.stop();
    
      return inventoryData;
    }
    

Step 5: Deploy your app then review results

After you've validated Performance Monitoring, you can deploy the updated version of your app to your users.

You can monitor performance data in the Firebase console.

Next steps