Fri 10 February 2012 | -- (permalink)

The conventional wisdom these days is that you ought to minify your CSS in order to reduce the amount of data sent over the wire and reduce the load time of your page. In practice, minification means stripping out whitespace and comments, which are useful for human readers but unnecessary for browsers.

But I've been thinking about gzipping lately, which most web browsers and servers will do for you transparently. A good compression algorithm ought to compress away most of the whitespace (though it won't strip out comments, obviously). So I ran some numbers on the main.css from one of my websites. I saved both the unminified version, and one minified with the YUI Compressor. Their sizes:

brent.tubbs hedy tmp $ ls -lh *css
-rw-r--r--  1 brent.tubbs  staff    38K Feb 10 09:13 main-minified.css
-rw-r--r--  1 brent.tubbs  staff    53K Jan 23 14:31 main.css

A 15K savings. Not bad, but probably also not noticeable. Then I gzipped both. Their sizes after gzipping:

brent.tubbs hedy tmp $ ls -lh *gz
-rw-r--r--  1 brent.tubbs  staff   8.4K Feb 10 09:16 main-minified.css.gz
-rw-r--r--  1 brent.tubbs  staff    11K Feb 10 09:16 main.css.gz

After gzipping, the difference in file size is 2.6K.

I'm not going to dispute that smaller is better, but I seriously wonder whether such a small improvement is worth the costs, such as the time spent integrating minification into your workflow, and the inability for a human to read the css on the live site. I tend to think it's not.