CSS Optimization: Make Your Sites Load Faster for Free
by David Peralty on August 17th, 2006 
288 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.
It is amazing how much CSS we leave in the .css file and then delete the style on the webpage and forget that it was in the .css file……
thanks for reminding me to clean mine up!
thanks for the GREAT post! Very useful…
thanks for the article
Helpful post big thanks, recommentable for every Siteadministrator
thanks
thank you
Found your site in google, and it has a lot of usefull information. Thanx.
Nice
Thank you very much for this article
It is amazing how much CSS we leave in the .css file and then delete the style on the webpage and forget that it was in the .css file……
thanks for reminding me to clean mine up!
You get amazing compression from gzip… and run 0 risk of breaking any parts of the CSS. Even if I can cut down the weight by half with an optimizer… once compressed the real gain is 3 – 5 k. Of course, it’s not a technology thats available to everyone so optimizers may be useful to some…
Like others have mentioned (like Dave)… I’m not sure about the premise… Make the file lighter is not that useful… I’d be more interested in having it be interpreted faster… which probably means that your selectors need to be more precise… adding weight to the overall file.
That is a much more complicated process than cutting stuff out… I don’t think you can automate that all too well.
Indeed a cool article. Thanks for sharing your thoughts!!
Oh my god, so much spam…
If css it becomes faster by the compression why not? If it to be automated can do would be really good it.
I tested them in my site, and Icey Compressor was the worst actually.
cooooooooooooool
thanks for the info. i did it by hand :)
cheers
Well I like the way http://www.cssoptimiser.com gave me the output which grouped the css selectors according to there properties & no properties were repeated..which i feel is really awesome & is required..earlier i used to do exactly opposite but this changed my way of writing the css
well is there a way to find out how a browsers reads a css Eg. by alphabetical properties order, or some by some set of defined properties .. i mean if such documentation is available, the designers can try using those properties more than any other & then things will be smoother than anything else
yes, CSS Otimiser is a great tool… thanks guy for the great article
Thank you very much for this articl
Granted, our css is a bit of a mess, but I thought the tools would be able to handle it. Any suggestions?
The Digg web team has some explaining to do. Go Simple over Techy.
Anyway, I thank you for the thorough case study. Very cool blog, pro.
I had some problems with my css. Thanks for the article!
Thanks for sharing useful information. This has really helped speed up my blog load time by shaving off nearly 2 min of the load time. Much appreciated.
thanks for the info. i did it by hand :)
cheers
thank you free link
It amazes me how many companies think that FLASH websites are ideal – wanting a website with fancy graphics and animation, and not having a clue how useless these websites are- very difficult to SEO (well, you can’t truly SEO them) and just bulky and difficult to use – not to mention the long loading times even on Broadband. CSS is definitely the way to go, in my opinion, and I’m still amazed by how many people have not fully realised its wonderful benefits.
yes thx for the Infomation, its help me very much
Get it through your thick heads, really. Optimization is the process of taking the CSS rules and combining them so that there are less rules and less redundancy
Кстати это все придумали порядка лет 10 назад , а то и больше.:
Hmmm… this is an incredibly helpful thing to know. I wasn’t aware of the big place cleaner code took in optimising sites. I never gave a CSS optimiser any thought whatsoever. As being a writer who occassionally does SEO sites, this actually means that I’ve perhaps been selling some wrong things to clients. I never once thought to advise them on optimising their CSS. It just makes me realise that web design is probably not something I should be doing.
i want my site
hi can you give me an example applied the site
thanks sites
Fiyat has using some HTML code is okay. Thanks you.
Interesting topic. it will be a great help to my report. thanks!
Great article. Thanks for the info
I will use this stuff, thanks.
Thanks so much.
thanks
(: bendende thanks efe mucu
thanks
Patent, Marka Patent, Patent Ofisi, Patent Dirsek, Patent Office, Patent Tescil, Patent Burosu, www patent, Patent com, Patent Ofisim, Patent Tescili, marka patent tescil, patent alma, turk patent, tasarim tescili, tescil belgesi, tasarim tescil, marka tescil, marka tescil belgesi, marka tescili
Äîáðûé äåíü, áûëî î÷åíüïîçíàâàòåëüíî âàñ ïî÷èòàòü. òîëüêî âîò îäíîíå î÷åíü õîðîøî Ñïàìåðû äîñòàëè, ó ìåíÿ ó ñàìîãî åñòü ñàéò òàê è íà ïðåìîäåðàöèþ ñòàâèòü âñå ñîîáùåíèÿíå äåëî, à âîò êàïò÷ó íèêàê íå ìîãó óñòàíîâèòü, íå ïîëó÷àåòñÿ…
Trying out Icey Compressor! Thanks for the advice! Will be tuning in more! :D
thanks
Заметил такую тенденцию, что в блогах появилось много не адекватных комментариев, не могу понять, это что кто то спамит так? А зачем, чтоб падлу комуто сделать))) Имхо глупо…
http://www.seo24.at/javascript-und-css-optimieren/
Thanks for this great tipps!