BloggingPro - News, plugins and themes for blogging applications

CSS Optimization: Make Your Sites Load Faster for Free

David Peralty wrote this post on August 17th, 2006 in General 302 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.

Digg this Link

Categories: General