Frontend optimizations for HTML5 web apps

I did a presentation in front of some colleagues some time ago and it was then when I realized how successful our frontend optimizations really are.

Our mobile web app which is running with angularJS and jQuery Mobile is loading over 1.6MB in more than 50 HTTP requests in local development mode. Only the laziest developers would give THAT to their customers.

After all optimizations done during grunt build, customers need to load only 250kB in 13 HTTP requests on their first visit. Although the number of HTTP seems a bit high, this is a appcache app and it contains all ressources ever needed for the app, including HTML files and all images, fonts and styles.

Because of appcache caching a returning visitor needs to only load 3kB for the whole app in 1 HTTP request. Thats, right. 3 kB! Thats the initial payload for the JSON data that the app loads from a REST service.

3kB instead of 1.6MB. How is that possible?

Here is a list of most optimzations that is done during grunt build:

  • all javascript files are concatenated and optimized with requireJS optimizer into one single javscript file. This single steps is gaining by far the most in size and HTP requests as we structure our code in small and meaningful modules/files. Side effect: optimizer creates javascript source maps so debugging is possible even in minized code on production.
  • all css files are concatenated and optimized into one single css file
  • all images (icons) are written as base64 into the css file as data URIs. Though the images are around 20% bigger, the browser saves heavily on fewer HTTP request which outweighs the bigger data by far!
  • an appcache manifest file is created during build and referenced inside the HTML files. The browser can then load the whole app during first visit and needs only to load dynamic data on subsequent visits.

That is only a part of the build process. What I learned during developing this build system, was the foundation what I did later in my angularJS skeleton project: ngStart

Grunt is a fabulous build tool and there is already a plugin for most, if not all frontend optimizations. You only have to configure them.

Leave a Reply

Your email address will not be published. Required fields are marked *