While a lot of people are out to optimize their sites/blogs, most everyone seems to skip over CSS.

I have been spending some time looking at CSS Optimization tools today. I wanted something free, online, and easy to use. And of course, something that worked. There are actually quite a few websites that fit the bill, and some of them are easier to use, produce more friendly code, and others are a bit harder to use, but can produce amazing results.

I tested the CSS Optimizer, Icey’s CSS Compressor, Flumpcakes CSS Optimiser, and CleanCSS to see which one could compress some default CSS files from popular websites the best.

I chose six sites:

  • Digg.com - poster boy of web 2.0, and a nice looking design to boot.
  • Slashdot - poster boy of ‘yesterday’. Moved into CSS relatively late, but still serving up a lot of pageviews.
  • Filmsy - a blog part of the BloggyNetwork, I think it has a very nice design
  • iBegin - nice local search engine I was using while in Toronto
  • Download.com - one of the most popular sites to go CSS
  • ESPN - a totally non-tech demographic, and also had a very publicized shift to CSS

CSS optimizers do a variety of voodoo magic to get the end result. This includes merging similar classes, removing useless properties, removing whitespace, and so forth. This can lead to code that is not very easily read by you or I, but for larger CSS files, it can condense the file size so much that it really makes a big difference in page loading times.

Many broadband users might not think this matters much, as most websites seem to load fast for them, but if each site you went to loaded even 10% faster, think of all the time it could save you over the course of a week, a month or even a year. The bandwidth savings for the website operator can also be immense. I would recommend that you always keep a copy of your human readable CSS code so that if you ever need to make any changes it does not take you a long time to figure out what you need to change, and then you can re-optimize it.

The Results
I ran all these tests with the tools being on their default settings.This might not have given them all equal footing, but I think it is how most of us will use them because we don’t know what options to turn on or off, and some tools did not have specialty options that could be turned on or off.

Digg was our first guinea pig. Before optimization Digg.com’s main CSS file was 30.56 KB.

Site After Reduction
CSS Optimizer 25.74 KB 9.89% (failed: moves Popular stories and upcoming stories tabs next to Technology header and messes up Digg Home button)
Icey CSS Compressor 16.69 KB 45.39% (failed: changes padding/margins on some items. Spaces things out more)
Flumpcakes CSS Optimiser 28.26 KB 5% (failed: Messes up Digg Home button)
CleanCSS 26.038 KB 16.8%

Slashdot recent redesign resulted in a CSS file of 19.1 kilobytes large. The CSS optimizers still delivered, shrinking the filesize quite a bit.

Site After Reduction
CSS Optimizer 15.01 KB 21.38%
Icey CSS Compressor 9.68 KB 49.38%
Flumpcakes CSS Optimiser 16.9 KB 11%
CleanCSS 15.234 KB 22.1%

Filmsy was next. This one had the smallest CSS file, clocking in at only 11.39 KB. Nevertheless, we achieved compression of almost 50%!

Site After Reduction
CSS Optimizer 9.25 KB 18.85%
Icey CSS Compressor 6.03 KB 47.08%
Flumpcakes CSS Optimiser 9.4 KB 17%
CleanCSS 8.27 KB 29.1%

Next up is iBegin Toronto. A nice search engine, its CSS file was 22.79 kb

Site After Reduction
CSS Optimizer 16.17 KB 29.04% (failed: font-size got larger)
Icey CSS Compressor 10.04 KB 55.95%
Flumpcakes CSS Optimiser 19.28 KB 12% (failed: font-size got larger)
CleanCSS 17.134 KB 26.6% (failed: font-size got larger)

Second to last came Download.com. The move to CSS-P made a lot of noise, and we thought it would be interesting to see what benefits a large company could get. The CSS file itself was a 54.2 kb, largest of all sites we tested.

Site After Reduction
CSS Optimizer 17.36 KB 32.39% (failed: Fonts and Padding on elements change)
Icey CSS Compressor 54.3 KB 0%
Flumpcakes CSS Optimiser 20.0 KB 17% (failed: Fonts and Padding on elements change)
CleanCSS 45.699 KB 17.8%

Last up came ESPN. Alongwith Download.com, these two sites are the most mentioned when it comes to the viability of CSS on large-scale websites. ESPN’s CSS clocked in at 25.68 kb.

Site After Reduction
CSS Optimizer 17.36 KB 32.39% (failed: Fonts and Padding on elements change)
Icey CSS Compressor 7.74 KB 69.84%
Flumpcakes CSS Optimiser 20.0 KB 17% (failed: Fonts and Padding on elements change)
CleanCSS 18.944 KB 27.9%

Condensed Table

Site CSS Optimiser Icey Compressor Flumpcakes Clean CSS
Digg.com failed failed failed 16.8%
Slashdot 17.45% 51.21% 9% 21.9%
Filmsy 18.85% 47.08% 17% 29.1%
iBegin failed 55.95% failed failed
Download.com failed 45.49% 0% 27.9%
ESPN failed 69.84% failed 27.9%
Average: 18.15% 53.91% 8.67% 24.18%

The clear winner here is Icey’s CSS Compressor, blowing away the rest. It even shows the compressed code with color coding, making it easier to see the changes they made and how its formatted. It also makes it easier to read that the output of most other tools.

In second place seems to be CleanCSS which is based on csstidy 1.1. It also shows syntax highlighting which makes it easy to understand. They also list the changes they made, and any errors they noticed.

In third comes CSS Optimizer which is one of the simplest of them all. It does not have the bells and whistles of the previous two, but is much nicer looking than our last place entrant, Flumpcakes CSS Optimiser.

Flumpcakes has a few more options than CSS Optimiser, but it does not have the same simple look. The results page in my personal opinion is ugly, and does not even tell the unit of measurement used for comparison.

Conclusions
CSS optimization is a very valid form of speeding up downloads without having to sacrifice much (just legibility). With the average dialup user downloading at 3kb/s, savings of just 10kb can mean the page loads a stunning 3 seconds faster. And just imagine ESPN with savings of almost 18kb. Multiple by the large traffic the site gets, and those are some real solid promotion-worthy savings. So while this may not be important whilst you use a broadband connection, just you wait until you go visit your grandparents.

Digg this Link

Do you like this article? Submit it to Blogosphere News!

Related Posts