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 t

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

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 3

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 4

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 5

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 "'".