Truy cập vào bảng điều khiển

Automatic traces for web apps

A trace is a report of performance data captured between two points in time in your app. For web apps, Performance Monitoring automatically provides a trace for page load.

The page load trace breaks down into the following default metrics:

  • first paint metric — Measures the time between when the user navigates to a page and when any visual change happens

  • first contentful paint metric — Measures the time between when a user navigates to a page and when meaningful content displays, like an image or text

  • domInteractive metric — Measures the time between when the user navigates to a page and when the page is considered interactive for the user

  • domContentLoadedEventEnd metric — Measures the time between when the user navigates to a page and when the initial HTML document is completely loaded and parsed

  • loadEventEnd metric — Measures the time between when the user navigates to the page and when the current document's load event completes

  • first input delay metric — Measures the time between when the user interacts with a page and when the browser is able to respond to that input

Definitions for page load metrics

First paint

This metric measures the time between when the user navigates to a page and when any visual change happens.

This metric is useful since the first paint signals to your users that the page is starting to load.

  • Starts when the user navigates to a page.

  • Stops when any visual change happens, including a background color change or a header loading.

First contentful paint

This metric measures the time between when a user navigates to a page and when meaningful content displays, like an image or text.

This metric is useful for insights into how soon your users see any of your app's actual content rather than just a new background color or header.

  • Starts when the user navigates to a page.

  • Stops immediately after the browser renders the first content from the DOM, including any text, image (including background images), non-white canvas, or SVG.

domInteractive

This metric measures the time between when the user navigates to a page and when the page is considered interactive for the user.

This metric is useful for insights into how soon your users can actually interact with elements in your app, like buttons and hyperlinks, rather than just seeing them on the screen. Note that this doesn't mean that the browser will respond to the interaction (for this metric, refer to first input delay trace).

  • Starts when the user navigates to a page.

  • Stops immediately before the user agent sets the current HTML document's readiness to "interactive".

domContentLoadedEventEnd

This metric measures the time between when the user navigates to a page and when the initial HTML document is completely loaded and parsed.

  • Starts when the user navigates to a page.

  • Stops immediately after the initial HTML document is completely loaded and parsed (DOMContentLoaded), but this does not mean that stylesheets, images, and subframes are finished loading.

loadEventEnd

This metric measures the time between when the user navigates to the page and when the current document's load event completes.

This metric is useful for insights into how long it takes to load all your content, including stylesheets and images.

  • Starts when the user navigates to a page.

  • Stops immediately after the current HTML document's load event completes.

First input delay

This metric measures the time between when the user interacts with a page and when the browser is able to respond to that input.

This metric is useful since the browser responding to a user interaction gives your users their first impressions about the responsiveness of your app.

  • Starts when the user first interacts with an element on the page, like clicking a button or hyperlink.

  • Stops immediately after the browser is able to respond to the input, meaning that the browser isn't busy loading or parsing your content.

Note that 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.

Monitor automatic page load traces in the console

  1. In the Firebase console, go to the Performance dashboard.

  2. Click the On device tab, then you can:

    • View a quick report of the collected data for all your page load traces (and any custom traces you've added).

    • Click a specific trace to review the trace's data in more detail.

    • Use the Filteradd button in the top-left of the dashboard to perform basic filtering of the data by attribute.

  3. If you click a specific trace, the console displays an overview of the collected data on metric cards.

    • Use the options in the top-right of the dashboard to view data as aggregated or over time.

    • Use the Filteradd button in the top-left of the dashboard to perform basic filtering of the data by attribute.

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