00000001

This is the site that started this project. I did it for no other reason other than I was bored. I did it over a 4 hour block of time during which I also cooked dinner for the fam and ate it.

The original was written in html that the validater claimed had 20 errors, including no DOCYPE. The CSS was basic and only really covered font related styling. The main layout was table based.

When finished, I had copied the layout using semantic Strict HTML and CSS. Both were valid. I used original images where I could, but made some minor changes, mostly concerning drop shadows. In future Strikes, I will strive to use only the graphics provided by the original page. But this was my first so I wasn’t necessarily thinking that way, plus there was a lot going on with the tables and the drop shadows on images were actually separate images. Didn’t want to mess with it. But as you can see in the screen caps, my version really isn’t much different overall.

Screens of the site:

Theirs:

Mine:

The speed reports:

Theirs:

Global Statistics

Total HTTP Requests: 44
Total Size: 110750 bytes

Object Size Totals

Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 12226 2.64 0.26
HTML Images: 52446 18.05 7.88
CSS Images: 119 0.22 0.20
Total Images: 52565 18.27 8.08
Javascript: 38822 8.34 0.81
CSS: 7137 1.62 0.24
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00

External Objects

External Object QTY
Total HTML: 1
Total HTML Images: 38 Total CSS Images: 1 Total Images: 39 Total Scripts: 3 Total CSS imports: 1 Total Frames: 0 Total Iframes: 0

Download Times*

Connection Rate Download Time
14.4K 94.64 seconds
28.8K 51.72 seconds
33.6K 45.59 seconds
56K 30.87 seconds
ISDN 128K 15.56 seconds
T1 1.44Mbps 9.39 seconds

Mine:

Global Statistics

Total HTTP Requests: 20
Total Size: 51629 bytes

Object Size Totals

Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 6912 1.58 0.24
HTML Images: 23979 6.98 2.33
CSS Images: 16211 4.23 1.09
Total Images: 40190 11.21 3.42
Javascript: 0 0.00 0.00
CSS: 4527 1.10 0.22
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00

External Objects

External Object QTY
Total HTML: 1
Total HTML Images: 11 Total CSS Images: 5 Total Images: 16 Total Scripts: 2 Total CSS imports: 1 Total Frames: 0 Total Iframes: 0

Download Times*

Connection Rate Download Time
14.4K 44.02 seconds
28.8K 24.01 seconds
33.6K 21.15 seconds
56K 14.29 seconds
ISDN 128K 7.15 seconds
T1 1.44Mbps 4.27 seconds

Conclusion:
Well, just from looking at the numbers, it’s about 55% more efficient. Do the math and compare the numbers. Fun was had. He got the code.