2007-07-02

Javascript compressed javascript considered harmful

Web browsers are downloading javascript files sequentially. They wait that the last javascript file is downloaded before rendering the page.

Consequently it's a common idiom in web developpment that javascript compressed javascript file will speed up download time and also speed up page rendering.

IMO it's a pain to maintain a source script and a compressed script. In addition debugging through a compressed javascript seems not easy. Does this practice really benefits browser rendering speed ?

For testing purpose I will take jQuery library that comes in two flavors : unpacked and packed. In addition jQuery could be ziped on the server with mod_deflate :

untouchedziped with mod_deflate
jquery 1.1.361.3k19.5k
jquery 1.1.3 packed21.0k11.0k
delta40.3k8.5k

It seems that the javascript compression reduce the size of the file even with mod_deflate activated. But is it really better ?

To know this I made a little test. I start merging jQuery library with my others javascript files to reduce the amount of requests on the server. I put the result on a production server with mod_deflate activated. Then I launch Firebug to get more informations :

First the typical result with jquery-1.1.3.pack.js :

Firebug shows jquery packed

Secondly the typical result with jquery-1.1.3.js :

Firebug shows jquery unpacked

I was not expecting a difference between these files but in this case (a powerful server with high bandwidth) and my laptop (core duo @ 1.66GHz) the javascript compressed file seems to takes more time to download. In fact I think it's because the javascript jQuery decompression and evaluation is part of the total time.

The common idiom about javascript compressed javascript is false. One more time Donald Knuth was right : "We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil."

If you want speed up your pages, you will get better results by using mod_deflate and by reducing the number of requests on javascript and CSS files by merging them together. On a Unix system it's simple :

$ cat jquery-1.1.3.js jquery.cookie.js my.javascript.js > merge.js