Page Performance¶

Continuously optimizing user experience is the key to long-term success for all websites. Whether you are an entrepreneur, marketer, or developer, Web Metrics can help you quantify your website's experience index and uncover opportunities for improvement.

Google's Core Web Vitals¶

Web Vitals is a new initiative launched by Google to provide unified guidance on web quality signals that are essential for delivering an outstanding web user experience.

The core Web Metrics will evolve over time. The current metrics for 2020 focus on three aspects of user experience—loading performance, interactivity, and visual stability—and include the following metrics (and their corresponding thresholds):

Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID): Measures interactivity. To provide a good user experience, the page's FID should be 100 milliseconds or less.

Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, the page's CLS should be 0.1 or less.

To ensure that you can meet the recommended targets for most user visits, a good measurement threshold for each of the above metrics is the 75th percentile of page loads, and this threshold applies to both mobile and desktop devices.

Page Collection Metrics¶

Metric	Type (Unit)	Description
`view.time_spent`	number(ns)	Page dwell time
`view.loading_time`	number(ns)	The page is ready, and there are no network requests or DOM changes. > See Page Loading Time.
`view.largest_contentful_paint`	number(ns)	Largest Contentful Paint, measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
`view.first_input_delay`	number(ns)	First Input Delay, measures interactivity. To provide a good user experience, the page's FID should be 100 milliseconds or less.
`view.cumulative_layout_shift`	number(ns)	Cumulative Layout Shift, measures visual stability. To provide a good user experience, the page's CLS should be 0.1 or less.
`view.first_contentful_paint`	number(ns)	First Contentful Paint (FCP) measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), `<svg>` elements, or non-white `<canvas>` elements. > Refer to w3c
`view.first_byte`	number(ns)	Time from page request to the first byte of page response
`view.time_to_interactive`	number(ns)	Time from when the page starts loading to when the main sub-resources are rendered and the page can respond to user input quickly and reliably
`view.dom_interactive`	number(ns)	Time when the parser finishes parsing the document, refer to MDN
`view.dom_content_loaded`	number(ns)	When pure HTML is fully loaded and parsed, the DOMContentLoaded event is triggered, without waiting for stylesheets, images, or subframes to load, refer to MDN
`view.dom_complete`	number(ns)	The page and all sub-resources are ready. For the user, the loading animation has stopped spinning. Refer to MDN
`view.load_event`	number(ns)	Triggered when the entire page and all dependent resources such as stylesheets and images are fully loaded. It is different from `DOMContentLoaded`, which is triggered as soon as the page DOM is loaded, without waiting for dependent resources to load. Refer to MDN

About Single Page Applications (SPA)¶

For Single Page Applications (SPA), the RUM Browser SDK uses the loading_type tag to distinguish between initial_load and route_change. The RUM SDK generates a view event with the loading_type:route_change tag. RUM uses the History API to listen for URL changes.

Loading Time Calculation Method¶

Based on the powerful API capabilities provided by modern browsers, Loading Time listens to DOM changes and network requests on the page.

Initial Load: Loading Time takes the longer of the following two values
- loadEventEnd - navigationStart
- The time when the page first becomes inactive - navigationStart
SPA Route Change: The time when the page first becomes inactive - the time when the URL changes

Page Activity State¶

The page is considered active if one of the following conditions is met:

There are changes in the page DOM
Static resources are being loaded (loading js, css, etc.)
There are asynchronous requests

Note

If no events occur within 100ms, the page is considered inactive.

Note

In the following cases, the 100ms standard since the last request or DOM change may not accurately determine activity:

The application collects analytics data by sending requests to the API periodically or after each click.
The application uses "comet" technology (i.e., streaming or long polling), and requests will be kept indefinitely.

To improve the accuracy of activity determination in these cases, you can specify the excludedActivityUrls configuration to exclude these requests:

window.DATAFLUX_RUM.init({
  excludedActivityUrls: [
    // Exact match
    'https://third-party-analytics-provider.com/endpoint',

    // Regular expression
    /\/comet$/,

    // Exclude by returning true in the method
    (url) => url === 'https://third-party-analytics-provider.com/endpoint',
  ],
})