Call (877) SITE-OPT (748-3678)

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.

Further Reading

Books

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.

HTML Optimization Programs and Services

HTML Optimizer Pro
Tonbrand Software offers a range of optimizers capable of optimizing HTML, XHTML, JavaScript, VBScript, CFScript, Java, CSS, PHP, ASP, JSP, CSP and LassoScript.
SpaceAgent
Insider Labs offers client and server-based web page optimization programs.
VSE Web Site Turbo
Mac-based web page optimizer.
w3compiler
Windows-based source code optimizer from Port80 Software. Optimizes XHTML, CSS, ASP, and CFM files. Includes JavaScript parser.
WebTrimmer
PC-based optimization program for HTML.

General HTML Resources

The Americans with Disabilities Act - Section 508
Provides accessibility rules for electronic and information technology that is created or procured by a U.S. Federal agency.
HTML 4.01 Specification
Dave Raggett, Arnaud Le Hors, and Ian Jacobs, (Cambridge, MA: World Wide Web Consortium, 1999).
CSS Support Charts
Eric Meyer. The master CSS reference grid.
The Web Standards Project
Jeffrey Zeldman et al., (1998).
W3C's Web Accessibility Guidelines
Copyright © 2002-2016 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: January 11, 2010.

Follow us on: Twitter, Google+, Facebook, Linked In