CSS compression & combining / js minification - Better to do at runtime or at build time?

Question

I have to come up with a solution to compress, version (for caching purposes) and potentially combine our JS and CSS files and I've seen two dominant approaches so far:

1) At build time: As an MSBuild task or similar. 2) Dynamically at run time: As a custom HTTPHandler (we are ASP.NET btw) for .js and .css files, with something like this ending up in your pages:

<link rel="stylesheet" type="text/css" href="~/StyleSheetHandler.ashx?stylesheets=~stylesheets/master.css" /> 

Can anyone provide information of pro's and con's of each? Personally, I can't see the point of doing it dynamically and wasting CPU cycles at the time of each request (I guess you'd only do with the work first time and then cache, but still) but I get the feeling I might be missing something?

Thanks! Mark.

Answer 1

I think a good approach is to use different strategies for different environments:

• no compression for development (for developing & debugging)
• runtime compression for test environment (flexible, not performance-critical)
• buildtime compression for staging and production (tested, performance-critical)

I have some experience using the YUI compressor for both Javascript and CSS and have learned (the hard way) that testing minified JS and CSS is indeed very important.

Creating static minified JS and CSS files as part of your build for production has the following benefits:

• they are tested
• static files, can be served without ASP.NET overhead
• can be browser cached
• should be webserver-gzipped

Answer 2

The best way is to not do it at all, since all modern browsers and servers handle Gzip encoding. Look at the numbers:

• cfform.js - 21k
• cfform-minified.js - 12k
• cfform.js.gz - 4.2k
• cfform-minified.js.gz - 2.2k

This is a fairly large JS file with plenty of unnecessary whitespace but in the final equation you've saved a whopping 2k !! Not only that but thanks to caching this saving is per-visitor, not per-page. Whoo-hoo, now that was worth all the trouble wasn't it?

You'd save 10 times that by cropping a pixel width off the top of your banner and with 99% of your users on broadband you've saved them about 1 millisecond of download time. Break out the streamers and champagne!

JS compression is even worse, since you've just hit your clients with the burden of decompressing on EVERY PAGE LOAD. And the savings after gzip are just as miserable.

Seriously. The added complexity and debugging is not worth it unless you are targetting a mobile market (and even that assumes the users are still on CDMA, not 3G) or have a billion hits per day. Otherwise just don't bother.