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.