Navigation Timing API: How to Track Your Website Loading Performance

The Navigation Timing API provides data that can be used to measure the performance of a web site. Unlike JavaScript-based libraries that have historically been used to collect similar information, the Navigation Timing API can be much more accurate and reliable.

This article currently describes Navigation Timing Level 1. There is a specification for Level 2, but it is not yet covered here.

Concepts and usage

You can use the Navigation Timing API to gather performance data on
the client side, which you can then transmit to a server using

XMLHttpRequest

This API lets you measure data that was previously difficult to obtain, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's

load

Interfaces

Performance

The

window.performance

timing

navigation

PerformanceNavigationTiming

Provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. For example, this interface can be used to determine how much time it takes to load or unload a document.

PerformanceTiming

Used as the type for the value of

timing

PerformanceNavigation

The type used to return the value of

navigation

Performance

window.onload

Examples

Calculate the total page load time

To compute the total amount of time it took to load the page, you can use the following code:

const perfData = window.performance.timing; 
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

This subtracts the time at which navigation began (

navigationStart

loadEventEnd

Calculate request response time

You can calculate the time elapsed between the beginning of a request and the completion of getting the response using code like this:

const connectTime = perfData.responseEnd - perfData.requestStart;

Here, the time at which the request was initiated (

requestStart

responseEnd

Calculate page render time

As another example of an interesting piece of data you can obtain using the Navigation Timing API that you can't otherwise easily get, you can get the amount of time it took to render the page:

const renderTime = perfData.domComplete - perfData.domLoading;

This is obtained by starting with the time at which loading of the DOM and its dependencies is complete (

domComplete

domLoading

Specifications

Browser compatibility

Window.performance.timing

Credits

• Source: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
• Published under Open CC Attribution ShareAlike 3.0 licence