Navigation Timing API

The Navigation Timing API 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.

Measuring navigation timing

You can measure navigation timing in many different ways. Let's look at a few, beginning by opening up the F12 Console Tool and exposing the PerformanceTiming object containing latency-related performance information.

//open the F12 tool and enter the following in the console to expose the PerformanceTiming object
performance.timing 

PermanceTiming object example

The example above displays the PerformanceTiming object for the Navigation Timing API W3C Spec Page.

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 Performance Timing 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 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
PerformanceNavigation Provides information about the navigation state.
PerformanceTiming Provides information about navigation timing.

Navigation timing exposes the following properties:

Property Description
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.

Specification

Navigation Timing Specification