Comparison CSS cleanup/compress/optimizer tools

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.

Advertisements

9 Responses to Comparison CSS cleanup/compress/optimizer tools

  1. Joost says:

    relatively good list, but also there’s dojo toolkit which has its own css compressor

  2. idoblogging says:

    Do you have a link to that? I can only find stuff about the Dojo Javascript compressor, not anything about a CSS compressor.

  3. […] Sikerült találnom egy olyan blogpostot, amelybe ezek az eszközök össze vannak hasonlítva: https://idoblogging.wordpress.com/2007/02/10/comparison-css-cleanupcompressoptimizer-tools/ […]

  4. jameswillisisthebest says:

    This is my first post
    just saying HI

  5. Walter says:

    Also, take a look at:
    http://www.lonniebest.com/FormatCSS/

    That’s the one I use.

  6. Mike says:

    I recently wrote a mod_perl output filter which sits inside Apache. It intercepts requests for .css files and then “compresses” them on the fly before sending. It’s not gzip compression, what it does is strip whitespace, comments, newlines etc. Check it out here: https://secure.grepular.com/blog/index.php/2009/10/28/compressing-css-on-the-fly/

  7. great information. thanks for sharing it.

    you mention the free online tool at:
    http://csstidy.sourceforge.net

    when i visited that site, the link for the online tool leads to a “page not found.”

    perhaps this is the same tool but at a new location.
    in any event, i tried it and had very good results:
    http://csstidyonline.com

    thanks again

  8. idoblogging says:

    csstidy.sourceforge.net still works fine for me, might have been a temporary glitch.

  9. Ritesh says:

    There’re alot of tools available now, ProCSSor, styleneat, lonniebest etc..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: