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

• Create a Firebase project

• Register your web app with Firebase

  To usePerformance Monitoring in a web app, youmust add your app as a Firebase Web App in theFirebase console.

  If you already use Firebase products in your existing web app and you want to start using thePerformance Monitoring SDK, you must update yourFirebase config object to include yourappID.

Note that when you add Firebase to your app, you might complete some of thesteps described later on this page (for example, adding the SDK and initializingFirebase).

Step 1: Add and initializePerformance Monitoring

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

2. Add thePerformance Monitoring JS SDK and initializePerformance Monitoring:

import{initializeApp}from"firebase/app";import{getPerformance}from"firebase/performance";//TODO:Replacethefollowingwithyourapp's Firebase project configuration//See:https://firebase.google.com/docs/web/learn-more#config-objectconstfirebaseConfig={//...};//InitializeFirebaseconstapp=initializeApp(firebaseConfig);//InitializePerformanceMonitoringandgetareferencetotheserviceconstperf=getPerformance(app);

importfirebasefrom"firebase/compat/app";import"firebase/compat/performance";//TODO:Replacethefollowingwithyourapp's Firebase project configuration//See:https://firebase.google.com/docs/web/learn-more#config-objectconstfirebaseConfig={//...};//InitializeFirebasefirebase.initializeApp(firebaseConfig);//InitializePerformanceMonitoringandgetareferencetotheserviceconstperf=firebase.performance();

Step 2: Add the first input delay polyfill library

To measure thefirst input delay metric,you need to add the polyfill library for this metric. For installationinstructions, refer to the library'sdocumentation.

Adding this polyfill library is not required forPerformance Monitoring to report the otherweb app metrics.

Step 3: Generate performance events for initial data display

Firebase starts processing the events when you successfully add the SDK to yourapp. If you're still developing locally, interact with your app to generateevents 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 yourapp, and/or triggering network requests. Make sure to keep the browser tabopen for at least 10 seconds after the page loads.

3. Go to thePerformance dashboard of theFirebase console. You should see your initial data display withina few minutes.

   If you don't see a display of your initial data, review thetroubleshootingtips.

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

1. Open your browser's developer tools (for example,Network tab for Chrome Dev Toolsor in theNetwork 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 tofirebaselogging.googleapis.com in your browser's developer tools. Thepresence of that network call shows that the browser is sending performancedata to Firebase.

If your app isn't logging performance events, review thetroubleshootingtips.

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

To monitor performance data associated with specific code in your app, you caninstrumentcustom code traces.

With a custom code trace, you can measure how long it takes your app to completea specific task or set of tasks, such as loading a set of images or queryingyour database. The default metric for a custom code trace is its duration, butyou 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 (andadd any desired custom metrics) using the API provided by thePerformance Monitoring SDK.

VisitAdd monitoring for specific codeto learn more about these features and how to add them to your app.

Step 6: Deploy your app then review results

After you've validatedPerformance Monitoring, you can deploy the updated version of yourapp to your users.

You can monitor performance data in thePerformancedashboard oftheFirebase console.

Next steps

• Get hands-on experience with theFirebase Performance Monitoring for Web Codelab.

• Learn more about data automatically collected byPerformance Monitoring:

  • Data forpage loading in your app
  • Data forHTTP/S network requestsissued by your app

• View, track, and filter yourperformance data in theFirebase console

• Add monitoring for specific tasks or workflows in your app byinstrumenting custom code traces

• Use attributes to filter performance data