Javascript loading optimization with YUICompressor and output piping

The YUI Compressor is a Java tool that will take any Javascript file you give it and output a minified version. The minified version will remove all unnecessary characters as well as optimize the code so that it takes up as little space as possible; there is also a side benefit of code obsfucation that makes it a little harder for visitors to view your source code.

While using the minfier will improve the performance of your site, it is much better to reduce the number of asset requests by combining as many Javascript files as possible. This can be achieved using a script similar to the following:

echo "Creating default layout min js ..."
java -jar ~/tmp/bin/yuic.jar jquery.min.js > layouts/min.default.js
java -jar ~/tmp/bin/yuic.jar layouts/default.js >> layouts/min.default.js

With the above script the two files that I use in the default template of my application is combined into just one file. Please note that the first compression line pipes the output by replacing, using >, the contents of min.default.js and the second (and any other lines) will append to min.default.js using >>. Please note that the script assumes that you have installed the YUI Compressor in your tmp directory, your actual YUI Compressor path and executable file name will be different.

The example I used is a very simple case that doesn't actually require such optimization. However if you have a complicated website that utilizes 10 different jQuery plugins that even if all are cached with change timestamp checking time of 200ms, the script can save almost two seconds from your page's loading time.


Anonymous said...

Good posting! more professional web templates at its a
easy download.

James said...

You need to take part in a contest for one of the finest websites online. I'm going to recommend this web site!
verhuizen gouda

James said...

Very Useful information, this is both good reading for, have quite a few good key points and I learn some new stuff from it too
hardsten keukenblad

Post a Comment