Tuesday, September 1st, 2009

CSS Minification; Part 72; Alphabetizing

Category: CSS

Ray Cromwell wrote that great piece on JS compression and how the GWT compiler does smart things.

Barry van Oudtshoorn has written a CSS minifier that uses some of the same concepts that Ray talked about (ordering for best compression). Here is Barry:

I recently wrote a small CSS minifier in Java that optimizes your CSS output for gzipping. Essentially, it does most of what the YUI compressor does, but additionally, it ensures that property values are always ordered consistently. This means that the gzip algorithm can reduce the file size further.

This is in accordance with Google’s Best Practices documentation

In my testing, my CSS minifier’s raw output is actually slightly larger than that of YUI, but when compressed, it is noticeably smaller, thanks to the gzip optimisations. As this is the an early release, however, I have plans for various optimizations to the raw output which will further reduce its size, which in turn will help to reduce the gzipped size of the file even further.

The code is released under the MPL, and is freely downloadable from my website, at the address linked to above.

Posted by Dion Almaer at 6:31 am

3.2 rating from 25 votes


Comments feed TrackBack URI

Please reduce image sizes. It’s not rocket science.

Comment by sixtyseconds — September 1, 2009

Cool. I’ve been alphabetizing properties for a while now, for readability. Good to see this inadvertently offers a performance benefit too!

Comment by WillPeavy — September 1, 2009

Does the alphabetizing thing really help if you follow Google’s recommendation to use CSS rules only once? Sure, there are some rules like padding where you may have different values for the property, but it seems a bit negligible.

Comment by blepore — September 1, 2009

This site desperately needs a fluid width centre column.

Actually, you don’t need anything but the centre column.

Comment by Darkimmortal — September 1, 2009

Well “alphabetizing” does not improve compression. Ordering can help optimizing LZ77, but alphabetical order is not always the better choice.

Besides :

private void sortProperties(Property[] properties) {

CSS rules and instructions are order sensitive. Your implementation can break some stylesheets.

ex :
line-height: 18px;
font: 12px/16px sans-serif;

will be re-ordered to:
font: 12px/16px sans-serif;
line-height: 18px;

Comment by ywg — September 2, 2009

I’ve also been alphabetizing properties for readability for a while, at first it feels counter-intuitive to have for example height before width, but then after a while it becomes natural – and firebug does it automatically too.

@ywg is right though, the order can be sensitive to the style so it could break layout if you made it an automated process – best to have some kind of pre-commit hook that rejects if it see’s properties out of order…

Comment by simon000666 — September 2, 2009

Leave a comment

You must be logged in to post a comment.