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'd say its better to do on first request and cache. the reason for this is so that you can update the css as needed in a readable format without having to go back to rebuilding. you can base your cache on the css file so as soon as it is changed the cache refreshes.

Josh

Answer 2

You do it at runtime but only when you need to. This gives you the most flexibility. It's particularly an issue with PHP which otherwise has no build step (ie you don't want to add one when you don't have one otherwise) but still an issue for other platforms that do.

At the risk of self-promotion, you might want to read Supercharging Javascript in PHP and Supercharging CSS in PHP, which outline the issues, approaches and best practices. The examples are in PHP but the code itself is trivial. The issues and principles apply to any Web platform.

Answer 3

I think you should make it at run time, except if your CSS and JS files are really huge (more than 1MB). The browser cache can be force by setting a few http headers, and when you want your application to force a reload at the client side, just change an HTTP param :

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

You can change the token to force the reload of the CSS at client side.

Answer 4

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 5

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.