Comparison CSS cleanup/compress/optimizer tools

February 10, 2007

Introduction

This article gives a quick overview of the different features of several CSS cleanup and optimisation tools (so no manual cleanup tips are given here).
For each a list of features is given and any other related useful links. The one I found the best suitable for what I wanted to do (cleanup) is at the top. But definitely check the other entries too, they are in no particular order, and they might be fitting your needs.
At the end of the article a bunch of generic tips are given.
Note the distinction you need to make between tools that cleanup your CSS and tools that compress your CSS before it is sent to the browser.
CSS cleanup (often also called optimisation): cleans up the CSS, for example by removing comments and unnecessary spaces and newlines.
CSS compression: before the CSS is sent to the browser, it is compressed with for example gzip.
Both reduce the amount of data for the CSS that is sent back to the browser. The cleanup does this by reducing the size of the plaintext CSS file. CSS compression does not modify the plaintext contents of the CSS, but compresses the CSS contents before it is sent over. When it arrives at the browser, it is decompressed
Thus, for optimal minimal CSS size, you should first do a cleanup and have it compress before it is sent to the browser.

Here we go

Tips

Below are several tips when considering any of the CSS cleanup and compression tools:

  • Double check the tool for what it does with browser hacks! Some tools might delete them!
  • For performance reasons, it is not recommended to have the cleanup done dynamically. That is when you would let for example run CSSTidy over the CSS *each time* a user requests a page.
  • When using compression, make sure you check all the browsers you want to support with your site actually do support compression.
  • Caching can be an issue was reported somewhere… forgot where 😦
  • Validate your CSS before and after you cleanup and/or compress it at: http://jigsaw.w3.org/css-validator/

Other stuff

And finally, here are a couple of other articles that do some comparisons between cleanup/compression tools.

  • This one
    • Here are 4 optimizers (cleanup) listed and compared in their compression rate.
  • And this one
    • Another CSS compression site referenced plus Javascript and HTML compression. Also a reference to an article in the comments that HTML zipping not always works, at least not for IE5.

Soooo…

What do you think? Any tools I missed that you use?

Post of this on digg.