Page Performance¶

Continuously optimizing user experience is key to the long-term success of all websites. Whether you are an entrepreneur, marketer, or developer, Web Vitals 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 introduced by Google to provide unified guidance on quality signals for the web, which are essential for delivering an outstanding web user experience.

The metrics that constitute the Core Web Vitals evolve over time. The current set for 2020 focuses on three aspects of user experience—loading performance, interactivity, and visual stability—and includes the following metrics (and their respective 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, a page should have an FID of 100 milliseconds or less.

Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, a page should maintain a CLS of 0.1 or less.

To ensure you are meeting these recommended targets for the majority of your users, 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, a page should have an FID of 100 milliseconds or less.
`view.cumulative_layout_shift`	number(ns)	Cumulative Layout Shift, measures visual stability. To provide a good user experience, a page should maintain a CLS of 0.1. or less.
`view.first_contentful_paint`	number(ns)	The First Contentful Paint (FCP) metric 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 requesting the page to the first byte of the page response
`view.time_to_interactive`	number(ns)	The time it takes for the page to start loading until the main sub-resources are rendered and can respond to user input quickly and reliably
`view.dom_interactive`	number(ns)	The time when the parser finished parsing the document, details can be found at MDN
`view.dom_content_loaded`	number(ns)	The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. Details refer to MDN
`view.dom_complete`	number(ns)	The page and all sub-resources are ready. For the user, the loading spinner has stopped spinning. Details can be found at MDN
`view.load_event`	number(ns)	Fired when the whole page has loaded, including all dependent resources such as stylesheets and images. It differs from `DOMContentLoaded`, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading. Details 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 for DOM changes on the page as well as network requests.

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

Page Active State¶

If one of the following conditions is met, the page is considered active:

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

Note

If no events are generated on the page within 100ms, the page is considered inactive.

Note

In the following situations, the standard of 100 milliseconds since the last request or DOM change may not accurately determine activity:

The application collects analytics data by sending requests to an API periodically or after every click.
The application uses "comet" techniques (i.e., streaming or long polling), where requests are held 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',

    // Regex
    /\/comet$/,

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