Chapter 3: 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
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
