After reading BloggingPro’s article on CSS Optimization, I have decided to come up with my own study.
For this test, I sampled CSS from six sites:
- iBegin - Localized business search engine
- CSS vault - Of course, I had to test it on our own website didn’t I?
- Tech Soapbox - One of my favorite technology news blogs
- Mashable - Social networking and tech news
- CNN - Recently updated their website and makes extensive use of CSS for positioning and design
- PayPal - Also recently updated their website
I used the following CSS Optimizers:
The tests were done using the options that would yield the highest compression. Here are the results.
| Site |
CSS Optimiser |
Icey |
Flumpcakes |
Clean CSS |
| iBegin |
36.68% |
26.48% |
27% |
25.40% |
| CSS Vault |
16.33% |
36.32% |
17% |
35.10% |
| Teach Soapbox |
28.45% |
36.42% |
26% |
35.40% |
| Mashable |
21.46% |
30.32% |
22% |
29.80% |
| CNN |
8.54% |
31.44% |
15% |
26.10% |
| PayPal |
2.45% |
16.94% |
7% |
15.30% |
Based on these results, it appears that Icey produces the best compression results, followed closely by Clean CSS, then by Flumpcakes and finally by CSS Optimiser.
That being said, however, it is noteworthy to point out that optimizing CSS code involves many techniques such as stripping out of line feeds and empty tags, combining common elements, merging shorthand properties and more, such that it is possible for the resulting code to display differently when used on the actual site, which is why these CSS optimizers encourage CSS validation prior to any optimization.
Also, these optimization techniques are lossy. Once CSS code has been optimized there is no turning back, and it will be very difficult if not impossible to make changes to the optimized code by hand. Thus, it is always advisable to keep a backup of the original CSS code.
For non-lossy code optimization there is always server-size methods such as gzip, an Apache mod that compresses content at the expense of consuming server resources and is unsupported by older browsers,
and CSS-SSC, a server-side preprocessor which parses the original CSS file and serves a compressed version to the clients.
