Case Study: 1800 Reverse re-code

We initially started working with 1800 Reverse to maintain their existing website. After designing and setting up a few customer competitions we were able to see that behind-the-scenes the site was running on some very dated and messy code that was making any new development unduly time-consuming and testing unpredictable.

We approached 1800 Reverse with an offer to clean up the site and bring it up-to-date with today's web standards.

The updated version of the 1800 Reverse website was released this morning. We took some samples of the site just before it was updated.

Comparison:

To add some balance to the comparison we chose 2 different pages on the site. The most important page on the site, the homepage and a child page, RLinks which includes links to 1800 Reverse's partners. This second page is typical of most of the other pages on the site.

	Homepage		RLinks
	Old	New	Old	New
HTTP requests	21	9 (57%)	27	19 (30%)
Tables	7	0	14	0
Images	18	6	25	16
Lines of HTML	168	80 (52%)	253	114 (55%)
HTML size (bytes)	13557	3927 (71%)	16916	6521 (61%)
CSS size (bytes)	1948	4712 (141%)	1948	7199 (270%)
Files on the server	1283 (67.1 MB)	66 (12.5 MB)

HTTP requests

As researched by Yahoo! the number of file requests can have a huge impact on the speed of your site. Browsers are limited to the number of concurrent requests they can make (often 2 to 4 at a time). Each request must complete before another is made. Minimising the total number of requests that need to be made will allow the web browser to display your site quicker.

Tables

While the number of tables do not effect the speed of a site loading, they do add unnecessary mark-up when used for page layout. Using tables for layout was a common practice many years ago before web browser support for CSS layout had improved. Using tables also has the downside of restricting the layout of your content for each page. Using a linked stylesheet allows you the freedom to easily update the entire look of your site by changing a single file. The CSS Zen Garden is a perfect example of this. Every one of the 200+ designs use the same underlying HTML. If the base mark-up had been done with tables each design would have been restricted to using the same basic layout.

Images

Reducing the number of images helps reduce the number of HTTP requests but it may also reduce the overall size (bytes) of your site. By their nature image files can be quite large, so less is often better.

Lines of HTML

The number of lines in a file does not directly correspond to the size of the file, however it is a good indicator of how complex the code could be. Less mark-up makes it easy for other developers to read, change and maintain code. Less complex code around your data also increases the accessibility by non-visual page readers (this could be for people with disabilities or for a search engine bot).

HTML size

HTML should contain textural information. It also allows for full styling of the content, but this is a bad practice. Best practice is to include a minimal amount of semantic mark-up to add meaning to the content (headings, paragraphs and emphasis are good examples). The size of a single file often depends on how much content it contains. The larger the file, then longer it takes to download. In this comparison where the displayed content has not changed you can see that there was a lot of extra code that was in the wrong place or not needed at all.

CSS size

CSS files store the presentational information used to style the look and feel of the site. The same CSS file can be used on multiple pages which allows the browser to load the same downloaded copy of the file on subsequent loads (caching). When using a cached copy the files does not need downloading from the site again, meaning the page loads much quicker.

Files on the server

This statistic does not effect the load times of the site for users. It is shown here purely to show you how many files and how much disc space (hosting providers charge extra for more storage) was/is needed for the 1800 Reverse site. Fewer files also makes it much quicker to find what you are looking for when maintaining the site.

Tests done between 11:30 am and 12pm on 14 Dec 2006 using Web Page Analyzer - 0.961 - from Website Optimization.