Minifying JS/CSS files

I have a template that has over 20 js/css files that it references to and of course this makes for a lot of http requests. I thought about stitching them together with php using minijs.php/mini.php but the problem Im seeing is the page seems to load slower when using minijs.php/mini.php. I used YSlow and just having each one linked individually it shows 3 seconds to load, when I use the minified solution it takes 7-10 seconds to load, even when cached. Does anyone recommend a better solution or do you even re开发者_如何学Ccommend combining them all together dynamically like this?

Yes, I do recommend combining the files and minifying them, ideally using either YUI Compressor, Google Closure Compiler, or, what jQuery recently switched to, UglifyJS.

As for a bit of how and why, read this and search Google for "why should I combine web site assets?".

Also bear in mind that this should be a preprocessing step, or at the very least something that is rendered once and cached and thereafter served by a static file server (Apache or Nginx, php should not be involved).

Check this python script.

http://github.com/hkasera/minify

It minifies js as well as css files too. It stores detailed log files and you can add this script as a git hook and save yourself from doing it manually everytime. I have created it during a project and it helped me a lot.

Hope it may help!

you can use many online tools which have features for compressing and combining multiple files. for javascript compression you can use jsCompressor and for css you can use CSS compressor CSSCompressor