Google is committed to advancing racial equity for Black communities. See how.

Monitoring performance data in the console

Track key metrics in your dashboard

Add your key metrics to your dashboard to learn how they're trending. You can quickly identify regressions by seeing week-over-week changes or verify that recent changes in your code are improving performance.

an image of the Firebase Performance Monitoring metrics dashboard

Here are some example trends that you could track:

  • An improvement in first input delay as you've changed when your app loads certain JavaScript files
  • A decrease in the time for first contentful paint after switching to use a CDN for assets
  • A drop in response payload size for a network request since you implemented the use of thumbnails
  • An increase in network response time for a third-party API call during an ecosystem outage

Each member of a Firebase project can configure their own dashboard. You can track metrics that are important to you, while other project members can track completely different sets of key metrics on their own dashboards.

To add a metric to your dashboard, go to the Performance dashboard in the Firebase console, then click the Dashboard tab. Click an empty metric card, then select an existing metric to add to your dashboard. Click on a populated metric card for more options, like to replace or remove a metric.

The dashboard shows collected metric data over time, both in graphical form and as a numerical percentage change.

  • Each metric card displays the percentage change in the metric's value over the selected time range, as well as the metric's most recently collected value. The statement at the top of the dashboard is an interpretation of the percentage change.
  • By default, the dashboard displays the metric's median value. If you'd like to view how different segments of your users experience your app, select a different percentile from the dropdown at the top of the dashboard.

What do the red, green, and grey colors mean?

Most metrics have a desired trending direction, so the dashboard uses color to display an interpretion of whether the metric's data is trending in a good or bad direction.

For example, say you're tracking a page's first input delay (a value that should be small). If this value is increasing, then the dashboard displays the metric's percentage change in red, calling attention to a possible issue. However, if the value is decreasing or unchanged, then the dashboard displays the percentage in green or grey, respectively.

If a metric doesn't have an obvious desired trending direction, like the response payload size for a network request, then the dashboard always displays the metric's percentage change in grey, regardless of how the data is trending.

What do the solid and dashed lines mean?

  • dark blue solid line — the metric's value over time

  • light blue dashed line — the metric's value at a specific time in the past
    For example, if you select to show a chart of the last 7 days, and you hover over August 30, then the light blue dashed line tells you the metric's value on August 23.



Overview of the On device tab

In the On device tab, find a brief overview for page load traces for all pages in your app (top table) and any developer-instrumented custom code traces (bottom table).

Learn more about these traces

  • Page load traces — These are automatically collected traces for each page of your app. Each trace collects metrics like first contentful paint and DOM-related events.

  • Custom code traces — These are traces that you instrument in your own code to monitor specific tasks or a set of tasks. You can even add custom metrics and custom attributes to custom code traces.

View more data for each trace

From the On Device tab, you can click through various screens to explore a trace and drill down into metrics of interest. On most pages, you can use the Filter button (top-left of the screen) to filter the data by attribute, for example:

an image of Firebase Performance Monitoring data being filtered by attribute
  • Filter by Page URL to view data for a specific page of your site
  • Filter by Effective connection type to learn how a 3g connection impacts your app
  • Filter by Country to make sure your database location isn't affecting a specific region

View all collected metrics for a trace

If you click a specific trace from the On device tab, you'll see an overview of the trace's data on metric cards.

  • Page load traces

    The available metric cards include first paint, first contentful paint, first input delay, and DOM-related events.

    • Use the options in the top-right of the screen to view the metrics' data in aggregate or over time.
    • Click View more on a metric card to review a specific metric's data in more detail.
  • Custom code traces

    The Duration metric card is always available, as it's the default metric for this type of trace. If you added any custom metrics to the custom code trace, those metric cards are also shown.

    • Use the options in the top-right of the screen to view the metric's data in aggregate or over time.
    • Click View more on a metric card to review a specific metric's data in more detail.

View in-depth information about the data

If you click View more on any metric card, you can review more in-depth information about the collected data and use richer analysis features. For example, you can filter and segment the data by attribute.



Overview of the Network tab

In the Network tab, find a brief overview for all your HTTP/S network request traces.

Learn more about these traces

HTTP/S network request traces are automatically collected traces that collect data from the time that your app issues a request to a service endpoint until the response from that endpoint is complete. These traces collect metrics like response time and response payload size.

In the console, data for network request traces are aggregated into URL patterns.

View more data for each trace

From the Network tab, you can click through various screens to explore a trace and drill down into metrics of interest. On most pages, you can use the Filter button (top-left of the screen) to filter the data by attribute, for example:

an image of Firebase Performance Monitoring data being filtered by attribute
  • Filter by Page URL to view data for a specific page of your site
  • Filter by Effective connection type to learn how a 3g connection impacts your app
  • Filter by Country to make sure your database location isn't affecting a specific region

View all metrics for a trace

If you click a specific URL pattern from the Network tab, you'll see an overview of the trace's data on metric cards. The available metric cards are response time and response payload size, as they're the default metrics for this type of trace.

Use the options in the top-right of the screen to view the various data in aggregate or over time.

Click View more on a metric card to review a specific metric's data in more detail.

View in-depth information about the data

If you click View more on any metric card, you can review more in-depth information about the collected data and use richer analysis features. For example, you can filter and segment the data by attribute.