Share via

Navigation timing

Navigation timing makes it easy to measure the real-world speed and performance of websites and locate problem areas that need tuning. For example, navigation timing can help you locate latency problems by helping you precisely monitor customer webpage navigation and track the timing of user activities. You can then more easily identify performance bottlenecks and find effective solutions to reduce latency and improve your website's speed and efficiency. The old system of measuring performance couldn't provide the complete end-to-end latency picture that navigation timing enables.

Both Windows Internet Explorer 9 and Internet Explorer 10 support the Navigation Timing API as defined in the W3C Web Performance Working Group specification Navigation Timing.

Measuring navigation timing

You can measure navigation timing in many different ways. We look at three ways to do this here.

Measuring display start

The following script calculates the end-to-end client side latency of the most recent page navigation.

<script type="text/javascript">
// Add load event listener.
window.addEventListener("load", loadTime, false);

function loadTime() {
  // Get current time.
  var now = new Date().getTime();
  // Calculate page load time.
  var page_load_time = now - performance.timing.navigationStart;
  // Write the load time to the F12 console.
  if (window.console) console.log(page_load_time);
<!- Main page body is here. -->

The JavaScript section in the head sets up an event handler for the load event. When the browser fires the load event, the loadTime function is called. The loadTime function first gets the current time with the JavaScript getTime method. Next, the performance.timing.navigationStart method returns the time immediately after the user agent finishes prompting to unload the previous document. The difference between these two timestamps is the user perceived end-to-end page load latency. This difference is displayed in the console, if F12 Tools is running.

Measuring the various navigation subsystems times

A typical page navigation goes through many phases before the page is displayed to the user. Navigation timing allows you to measure each of these subsystems separately in order to better find the bottlenecks. The following code measures the time it takes to establish a connection.

var t = performance.timing;
var n = performance.navigation;
if (t.connectEnd > 0 && t.connectStart > 0) {
  var connection_time = t.connectEnd - t.connectStart;
  if (n.type == n.TYPE_NAVIGATE) {
   if (window.console) console.log(connection_time);

This JavaScript code uses the performancetiming API to measure start and end connection times and the navigation object to determine if this was a page navigation. The script checks to see if the connectStart and the connectEnd properties are both greater than zero, to differentiate between a new or cached resource. Then connectStart is subtracted from connectEnd to determine the connection time. Finally, a check is made to make sure that the type of navigation was generated by user request. The difference is displayed in the console, if F12 Tools is running. This difference is the amount of time spent establishing a connection with the server to load your resource.

Using JSON

Not only can you use navigation timing to test your pages, you can gather data from your user's experiences and analyze the data for trends. You can use JavaScript Object Notation (JSON) to stringify your results, as in the example below, and send to your server for analysis:


Navigation timing provides a set of objects and properties that you can use to measure many aspects of page navigation. It exposes the following objects:

Object Description


Provides information about the navigation state.


Provides information about navigation timing.


Navigation timing exposes the following properties:

Property Description


Time when server connection is finished.


Time just before server connection begins.


Time just before document readiness completes.


Time after DOMContentLoaded event completes.


Time just before DOMContentLoaded starts.


Time just before readiness set to interactive.


Time just before readiness set to loading.


Time after domain name lookup.


Time just before domain name lookup.


Time when the resource starts being fetched.


Time when the load event is complete.


Time just before the load event is fired.


Time after the previous document begins unload.


Number of redirects since the last non-redirect.


Time after last redirect response ends.


Time of fetch that initiated a redirect.


Time just before a server request.


Time after the end of a response or connection.


Time just before the start of a response.


Reference to a performance timing object.


Reference to performance navigation object.


Reference to performance object for a window.


Type of the last non-redirect navigation event.


Time after the previous document is unloaded.


Time just before the unload event is fired.


API Reference



Internet Explorer Test Drive demos

Navigation Timing

IEBlog posts

W3C Web Performance: Continuing Performance Investments

Web Performance: When millisecond resolution just isn’t enough

Web Performance APIs Rapidly Become W3C Candidate Recommendations

The Year in Review: W3C Web Performance Working Group

A Web Standard Quickly: W3C Navigation Timing reaches Candidate Recommendation

Web Page Performance in a Standards Compliant and Interoperable way

Measuring Web Page Performance


Navigation Timing