The efficiency of CSS
CSS is more bandwidth-efficient than tag-soup. Period. It’s been discussed before, but I have some fairly unique data on the subject.
The Background
A client contacted WebSprockets to get a new site. Their old site was a tag-soup mess of nested tables and (shudder) Flash for navigation. As with all of WebSprockets’ sites, we went the web standards route, choosing XHTML and CSS. Since the client was multinational, they wanted the site to allow for translations into four languages besides English. Unfortunately, their budget was slim, and while the technical end of the translation work was implemented, the actual translations were never done. Due to pressure from their overseas branches, we put their old site back up under a new domain, in addition to the new site.
Well, I took a look at the statistics for both sites, and they stand in stark contrast.
The Data
| Web Standards | Tag Soup | |
|---|---|---|
| Total Hits (June 2005) | 400,013 | 77,992 |
| Total Visits | 14,462 | 2,143 |
| Bandwidth (Gb) | 3.78 | 1.83 |
| Bandwidth/hit (Kb) | 9.45 | 23.46 |
| Bandwidth/visit (Kb) | 274.4 | 896.42 |
The new site is over 2.5 times as efficient per hit, and over 4 times as efficient per visit.
The Reason
CSS is more efficient for two reasons:
- Less markup on each page. Since presentation is defined in the stylesheet, there’s less data to transmit for each page.
- Stylesheet caching. Since the stylesheets are external, and don’t change as often as the content, they only need to be fetched once by the client; they remain in the browser cache after that, reducing bandwidth.
Clearly, CSS and web standards are the #1 choice when it comes to bandwidth-efficiency.