Navigation timing api

Navigation timing api

In this article I’ll introduce you to a new JavaScript API, called the Navigation Timing API, that will help you in measuring the performance of your web pages.

What is the Navigation Timing API?
The Navigation Timing API exposes properties that offer information about the time at some events happen, like immediatly before the navigation start. Very helpful to debug the performance of our project.
For example, if you want to know if your website has a good performance, you can use this API and track all the information sending the information via AJAX. In production server it's very good to know differents page loads and DNS lookups times.

In my case, before using this API, I use code similar with that:

      <script>
         var start = new Date().getTime();
         window.onload = function() {
            var end = new Date().getTime();
            console.log('Loading time: ' + (end - start));
         }
      </script>

This code is very simple and easy to understand, but you do not have information about the loading time. You only have the total time without details.

With the Navigation Timing API you can do it:

      <script>
         window.addEventListener('load', function() {
            var now = new Date().getTime();
            console.log('Loading time: ' + (now - performance.timing.navigationStart));
         });
      </script>

Navigation timing API properties
The Navigation Timing API is exposed in the timing property of the window.performance object. Here is a list of the events which timing offered:

  • navigationStart: The time immediately after the browser finishes prompting to unload the previous document. This is the beginning of the page load time as perceived by the user.
  • unloadEventStart: The time immediately before the previous document’s unload event is fired.
  • unloadEventEnd: The time immediately after the previous document’s unload event is fired.
  • redirectStart: The start time of a URL fetch that initiates a redirect.
  • redirectEnd: If any redirects exist, this is the time after the last byte of the last redirect response is received.
  • fetchStart: The time immediately before the browser begins searching for the URL.
  • domainLookupStart: The time immediately before the DNS lookup for the URL occurs.
  • domainLookupEnd: The time immediately after the DNS lookup occurs.
  • connectStart: The time immediately before the browser connects to the server.
  • connectEnd: The time the connection to the server is established.
  • secureConnectionStart: If the HTTPS protocol is used, this is the time immediately before the secure handshake begins; otherwise this value is undefined.
  • requestStart: The time before the browser sends the request for the URL.
  • responseStart: The time immediately after the browser receives the first byte of the response.
  • responseEnd: The time immediately after the browser receives the last byte of the response.
  • domLoading: The time immediately before the document.readyState value is set to loading.
  • domInteractive: The time immediately before the document.readyState value is set to interactive.
  • domContentLoadedEventStart: The time immediately before the DOMContentLoaded event is fired.
  • domContentLoadedEventEnd: The time immediately after the DOMContentLoaded event is fired.
  • domComplete: The time immediately before the document.readyState value is set to complete.
  • loadEventStart: The time immediately before the window’s load event is fired.
  • loadEventEnd: The time immediately after the window’s load event is fired.

Browser support
The support is very good on both mobile and desktop. You can check caniuse.com

To prevent javascript errors in your website, you can use this code to check if the Navigation Timing API is enabled in your browser:

function isNavigationTimingApiEnabled() {
   return !('performance' in window) || !('timing' in window.performance) || !('navigation' in window.performance;
}

if ( isNavigationTimingApiEnabled() ) {
  // API not supported
} else {
   // API supported
}

Conclusions
The performance of your project is a major concern for devopers today. This API is a very nice evolution and its support is very good. So you can start using it today.