Export (0) Print
Expand All

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.


<html>
<head>
<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);
}
 </script>
</head><body>
<!- Main page body is here. -->
</body>
</html>


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:


JSON.stringify(window.performance.timing);

Navigation timing APIs

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:

ObjectDescription

PerformanceNavigation

Provides information about the navigation state.

PerformanceTiming

Provides information about navigation timing.

 

Navigation timing exposes the following properties:

PropertyDescription

connectEnd

Time when server connection is finished.

connectStart

Time just before server connection begins.

domComplete

Time just before document readiness completes.

domContentLoadedEventEnd

Time after DOMContentLoaded event completes.

domContentLoadedEventStart

Time just before DOMContentLoaded starts.

domInteractive

Time just before readiness set to interactive.

domLoading

Time just before readiness set to loading.

domainLookupEnd

Time after domain name lookup.

domainLookupStart

Time just before domain name lookup.

fetchStart

Time when the resource starts being fetched.

loadEventEnd

Time when the load event is complete.

loadEventStart

Time just before the load event is fired.

navigationStart

Time after the previous document begins unload.

redirectCount

Number of redirects since the last non-redirect.

redirectEnd

Time after last redirect response ends.

redirectStart

Time of fetch that initiated a redirect.

requestStart

Time just before a server request.

responseEnd

Time after the end of a response or connection.

responseStart

Time just before the start of a response.

timing

Reference to a performance timing object.

navigation

Reference to performance navigation object.

performance

Reference to performance object for a window.

type

Type of the last non-redirect navigation event.

unloadEventEnd

Time after the previous document is unloaded.

unloadEventStart

Time just before the unload event is fired.

 

API Reference

PerformanceNavigation
PerformanceTiming

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

Specification

Navigation Timing

 

 

Show:
© 2014 Microsoft