This is a widget area - If you go to "Appearance" in your WP-Admin you can change the content of this box in "Widgets", or you can remove this box completely under "Theme Options"

Profiling Page Loads with the Navigation Timing API

Pinned on September 2, 2012 at 11:34 am by Elizabeth Jones

Repin
Profiling Page Loads with the Navigation Timing API

Concept image depicting Time and Motion on a black background.

Page load time is one of the most important aspects of user experience on the web. When pages load too slowly, users quickly become frustrated and take their business elsewhere. Unfortunately, troubleshooting a slow page load is not typically a straightforward process because many factors contribute to the overall time. For example, a page’s load time can be influenced by the user’s browser, network conditions, server load, and application code, among other things.

As a developer, methods for gathering data on these various factors has been limited in the past. For many developers, the JavaScript Date object has long been the standard for gathering performance data. For example, the following code measures load time by comparing timestamps once the page’s load event handler is invoked.

var start = new Date();
window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

There are several problems with this approach. First, JavaScript time is notoriously inaccurate. Second, using the Date object introduces overhead and clutters the application code. Third, the Date object can only measure the execution time once the code is running in the browser. The Date object cannot provide any data regarding the page load process involving the server, network, etc.

In order to provide more accurate and comprehensive page load data, the W3C has proposed the Navigation Timing API. The proposed API provides more detailed timing information throughout the page load process.  Unlike the Date object, the navigation timing API can provide measurements related to DNS lookup, TCP connection establishment, page redirects, time spent building the DOM, and various other metrics. Navigation timing is also built directly into the browser, meaning that no additional overhead is created.

Detecting Support

The Navigation Timing API is currently only supported in Internet Explorer 9+, Firefox, and Chrome. Therefore, support for the API should be detected before attempting to use it. The API is defined in the window object as “window.performance.timing”. The following function detects whether or not the API is supported.

function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}

Recorded Events

The API records the time when numerous milestones in the page load process occur. Each of these events is stored as a property of the “window.performance.timing” object. The following list describes each event. If a given event does not occur (for example a page redirect), then its value is zero.  Note: Mozilla claims that the events occur in this order.

Navigation Types

The Navigation Timing API also defines an interface for determining how a user landed on a particular page. The “window.performance” object also contains a “navigation” object, which contains two properties ― “type” and “redirectCount”. The “type” property provides the method by which the user navigated to the current page. The following list describes the values that “type” can hold.

The “redirectCount” property contains the number of redirects taken to the current page. If no redirects occurred, or if any of the redirects were from a different origin, then “redirectCount” is zero. The following example shows how the navigation data is accessed.

var navigation = window.performance.navigation;
var navType = navigation.type;
var redirectCount = navigation.redirectCount;

Making Sense of the Data

The Navigation Timing API is useful for calculating certain components of page load time. For example, the time taken to perform a DNS lookup can be calculated by subtracting “timing.domainLookupStart” from “timing.domainLookupEnd”. The following example calculates several useful metrics. “userTime” corresponds to the total page load delay experienced by the user. The “dns” and “connection” variables represent the times taken to perform DNS lookup and connect to the server, respectively. The total time taken to send a request to the server and receive the response is stored in “requestTime”. Finally, the total time to complete the document fetch (including accessing any caches, etc.) is stored in “fetchTime”. Notice that the setTimeout() function is called from within the window load event handler. This ensures that the navigation timing data is not used until immediately after the load event finishes. If the timing data were to be accessed from the load event handler, the value of “timing.loadEventEnd” would be zero.

window.addEventListener("load", function() {
  setTimeout(function() {
    var timing = window.performance.timing;
    var userTime = timing.loadEventEnd - timing.navigationStart;
    var dns = timing.domainLookupEnd - timing.domainLookupStart;
    var connection = timing.connectEnd - timing.connectStart;
    var requestTime = timing.responseEnd - timing.requestStart;
    var fetchTime = timing.responseEnd - timing.fetchStart;
    // use timing data
  }, 0);
}, false);

The Navigation Timing API can be used in conjunction with Ajax calls to report actual user data back to a server. This is useful because it allows developers to see how the page behaves for users in the real world. The data can also be used to create a visualization of the page load process. In fact, Google Analytics already incorporates navigation timing into its reports.

Things to Remember

Comments

Write a comment