An Optimization Story

Despite talking about the benefits of CSS and optimization, my own web site has long been a paragon of bad code. Motivated by the CSS Reboot, I decided to finish the long-planned recode of my site done by May 1st.

The site was designed by Medulla Studio and launched in October of 2002. I put together the site using a patchwork of tables and styling.

The lightest drop-down menu I could find (by Milonic) was still a hefty 40K. An entire web page should weigh 34K or less (10 seconds on a 56K modem). So, no more drop-down menu. I plan to add a CSS drop-down menu later, but I have a deadline to meet.

I replaced some JavaScript with CSS styling (link hovers). Other (extraneous) JavaScript was just deleted altogether.

I re-cut up the top images so that things would be more as they seem. So, whereas one image included my logo and a gradient, I now have a transparent image above a gradient background image (had to help IE with PNG alpha transparency). The end result was faster-loading images and cleaner HTML.

For the central portion of the page, I again made things be what they seemed by replacing nested tables with clean CSS styling (working around an IE6 bug in floats in the process).

The footer was the biggest challenge. The design calls for the footer to be below all content and affixed to the bottom of the browser viewport. I tried popular techniques for footers, but I had little luck (trouble with Mac IE and sometimes with Opera as well).

It became easier upon realizing that I didn't need a "footer section", but just a bottom-aligned background image for the body (repeating on the x-axis only). This required a wrapper div for all of the content to leave space for the background image to show unobstructed.

Of course, Mac IE still wouldn't cooperate with my footer. No big worry, I just used the Holly Hack to hide the background image from Mac IE (it isn't in the new Mac OS anyway, so no worries).

Did my work payoff?

A check of the total weight of a sample page ("About Us") revealed following:

Total Page Weight:
old: 81.39K
new: 22.09K

HTML:
old: 12.69K
new: 3.89K

Number of Files:
old:27
new: 8

So, for about 25% of the load-time, all that I had to give up was a drop-down menu. I expect that I can add that back soon and still have far less load time than I had before. A little image optimization might balance that out completely.

Beyond the load time, my site is now more accessible. It also still functions without JavaScript (except that my logo will look funny on IE). It now looks good if images are turned off and is readable if styles are disabled.

Old:
http://orig.bryantwebconsulting.com/

New:
http://www.bryantwebconsulting.com/

Now I just need to add a drop-down menu, update the porfolio, rewrite the content...