Navigation Timing API

Learning about the Navigation Timing API is surprisingly similar to learning “how the Internet works.” In fact, if I was asked to sketch “how the Internet works” as a job interview question, I’d probably draw a timeline of events pretty similar to this:

Image: W3C Navigation Timing

Which, of course, is how the Navigation Timing API views the world, too.

The Navigation Timing API is an API that tracks navigation and page load timing. It’s especially useful for gathering information about the wait time perceived by the end user. Timestamps from along the page-load timeline (see diagram above) are stored in an object in the browser window, window.performance.timing. Doing some simple math using those timestamps can reveal the wait times hidden in parts of the process between clicking a link and seeing the fully-loaded page.

The navigationStart timestamp is collected the moment that the previous document is unloaded and the new page fetch begins. The browser looks in the cache, does a DNS lookup if it can’t find an entry, connects to the identified server, sends a request, receives the response (in bytes), and then processes the response into the fully-loaded page. All of these steps, and the transitions between them, are identified by events fired off by the browser. The Navigation Timing API notes these events and stores them as start and end times inside window.performance.timing.

The Navigation Timing API ends with the window’s load event, which fires when the DOM is complete and all images, scripts and links have loaded. However, many webpages continue to fire off AJAX calls after the page has loaded. AJAX calls might even replace additional page loads, as in the case of single-page apps where the full page loads only once.

These asynchronous, post-DOM-load requests might make it harder to understand total page load performance, but it’s not too difficult. How long do you wait for an AJAX response? How long does each Javascript callback (a function waiting for an asynchronous request to complete) take to finish running? These wait times can be tracked, too – although not with the Navigation Timing API. You might want to check out New Relic Browser Monitoring

Image: based on screenshot from New Relic Browser - Session Traces

Various Sources: