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 Nexthink translates navigations into page loads metrics?

Hard Navigations

The number of employees represents those who performed at least one page-load action. It is mapped onto its own timeline for users to easily draw a visual correlation with the Average page load time widget above. This number can differ from the one in the Overview dashboard, which is based on focus time. It is possible to focus on a browser tab but not perform any action that would trigger a navigation event. For instance, reading text or scrolling usually does not trigger any navigation.

In the timeline, the data is broken down according to the following categories:

• Backend is an estimated response time on the backend. Its accuracy depends on how the application performs.

• Network refers to the network response time value which corresponds to the time taken by potential redirections, DNS lookups, TCP connections and response time.

• Client refers to the client response time value and is equal to the total page load time minus the sum of the backend and network times: client time = total page load time - (backend time + network time).

You can follow up on your search for slow page loads using the Investigate more panel in which the breakdown of the data is carried over and categorized according to Backend, Network and Client.

Navigation timing API

In order to fully understand how page load times are measured and calculated, let’s take a look at the navigation timing API and break it down by events and attributes from the moment an old page is unloaded to the moment a new page is loaded. See the illustration and definitions below for events and attributes involved in the process.

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.

Note that the sum of the timing elements shown above 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.

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.