Navigation timing (Windows)

[アーティクル]
11/03/2017

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.

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.

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