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.
- Difficulty: Intermediate
- 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.
var p = window.performance.timing;
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:
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.
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
- Total Page Load Time: How long does user’s browser takes to load the page from start to the end. Formula is loadEventEnd-navigationStart
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.
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.