Advanced HTML Optimization

You can only go so far minimizing the code you use in HTML pages. To fully optimize your HTML, you've got to dig a little deeper and transform your code. This chapter shows you how to tune your tables, optimize your forms, auto-abbreviate your links, and compress your HTML for maximum speed. The last two techniques require server access, which I explain in this chapter as well as in Chapter 17, "Server-Side Techniques," and Chapter 18, "Compressing the Web."

Figures

Figure 4.1 - Fixed table layout in Netscape 6.2
Figure 4.2 - Fixed table layout in Mozilla 1.0 (Netscape 7)
Figure 4.3 - CNET.com's top navigation bar
Figure 4.4 - WebReference.com's top navigation bar
Figure 4.5 - Onlinenewspapers.com
Figure 4.6 - The table trick
Figure 4.7 - optgroup menu in IE5 Mac
Figure 4.8 - optgroup menu in Mozilla 1.0 (Netscape 7.x)
Figure 4.9 - Nested menus with optgroup at AListApart.com

Code Listings etc.

Listing 4.1 - Table Column Widths Specified
Listing 4.2 - Consolidate Attributes (with tbody and thead and tr)
Listing 4.3 - CSS-Styled Table
Listing 4.4 - Fixed Table Layout Example
Listing 4.5/4.6 - Real-world Fixed Table Layouts
Listing 4.7 - Three-Panel Layout
Listing 4.8 - The Table Trick (to increase relevance)
Listing 4.8b - Table Trick fixed (comments, returns removed for Mac IE5 gap)
Listing 4.9 - JavaScript- and CGI-Enabled Form
Listing 4.10 - optgroup Menu Example
Listing 4.11 - optgroup Hierarchical Menu from AListApart.com
Listing 4.12 - Yahoo.com circa Feb. 8, 2002 - (270+ mod_rewrite abbreviated URLs)

Summary

Table tips:

Use rowgroups to segment tables for style, accessibility, and printing.
Use colgroups and col to style entire columns.
Consolidate attributes (tr versus many tds, and so on).
Enable incremental rendering with sized col elements.
Use the fixed table-layout algorithm where possible (NS7+, IE5+).
Simplify, unwind, and layer your tables for maximum speed. Provide useful content in the first table.
Use the table trick to raise relevance.
Use CSS to style cell backgrounds (version 4+ browsers).

Forms:

Use JavaScript to save clicks and HTTP trips.
Gracefully degrade with CGI scripts for non-JavaScript browsers.
Shunt form defaults into CGI scripts.
Substitute optgroup select menus for DHTML hierarchical menus.

Use trailing slashes on directories.
Abbreviate your URLs.
Use compression where possible.

Advanced HTML Optimization

Figures

Code Listings etc.

Summary

Further Reading

Books

Article Highlights

HTML Optimization Programs and Services

HTTP Compression (content encoding)

General HTML Resources