Page Performance¶

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

Google Core Web Vitals (Google’s Core Web Vitals)¶

Web Vitals is a new initiative by Google aimed at providing unified guidance for web quality signals that are critical to delivering outstanding web user experiences.

The specific metrics that make up Core Web Vitals will evolve over time. The current 2020 metric composition 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): Largest Contentful Paint measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of the page first starting to load.

First Input Delay (FID): First Input Delay measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.

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

To ensure that you meet the recommended target values for most users during their visits, a good measurement threshold for each of the above metrics is the 75th percentile of page loads, applicable to both mobile and desktop devices.

Page Collection Metrics¶

Metric	Type (Unit)	Description
`view.time_spent`	number(ns)	Time spent on the page
`view.loading_time`	number(ns)	Page has been ready with no network requests or DOM changes. > See Page Loading Time.
`view.largest_contentful_paint`	number(ns)	Largest Contentful Paint, measuring loading performance. For a good user experience, LCP should occur within 2.5 seconds after the page starts loading.
`view.first_input_delay`	number(ns)	First Input Delay, measuring interactivity. For a good user experience, the page's FID should be 100 milliseconds or less.
`view.cumulative_layout_shift`	number(ns)	Cumulative Layout Shift, measuring visual stability. For a good user experience, the page's CLS should remain at 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. "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 receiving the first byte of the response
`view.time_to_interactive`	number(ns)	Time from when the page starts loading until its main sub-resources are rendered and it can quickly and reliably respond to user input
`view.dom_interactive`	number(ns)	Time when the parser finishes parsing the document. Details can be found at MDN
`view.dom_content_loaded`	number(ns)	The DOMContentLoaded event is triggered when the pure HTML is fully loaded and parsed without waiting for stylesheets, images, or subframes to finish loading. More details at MDN
`view.dom_complete`	number(ns)	The page and all sub-resources are fully ready. For users, the loading animation has stopped spinning. More details at MDN
`view.load_event`	number(ns)	Triggered when the entire page and all dependent resources such as stylesheets and images have finished loading. It differs from `DOMContentLoaded`, which triggers once the page DOM is loaded without waiting for dependent resources. More details at MDN

About Single Page Applications (SPA)¶

For single-page applications (SPAs), 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 powerful APIs provided by modern browsers, Loading Time monitors DOM changes and network request status on the page.

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

Page Active State¶

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

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

Note

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

Note

In the following cases, 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 the API periodically or after each click.
The application uses "comet" technology (i.e., streaming or long polling), where requests are indefinitely held open.

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

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

    // Regular expression
    /\/comet$/,

    // Returns true via function to exclude
    (url) => url === 'https://third-party-analytics-provider.com/endpoint',
  ],
})