Before you begin
If you haven't already, visit
Add Firebase to your JavaScript project
to learn how to:
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
If you haven't already,
install the Firebase JS SDK and initialize Firebase
.
Add the Performance Monitoring JS SDK and initialize Performance Monitoring:
Web modular API
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 namespaced API
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();
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.
Serve and view your web app in a local environment.
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.
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
Open your browser's developer tools (for example,
Network tab for Chrome Dev Tools
or in the
Network Monitor for Firefox
).
Refresh your web app in the browser.
Check your log messages for any error messages.
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