Minifying JS/CSS files

Question

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 recommend combining them all together dynamically like this?

Answer 1

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).

• John: On a side note that link you gave me, the guy uses a php script to minify js/css and then cache it. Your saying that is incorrect? It shouldnt involve using a php script to minify the scripts and combine them?
• Brian Donovan: It's okay to use php once, but you absolutely must cache it if you're going to see any speed benefits. It was unclear from your post whether you were doing that (i.e. you said "even when cached", but I couldn't tell if that meant browser cache or server cache).
• AngerClown: Ideally, the solution you use should also generate a unique id for the bundle - keyed off of startup time, build number or similar . This will allow a 'far future Exipres header' to be set so clients should only download things once.

Answer 2

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!

Answer 3

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