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 Firebase to your app, you might complete some of the steps described later on this page (for example, adding the SDK and initializing Firebase).

Step 1: Add and initialize Performance Monitoring

  1. If you haven't already, install the Firebase JS SDK and initialize Firebase.

  2. Add the Performance Monitoring JS SDK and initialize 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();

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.

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

Step 3: Generate performance events for initial data display

Firebase starts processing the events when you successfully add the SDK to your app. If you're still developing locally, interact with your app to generate events for initial data collection and processing.

  1. Serve and view your web app in a local environment.

  2. Generate events by loading subpages for your site, interacting with your app, and/or triggering network requests. Make sure to keep the browser tab open for at least 10 seconds after the page loads.

  3. Go to the Performance dashboard of the Firebase console. You should see your initial data display within a few minutes.

    If you don't see a display of your initial data, review the troubleshooting tips.

Step 4: (Optional) View log messages for performance events

  1. Open your browser's developer tools (for example, Network tab for Chrome Dev Tools or in the Network Monitor for Firefox).

  2. Refresh your web app in the browser.

  3. Check your log messages for any error messages.

  4. After a few seconds, look for a network call to firebaselogging.googleapis.com in your browser's developer tools. The presence of that network call shows that the browser is sending performance data to Firebase.

If your app isn't logging performance events, review the troubleshooting tips.

Step 5: (Optional) Add custom monitoring for specific code

To monitor performance data associated with specific code in your app, you can instrument custom code traces.

With a custom code trace, you can measure how long it takes your app to complete a specific task or set of tasks, such as loading a set of images or querying your database. The default metric for a custom code trace is its duration, but you can also add custom metrics, such as cache hits and memory warnings.

In your code, you define the beginning and the end of a custom code trace (and add any desired custom metrics) using the API provided by the Performance Monitoring SDK.

Visit Add monitoring for specific code to learn more about these features and how to add them to your app.

Step 6: 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 Performance dashboard of the Firebase console.

Next steps