User action metrics

For web applications, DESK calculates the following user action metrics.

Milestone metrics

Milestone metrics represent events that occur at a specific point in time during a user action. However, they are measured in (m)sec, because they are calculated relative to the user action start time. In other words, user action start time serves as a reference point from which the time for the milestone metrics is measured. A value for example of 47msec for Navigation start indicates that this event occurred 47msec after the action start time.

Metric	Description	Applicable to
Navigation start	The moment right after the prompt for unload terminates on the previous document in the same browsing context (if there is no previous document, this value is the same as `PerformanceTiming.fetchStart)`).	Load actions
Request start	The moment the user agent sends the request to obtain the actual document, from the server, relevant application caches or from local resources (if the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request).	Load actions
Time to first byte	The moment the first byte of a response is received from the server, relevant application caches, or a local resource.	Load actions XHR actions
HTML downloaded	The moment the last byte of the current page is received, or before the transport connection is closed (whichever occurs first).	Load actions
DOM interactive	The moment the parser completes its work on the main document, before a page’s readiness status is set to "interactive" (i.e., before a page is ready to receive further user input).	Load actions
Speed index	A score indicating how quickly the page contents are visually populated. A low Speed index means that most parts of a page are rendering quickly. How is Speed Index calculated? Speed index is useful for comparing the user experience of various pages. The lower the number, the better the user experience of the page. See the Google WebPagetest documentation page for a detailed definition of Speed index and a basic description of the Speed index calculation. The solution within the JavaScript tag uses the same algorithm as WebPageTest, but it uses the visible elements that are captured from visually complete. These are the "real" page elements. The advantage to screenshot comparison (webpagetest.org) is that Visually complete is aware of the elements on the page and their timings. Screenshot comparison only reflects the visual changes of a page. So, if for example there were a rotating GIF that changes continuously, the Visually complete and Speed index times of webpagetest.org would be inaccurate. Speed index calculates an index by measuring the progress of the loading of a web page between certain markers, along with the percentage of elements that remain unloaded at a given point in time. (200ms * 100%) (nothing is loaded up to 200ms) (200ms * 60%) (already 40% are loaded by the first marker, i.e. 60% must be loaded to reach 100%) (200ms * 40%) (40% must be loaded to reach 100%) Speed index = (200ms * 100%) + (200ms * 60%) + (200ms * 40%) = 400 Speed index is only applicable for load actions because it uses the whole page as a reference for calculating the index. For example, if there is a small icon on a page that takes five seconds to load, but the rest of the page is loaded within two seconds, then Visually complete will be five seconds because the icon is the last element on the page. But the Speed index would be near two seconds because the main part of the page loaded within two seconds.	Load actions
Visually complete	The moment all content in the browser’s visible area is fully rendered. How is Visually Complete calculated? Visually complete calculation for load actions Visually complete starts observing DOM content after the JavaScript tag is injected. Observation stops when the Load event end is triggered and the last added element of the page is more than one second in the past. If there are recurrent changes on the page, Visually complete automatically times out 3 seconds after the Load event end triggers. All elements that are part of the page at the time Visually complete stops observing the page are used for the calculation. Visually complete checks if the elements added to a page are visible or within the visible area. If they are, then the time when the last visible element appears on the page is used for Visually complete. For external resources like images, visually complete uses the resource timings API of the browser to get the loading times, and not the time when the `<img>` tag is placed on the page. Visually complete calculation for XHR actions For XHR actions, the observation of the DOM content starts at the callback begin of the XHR action and ends 50 milliseconds after the callback end. Any mutations with external resources such as images, stylesheets or IFrames, cause the JavaScript tag to add a load listener to these resources. This extends the XHR action time to the last resource added within the observed timeframe. Visually complete is then calculated for these resources. Visually complete can differ from the action end time. But when visually complete is `-1` (default value), such as when no visible resources are added to DOM, the action end time is used for visually complete. The reason why only resources and not all elements are supported for XHR actions is because if there are parallel XHR actions and multiple observations at the same time, the elements appearing on the page can’t be correlated to the right action.	Load actions XHR actions
DOM content loaded	The moment the user agent fires the `DOMContentLoaded` event at the document.	Load actions
DOM complete	The moment the user agent sets the current document readiness to "complete".	Load actions
Load event start	The moment the load event is sent for the current document. If this event has not yet been sent, it returns 0.	Load actions
Load event end	The moment the load event for the current page is completed. If this event has not yet been sent, or is not yet completed, it returns 0.	Load actions
User action duration	The moment the page load is completed. How is User Action Duration calculated? The duration of a user action can be broken down into three components: Network time: the time required for data transfer Server time: the time consumed on the server side Frontend time: the time required for the browser to render the page So these components contribute to the overall duration of a user action. User action duration is calculated as follows: User action duration = (`loadEventEnd` or `endTimeOfLastXHR`) - `actionStart` where: -`actionStart`: `navigationStart` for page loads or "click time" for XHR actions and user navigations like a button click or click on a link -`endTimeOfLastXHR`: if XHR calls are triggered during the process and aren't finished before `loadEventEnd` then the end time of the last XHR call is used instead of the `loadEventEnd` time The user action contributors are calculated as follows: Server consumption = `responseStart` - `requestStart` Network consumption = (`requestStart` - `actionStart`) + (`responseEnd` - `responseStart`) Frontend time = direct from the W3C navigation timings Below you can view examples of user action contributors: User action contributors for a single instance of a user action within a user session User action contributors aggregated for one user action (i.e., across all user action instances) User action contributors aggregated for the entire application	Load actions XHR actions Custom actions

Note:
Speed Index and Visually Complete are only available on browsers that support mutationobservers. This includes the following browsers:

Microsoft Internet Explorer 11
Microsoft Edge 15 or later
Firefox 57 or later
Google Chrome 61 or later

Phase metrics

As opposed to milestone metrics, phase metrics imply a duration.

Metric	Description	Applicable to
Blocking	The time between the moment the browser realizes it needs to download a resource and the time that it actually starts downloading the resource. This includes the time spent on waiting for a free TCP socket, the time required for generating disk cache entries and the time spent in proxy negotiation.	Load actions
Application cache	The time spent checking any relevant application caches. It includes the time before the connection to the server is established.	Load actions
DNS lookup	The time spent on the domain name lookup for the current document.	Load actions
TCP connect	The time spent on establishing the connection to the server including SSL.	Load actions
Secure connect	The time spent on making the established connection to the server secure. This includes the SSL handshake and SOCKS.	Load actions
Request	The time spent on requesting the current document from the server until the first byte is received.	Load actions
Response	The time spent on receiving the response.	Load actions
Processing	The time between DOM loading and Load event start.	Load actions
OnLoad	The time spent on processing the load event.	Load actions
OnDOMContentLoaded	The time spent on executing `onDomContentLoaded` handlers.	Load actions
Response end	The elapsed time from when the first byte of the server response is received until either when the last byte of the current document of the response is received or when the response completes, whichever happens first.	XHR actions Load actions
Redirect time	The time spent on subsequent HTTP requests.	Load actions

Key performance metrics

From the metrics listed above, DESK has specified some as key. Key performance metrics enable you to select the ideal user experience metric for each of your applications. These key metrics provide you with valuable performance insights that promote success in your digital business. The key performance metrics include:

User action duration
Visually complete
Speed index
DOM interactive
Load event end
Load event start
HTML downloaded
Time to first byte

DESK allows you to choose the right performance metric for each application condition.

Milestone metrics

Visually complete calculation for load actions

Visually complete calculation for XHR actions

Phase metrics

Key performance metrics