HTML Optimization

HTML is still the lingua franca for publishing hypertext documents on the web. With simple markup tags like <h1> and </h1> used to denote structure, HTML has become the universal language of the web. As designers and browser manufacturers morphed HTML into the web equivalent of PageMaker, however, HTML code has become too verbose with presentational tags, scripts, and objects intermixed with structural markup. This chapter and the ones that follow show you how to optimize and simplify your code for maximum speed, while still maintaining the functionality and visual appeal of your site.

Figures

Figure 3.1 - Elivad.com prototype with graphic rollovers
Figure 3.2 - Elivad.com after optimization

Code Listings etc.

A Brief Homepage Survey (Excel, 14K): Five of the busiest sites examined from 1996 to 2002 found that total page size has increased from 40,223 bytes to 86,234 bytes from Oct. 1996 to Sep. 2002. (http://www.archive.org).
Figures 3.1 and 3.2 HTML: Minimizing HTTP requests at Elivad.com.
Yahoo.com with quotes (Zipped, 16,360 bytes HTML)
Yahoo.com without quotes (Zipped, 15,869 bytes HTML).: Yahoo! saves 3% by omitting quotes from their links. (Feb. 8, 2002)

Summary

Use a strict DTD to enable standards mode for maximum rendering speed.
Minimize HTTP requests: convert graphic text to text and consolidate.
Remove whitespace (spaces, tabs, and returns).
Omit redundant tags and attributes.
Omit optional quotes and closing tags (this can violate HTML/XHTML).
Minimize colors and character entities.
Cut the comments.
Minimize ALT values, but make them descriptive, not generic.
Minimize the head to maximize body display speed.
Minimize meta tags:

Use only the description and keywords tags.
Conditionally include meta tags for critical pages.

Cascading Style Sheets: Separating Content from Presentation: Owen Briggs, Steve Champeon, Eric Costello, and Matthew Patterson, (glasshaus, 2002). See also glish.com.
Cascading Style Sheets: The Definitive Guide: Eric A. Meyer, (O'Reilly, 2000). See also Meyerweb.com.
Designing Web Usability: The Practice of Simplicity: Jakob Nielsen, (New Riders, 2000). See also Useit.com.
HTML & XHTML: The Definitive Guide, 5th ed.: Chuck Musciano and Bill Kennedy, (O'Reilly, 2002).

Article Highlights

Almost Standards Mode: Mozilla's handling of DOCTYPE.
DOCTYPE Grid: Eric Meyer, (2002).
DOCTYPE Switching: By Matthias Gutfeldt.
Evolution of a Home Page: Andrew King, (Jupitermedia Corporation, 2001). Shows the evolution of WebReference.com's home page over time, and the techniques we used to speed it up.
Extreme HTML Optimization: Andrew King, (Jupitermedia Corp., 2001). Radical reductions in file size with no-holds barred techniques.
JavaScripting Netscape 6: No More Sloppy Code: Andrew King, (Jupitermedia Corporation, 2001). Improperly nested HTML can cause problems with dynamically written JavaScripts.
More Great Tips from CNET Designers: Matt Rosoff, (CNET Networks, 1998). Speed design tips from CNET. Explains why CNET's search.com had only four graphics on their home page in 1998.
A Performance Analysis of 40 e-Business Web Sites: Patrick Mills and Chris Loosley, CMG Journal of Computer Resource Management, no. 102 (Spring 2001): 28-33. In January 2002, this study showed that the average "base page" size (HTML) of the top 40 e-business web sites was 28,537 bytes, with a content size of 44,191 and a total size averaging 72,802 bytes composed of 21 objects.