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 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.