The Real World Benefits of Web Standards

When I look back at the code behind some of my earlier sites I am shocked by how bloated and downright ugly it is. I cringe at the nested tables, I wince at the liberal use of spacer gifs and am I embarrassed by my poor use of CSS.

Consequently, I have decided to go back and redo some of these sites to bring them up to a respectable level of web standards compliance, with the side benefit of making some presentational improvements as well.

An Old Client

My first project has been an old client, Concrete & More. I haven’t touched this site in ages, so it was a treat to go through the pages and rip out all the tables and replace them with some good old (largely) semantic code.

Concrete and More website before:

Concrete and More website before redesign
Concrete and More website before redesign

Concrete and More website after:

Concrete and More website after redesign
Concrete and More website after redesign

Minor Design Improvements

From a design standpoint, I didn’t change a great deal as you can see in these before and after shots of the home page:

The Benefits

The real benefits of redesigning with web standards, however, can be seen when you compare the page weights of each version. I ran each home page through the Web Page Analyzer.

Here’s what it showed me:

Category Old Page New Page Change
HTTP Requests 17 6 -65%
Page Size (bytes) 50872 20551 -60%
HTML (bytes) 8648 4017 -54%
Images (bytes) 38274 15129 -61%
Javascript (bytes) 2370 1072 -55%
CSS (bytes) 1580 333 -79%
Total Images 13 3 -77%
Download Time – 56k (seconds) 10.34 4.30 -58%

I had expected that I would be optimizing the site to some degree by making these changes, but 50%+ improvements across the board – I didn’t anticipate these kinds of changes.

Hmm, perhaps there is something to this ‘web standards’ thing after all?

If I had the time (and the inclination) to move this site to an all-CSS design and to optimize the CSS some more, there would be even better gains.

Additional Benefits

Other benefits include increased accessibility for visitors using assistive technologies and also (I assume) for search engine spiders.

Hence, I expect the new site to achieve better search engine rankings. Of course, I can’t tell that at this point, but I will monitor for any improvements.

Overall, not a bad result for a few hours work.