Home » Tutorials » JavaScript » Build Fast HTML5 App With Navigation Timing API

Build Fast HTML5 App With Navigation Timing API

Build Fast HTML5 App With Navigation Timing API

Everyone likes web app that load quickly. Thankfully, there is now an easy way for us to accurately measure our HTML5 app load speed & identify the performance bottleneck with Navigation Timing API.

In this tutorial, I’ll show you how to capture your web app performance data & ideas that you may try to speed up your web app for better user experience.

Tutorial Details

  • Difficulty: Intermediate
  • Technology: HTML5, JavaScript, jQuery
  • Minimum Supported Browser: Chrome, Firefox, IE 9, Safari, iOS Safari 9.2 & Android browser

To Capture Page’s Load Timing

Following code shows you the way to capture your page load timing, you have to make sure the API fires after the page’s load event has ended. In this case we set a timeout function to output the timing log 10 milliseconds after page load event has ended.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(window).load(function(){
    setTimeout(function(){
      var p = window.performance.timing;
      console.log(p);
  }, 10);
});
</script>

Interpret & Analyze the Navigation Timing’s Data

Save your HTML document and preview it in Chrome or Firefox. Open up the page inspector, checkout the timing log in the “Console” section, and you should able to see a list of the Navigation Timing’s Data:

Performance Timing Log

This list of data provide enough information for us to know how a user’s browser actually load your web app. Each row of data is an event, and put together to forms a timeline from when the user’s browser starts navigating until all the content has been processed by the browser.

HTML5 Navigation Timing Graph
Image taken from The Official website of World Wide Web Consortium (W3C)

There are 6 key metrics that we are going to focus on:

  • Network Latency: The time takes for the user’s browser to send request to the server and get the first byte of response back to the user’s browser. The formula to calculate network latency is responseEnd-fetchStart
  • Redirect Time: The time of redirection includes after receiving the last byte of the response of the last redirect. Formula is redirectEnd-redirectStart
  • DOM Parsing Time: The time taken by user’s browser to load and parse the DOM. Formula is domInteractive–domLoading
  • DOM Content Loaded Time: How long does the browser to load images, videos and execute any JavaScript code listening for the DOMContentLoaded event (Such as the $(document).ready event in jQuery). Formula is domComplete–domInteractive
  • Onload Page: How long does user’s browser takes to execute JavaScript that fires at onload event. Formula is loadEventEnd-loadEventStart
  • Total Page Load Time: How long does user’s browser takes to load the page from start to the end. Formula is loadEventEnd-navigationStart

Improvement Ideas

Now you have enough information to identify your web app performance bottleneck. If you have a very slow page load time, you may try to use the following ideas to improve your app performance:

  • Prefetch / Prerender: You could preload resources for the page your users might visiting next. To find out more about prefetch / prerender, please read Speed Up Page Loads Time Using Prefetch / Prerender
  • Lite Version of Web App: You could offer your users a better user experience by redirecting them to a LITE version of your web app that contains less info in a page.
  • Limit amount of information in a page: Set a cookie or a session in your user’s browser if they have poor connection, and separate your info into several pieces in several pages.
  • Async Script: Use Asynchronous JavaScripts as possible to avoid slow DOM parsing time.
  • Combine Resources: Combine your external JavaScripts, CSS Stylesheet and images for fewer HTTP request.
  • Optimize Coding Style: Write high performance JavaScript snippet to avoid cause of the “reflow” process. To find out more about writing high performance web app, please read Optimize HTML5 Web App’s jQuery Performance

Conclusion

You’ve just learned that HTML5 Navigation Timing API provides accurate insights for web developers to locate, identify & optimize web app’s performance for better user experience.

View Demo


Android, iOS Development Tutorials