Should You Minify Resources in Cordova/PhoneGap Apps?

In a previous post, I researched the load times of Cordova when using jQuery and jQuery Mobile. Now, I want to dig deeper on how you should load your files in a Cordova application. This time I’m focusing on whether you should minify your JavaScript and CSS resources. I mean the local files which are not loaded over a network. I think the general belief is that there is no need to minify the files as they are loaded fast from the local filesystem. However, a smaller file will still probably be loaded and parsed faster, but the question is: how much faster?

Measurement setup

Like the last time, I set up a really basic application which essentially loads jQuery Mobile (both JS and CSS, as well as the required jQuery). I want to make it clear that jQuery Mobile is not the point of this post, it is simply a popular library of significant size so that the minified files are clearly smaller than non-minified. I have two versions of the app, one of which loads the minified files and the other non-minified files. The app measures the time it takes for the files to be loaded and parsed. To be more precise, it measures the load time of CSS, JavaScript, as well as the time for the body’s load event to fire.

To get reliable numbers, I measured both apps twenty times and calculated the averages. Furthermore, I closed all running apps on the devices, disabled background refresh, and put the device in flight mode. I did the measurements on iPhone 5S, 3rd generation iPad, and the retina iPad Mini with the latest version of iOS7.

Results

The results for the total load time (CSS and JS) on the three devices are shown in the figure below. There isn’t much to add to the image, except stating that the minified version loaded around 10% faster (or, that the non-minified version is 11% slower). The differences are statistically significant (Student’s t-test) and most probably not due to randomness.

The Takeaways and Conclusions

So what can we learn from the results? I can definitely say that the minified versions load faster. And minifying the resources offers an easy way to shave off 10% of the load time. Though, in absolute numbers, the time saved is not very much. But every millisecond counts and can effect your apps financial bottom line. If you are already using some build tool like Grunt or Gulp in your development process, adding a step to minify your code should be simple, so there is no reason not to minify and make your application faster.


Want to get more posts like this to your inbox?

Sign up for my newsletter to get an email on new posts like this. I don't email you too often, only when I have a new interesting post to share with you.