Understanding the Page loads metric

The average page load time is measured using the onload event defined by the Navigation Timing Level 2 specification on the http://w3.org website. For more detailed information, refer to the Navigation timing API section below.

What is considered a navigation event?

A navigation event is a change triggered on a web page when the URL changes and the browser populates its history with a new entry. The browser history is a list of visited addresses allowing users to return to a previously visited page.

The dashboard reports values for two types of navigations out-of-the-box:

  • Hard navigations take place when the browser sends a request to load a whole new page.

  • Soft navigations allow for measuring the speed of asynchronous page loads where the browser does not load a new page. They are very common in single-page applications (SPA). Soft navigations have to be enabled for each application. Refer to the Configuring web applications documentation for more information.

The difference between hard and soft navigations

A hard navigation event is triggered at the technical level when a document is loaded. This behavior can be identified in the browser developer tools using the Network tab. One of the web requests should be of the document type. Soft navigations are all other navigations when the browser does not load document request types.

How does Nexthink translate navigation into page load metrics?

Nexthink identifies two types of navigation events—Hard navigations and Soft navigations—and computes page load metrics based on how each type occurs.

Hard navigations

A hard navigation occurs when the browser loads a new document, typically when the URL changes. Nexthink measures the page load time for these navigations to help you understand how long a page takes to become ready for end users.

You can now choose how Nexthink computes page load time for Hard navigations when configuring a web application for Nexthink monitoring. The selected method defines the moment at which Nexthink considers the navigation as complete.

Nexthink currently supports two computation methods:

  • Browser timing API—system default.

  • Page completion time—currently, under Technical preview.

Changing the hard-navigation computation method affects all metrics derived from page load time—including DEX score, alerts, live dashboards, and historical reporting.

Browser timing API

The following diagram visualizes how the Browser Timing API measures page load time by outlining the events and attributes that occur from page unload to full load.

The sum of the timing elements shown below is not always equal to the total page load time because other factors, such as concurrent OS tasks, may affect the loading time of the page.

Backend time is the time between when the client starts sending a request requestStart and when the clients start receiving a response responseStart.

Network time is the sum of the time between:

  • redirectStart and redirectEnd.

  • domainLookupStart and connectEnd

  • responseStart and responseEnd

Client time is the time between unloadEventEnd and loadEventEnd minus the backend and network times.

Resources timing events

Unload event An unload event is triggered when the user navigates away from the page or when the page is reloaded.

Redirect The time it takes to follow HTTP redirects

DNS The time it takes to resolve domain names

TCP The time it takes to establish a socket connection between the browser and the webserver

SSL The time it takes to establish a secure socket connection between the browser and the webserver

Request The time it takes to wait for the first byte of the document response

Response The time it takes to download the document response

Processing The time it takes by the browser to process and build the DOM

Load The time it takes to load the DOM, including DOM processing

Number of bytes transferred HTTP response sizes

DOM events and attributes

There are various onload events that are triggered before a page can be fully loaded. The browser fires an onload event which can trigger additional functions or logic on the page. Such events are also used in the process of calculating page load times:

domLoading  attribute provides the start time of the entire process.

domInteractive  event is triggered when the browser has completed parsing the HTML and constructed the DOM.

domContentLoadedEventStart and domContentLoadedEventEnd events mark the start and end times of a render tree creation. The process begins when the CSS object model is ready.

domComplete event is triggered when the processing is completed and all the resources are ready.

Page completion time

The Page completion time method extends the measurement beyond the browser load event. It captures additional activity that affects when the page is visually complete or usable from the user perspective. Examples include:

  • Asynchronous data fetches

  • DOM updates

  • Client-side rendering and processing

Because the Page completion time method accounts for more activity than the Browser timing API, the reported page load time may be longer than with the default method.

Therefore, Page completion time is helpful for organizations whose manual measurements or user perceptions suggest that hard navigation load times are longer than the values reported by Nexthink, using the default computation method.

Switching to the Page completion time method in the web application configuration does not improve high page load times.

Alternative: Using Nexthink Extension to view the Page completion time.

From Nexthink Extension, you can view Page completion time without switching the Hard navigation method in the web application configuration.

  1. Open Nexthink Extension from your browser, within the page of interest.

  2. Click the Powered by Nexthink badge five times to open the Nexthink extension pop-up.

  3. See the Page load time value, which is equivalent to the Page completion time, under Soft Navigation.


Soft navigations

A soft navigation consists of the following sequence of distinct events (some are optional):

  1. User's interaction and/or hard navigation triggering the soft navigation

  2. Changes in the rendering of the page

  3. A request for new resources from the backend

  4. Waiting time for the backend to respond

  5. Receiving of resources from the backend

  6. Processing on the client-side based on the new resources

The information above is applied in the timeline to Backend, Network, and Client as follows:

  • Client time is defined as the sum of 1. & 2. & 6.

  • Network time is the sum of 3. & 5.

  • Backend time is 4.

Last updated

Was this helpful?