Skip to main content

Close
Get the best research tool on the web today,and free!
Connect with people with common interests!

saved by27 people, first byBen on 2006-08-17, last byTazem Zero on 2008-07-24
























































  • SiteCSS OptimiserIcey CompressorFlumpcakesClean CSS
    Digg.comfailedfailedfailed16.8%
    Slashdot17.45%51.21%9%21.9%
    Filmsy18.85%47.08%17%29.1%
    iBeginfailed55.95%failedfailed
    Download.comfailed45.49%0%27.9%
    ESPNfailed69.84%failed27.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.

  • 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.


























    SiteAfterReduction
    CSS Optimizer 15.01 KB21.38%
    Icey CSS Compressor9.68 KB49.38%
    Flumpcakes CSS Optimiser16.9 KB11%
    CleanCSS15.234 KB22.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%!


























    SiteAfterReduction
    CSS Optimizer9.25 KB18.85%
    Icey CSS Compressor6.03 KB47.08%
    Flumpcakes CSS Optimiser9.4 KB17%
    CleanCSS8.27 KB29.1%

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


























    SiteAfterReduction
    CSS Optimizer16.17 KB29.04% (failed: font-size got larger)
    Icey CSS Compressor10.04 KB55.95%
    Flumpcakes CSS Optimiser19.28 KB12% (failed: font-size got larger)
    CleanCSS17.134 KB26.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.


























    SiteAfterReduction
    CSS Optimizer17.36 KB32.39% (failed: Fonts and Padding on elements change)
    Icey CSS Compressor54.3 KB0%
    Flumpcakes CSS Optimiser20.0 KB17% (failed: Fonts and Padding on elements change)
    CleanCSS45.699 KB17.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.


























    SiteAfterReduction
    CSS Optimizer17.36 KB32.39% (failed: Fonts and Padding on elements change)
    Icey CSS Compressor7.74 KB69.84%
    Flumpcakes CSS Optimiser20.0 KB17% (failed: Fonts and Padding on elements change)
    CleanCSS18.944 KB27.9%

  • Condensed Table

























































    SiteCSS OptimiserIcey CompressorFlumpcakesClean CSS
    Digg.comfailedfailedfailed16.8%
    Slashdot17.45%51.21%9%21.9%
    Filmsy18.85%47.08%17%29.1%
    iBeginfailed55.95%failedfailed
    Download.comfailed45.49%0%27.9%
    ESPNfailed69.84%failed27.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.


    <script>digg_url=’http://digg.com/programming/CSS_Optimization_Make_your_site_load_faster_for_free/’;</script><script src="http://digg.com/api/diggthis.js"></script>


    Digg this Link


    Posted by David in General


    Subscribe to RSS or add Blogging Pro to your Bloglines account.

  • 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.

  • 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%
Print