CSS Optimization: Make Your Sites Load Faster for Free
by David Peralty on August 17th, 2006 
267 Comments
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.
thanks
bendende thanks efe mucu.
I had some problems with my css. Thanks for the article!
Thanks a lot for this nice article.
Not only interesting for beginners – good work. Thx!
i normally use http://www.cssslick.co.uk (also very efficient)
Very useful, thanks
web tasarımı, web tasarım , İstanbul web tasarımı, web sitesi tasarımı, internet sitesi tasarımı, internet sayfası tasarımı, web sayfası, web sitesi, profesyonel web tasarımı
Its pretty good. It worked for me!! Thanks.
Really good article. I’m not so kind with css, but your article helped a lot.
SOS! My auto was broken on ave. Must I call to repairs or 911?
Спасибо!
thanks you:)
Wir sind gefangen auf einem Planeten, den wir selbst angezündet haben. Fast acht Milliarden Menschen in Not. Der Fluchtweg ist uns versperrt. Zwischen uns und einem möglichen sicheren Hafen liegen die unendlichen und unüberbrückbaren Weiten des Universums. Wir haben also keine andere Wahl, als selbst das Feuer zu löschen.
Good night, blobgers =)
Where I may to find posts on this topic?
Yes, it’s true, I know!
Super! I’ll do similar post in my blog
Thank
Thanks! Icey’s CSS Compressor did the best, taking my file from 189kb to 89k. It’s a terribly huge file spit out by the ancient CMS system I’m forced to use at work… trust me, the CSS I write myself is never over 10kb, but this thing is a monster and I didn’t want to deal with cleaning it up.
Its pretty good. It worked for me!! Thanks.
hanks! Icey’s CSS Compressor did the best, taking my file from 189kb to 89k. It’s a terribly huge file spit out by the ancient CMS system I’m forced to use at work… trust me, the CSS I write myself is never over 10kb, but this thing is a monster and I didn’t want to deal with cleaning it up.
People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable).
I do not believe that the W3C HTML WG will complete recommendation status by 2008; and neither do I believe that that WG shall be disbanded late 2011.
Specification are usable before being finished but not before those parts are incorporated into User Agents, e.g., browsers. Safari, Mozilla and Opera (since they’re the copyright holders) may be the first to include HTML5 elements and attributes once they become stable, Right?
Sehr schick.
Didn’t thought of CSS optimization. Just read an article about Google crawling CSS pages, so this article was really relevant for me. Considering that some companies need to save some money on network it was nice to know optimizating CSS can help.
We could start an app company that would launch on the iPhone, BlackBerry, facebook, myspace, linkeddin and put these clowns out of business.
gefällt mir
I got the same error message with all of them:
We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog.
It is a BLogger Blog with widgets and stuff. Maybe someone can tell me how to make it load faster?
Thanks!
Jacky
very interesting, thanks for your article
Very interesting article. greetings
I was wondering If you could show me the website to optimize HTML code.
Thanks for the theme. I will just still have to get a different header image.
good article. Super! I’ll do similar post in my blog
good article. I’m not so kind with css, but your article helped a lot.
Thanks for this good ideas. Realy this is a great article. Versicherung im Vergleich
thanx, ferfect so..