How to organize minification and packaging of css and js files to speed up website?

Question

I am doing speed optimization for my website application. And I found some practises to do that. For example Best Practices for Speeding Up Your Web Site from Yahoo. Among them are:

• Minify JavaScript and CSS.
• Minimize number of HTTP Requests by combining several files (css, js) into one.

My question is what infrastructure, tools and building process you use or can recommend to perform that?

Answer 1

You can use YUI Compressor.

It can compress JavaScript as well as CSS. Just run it for all your files, then concatenate them into one 'package' file. You can either do that manually, write a Makefile or use some script to compress "just-in-time" on web request, although you might want to cache the resulting file.

Answer 2

According to the JavaScript Compression Rater, the most efficient tool is the YUI Compressor or JSMin.

Answer 3

Big fan of Dean Edwards /packer/ myself - comes in a variety of flavours.

Answer 4

The Yahoo tips are excellent. I use gomez to test the results of optimization efforts. Minification is a good step. I've found bigger impacts can usually be made by adjusting the way pages are put together (particularly in reducing how much images get cut up into little pieces to reduce the number of requests). Anyway, this yahoo blog gives a pretty good rundown of minification tools. I typically stay away from obfuscation unless there's a compelling reason beyond the relatively small performance kick. The actual steps to install and use a minification tool are relatively straightforward.

Answer 5

By following yahoo blog link I've found one real solution - "Make your pages load faster by combining and compressing javascript and css files" by Niels Leenheer.

Answer 6

Or you could just configure your HTTP server to GZIP compress all text documents.

Answer 7

I do ASP.NET, so I use CruiseControl.NET with NAnt for my build process. A part of this build process is compressing with YUICompressor which in my experience is the best compressor out there.

If you don't do ASP.NET, theres still the original CruiseControl with Ant that you can use in the same capacity.

The reason I find this a superior set up is because a) all the tedious stuff is automated and b) if you're testing on your own machine you dont have to debug a single super long string of JS :)

Answer 8

I've integrated minification to my deployment process. I do it in perl with packages JavaScript::Minifier and CSS::Minifier.

During my development, I want to keep the script expanded. I put some comments in my HTML so that my script knows which files to put togetheer and minify:

<!--- MinifyJS[js/minified-1.js] -->
<script src="..."></script>
<script src="..."></script>
<!-- end[js/minified-1.js] -->

<!--- MinifyCSS[css/minified-1.css] -->
<link ...>

A couple of regular expression, and I quickly get a "production" version with minified files.

Answer 9

For compressing everything before uploading it to web, this program is great both for CSS/JS/HTML:

http://www.w3compiler.com/

It's even possible to select areas not to compress, as it's not all MVC codes in your markup that supports getting compressed.

And it saves backup files each time it compress your files, so you can easily decompress it with just a click.

Answer 10

I've found Minify most useful for my PHP projects. Very easy to use, just saves time configuring minimization, compression and caching of CSS and JS files manually. Also has a neat grouping feature.

Some notes about YUI Compressor

1. YUI Compressor generates without line breaks at all while Minify has some.
2. Be careful if you have escaped strings. I've found out that YUI Compressor unescapes them. So strings like "\'" become "'".

Answer 11

I wrote my own custom manager for this. It uses google's closure compiler and compresses files only when needed in release mode. Check it out:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

Thanks

Guido Tapia