Navigation Timing API

The Navigation Timing API provides data that can be used to measure the performance of a website. Unlike other JavaScript-based mechanisms that have been used for the same purpose, this API can provide end-to-end latency data that can be more useful and accurate.

The following example shows how you can measure the perceived loading time:

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

There are many measured events given in milliseconds that can be accessed through the PerformanceTiming interface. The list of events in order of occurrence are:

• navigationStart
• unloadEventStart
• unloadEventEnd
• redirectStart
• redirectEnd
• fetchStart
• domainLookupStart
• domainLookupEnd
• connectStart
• connectEnd
• secureConnectionStart
• requestStart
• responseStart
• responseEnd
• domLoading
• domInteractive
• domContentLoadedEventStart
• domContentLoadedEventEnd
• domComplete
• loadEventStart
• loadEventEnd

The window.performance.navigation object stores two attributes that can be used to know if a page load is triggered by a redirect, back/forward button or normal URL load.

window.performance.navigation.type:

window.performance.navigation.redirectCount will indicate how many redirects have taken place until the final page has been reached, if any.

The Navigation Timing API can be used to gather performance data on the client side to be sent to a server via XHR as well as measure data that was very difficult to measure by other means such as time to unload a previous page, domain look up time, window.onload total time, etc.

Examples

Calculate the total time required to load a page:

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

Calculate request response times:

var connectTime = perfData.responseEnd - perfData.requestStart;

Specification

• https://w3c.github.io/navigation-timing/

Browser compatibility