Runtime performance metrics

What is runtime performance

• Runtime performance metrics provide detailed data about page navigation. This data covers the time spent on each step of the process, from the moment a user clicks a link until the page finishes loading.

• Runtime performance metrics are part of the Performance API. This API provides a set of precise timestamps, as shown in the following figure:

Field descriptions

• navigationStart: The timestamp when the browser starts to navigate to a new document.

• redirectStart: The timestamp when the first redirection request is initiated. If no redirection occurs, this value is 0.

• redirectEnd: The timestamp when the last byte of the last redirection response is received. If no redirection occurs, this value is 0.

• fetchStart: The timestamp when the browser starts to request the resource. If the resource is retrieved from the cache, this is the timestamp when the browser starts to read from the cache.

• domainLookupStart: The timestamp when the browser starts domain name resolution. If no DNS request is made, this value is the same as fetchStart.

• domainLookupEnd: The timestamp when the browser completes domain name resolution. If no DNS request is made, this value is the same as fetchStart.

• connectStart: The timestamp when the browser starts to establish a connection with the server. If no connection is established, this value is the same as domainLookupEnd.

• secureConnectionStart: If the resource is loaded over HTTPS, this is the timestamp when the browser starts the handshake process. If HTTPS is not used, this value is 0.

• connectEnd: The timestamp when the browser completes the connection with the server. If no connection is established, this value is the same as domainLookupEnd.

• requestStart: The timestamp immediately before the browser starts to request the resource from the server, cache, or a local resource.

• responseStart: The timestamp when the browser receives the first byte of the response from the server, cache, or a local resource.

• responseEnd: The timestamp when the browser receives the last byte of the resource or when the connection is closed, whichever comes first.

• unloadStart: If a previous document exists, this is the timestamp when the `unload` event handler for the previous document starts to execute.

• unloadEnd: If a previous document exists, this is the timestamp when the `unload` event handler for the previous document finishes execution.

• domLoading: The timestamp when the browser starts to parse the HTML document.

• domInteractive: The timestamp when the Document Object Model (DOM) is fully built and can be interacted with using JavaScript.

• domContentLoaded: The timestamp when the DOM and CSS Object Model (CSSOM) are ready, and the browser can start building the rendering tree.

• domComplete: The timestamp when the document and all its sub-resources are fully loaded.

• loadEventStart: The timestamp when the `load` event handler for the current document starts to execute.

• loadEventEnd: The timestamp when the `load` event handler for the current document finishes execution.

Load

Load is a key runtime performance metric. It represents the time from the start of navigation until the page and all its resources, such as images, style sheets, and scripts, are fully loaded and processed.

How to measure runtime performance

The page loading process includes several key stages, such as DNS resolution and TCP connection. You can measure the duration of each stage to analyze performance.

Calculation method

How to get metrics

In JavaScript, you can use the performance.timing API to obtain the various timestamps for runtime performance. Then, you can calculate each metric using these timestamps and the formulas.

References

• Navigation timing: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Navigation_timing

• PerformanceNavigationTiming object: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming

• Resource timing: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing