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:
Constant | Value | Description |
---|---|---|
TYPE_NAVIGATE |
0 | Navigation started by clicking on a link, or entering the URL in the user agent's address bar, or form submission, or initializing through a script operation other than the ones used by TYPE_RELOAD and TYPE_BACK_FORWARD as listed below. |
TYPE_RELOAD |
1 | Navigation through the reload operation or the location.reload() method. |
TYPE_BACK_FORWARD |
2 | Navigation through a history traversal operation. |
TYPE_UNDEFINED |
255 | Any navigation types not defined by values above. |
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
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 6.0 | (Yes) | 7 (7) | 9 | 15.0 | 8 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.0 | (Yes) | 15 (15) | 9 | 15.0 | 8 |