Chapter 4: 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
Code Listings etc.
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.
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.
- CSS: 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
- A discussion of waste data in HTML documents
- Cub Lea and Stephen Winter of WebTrimmer discuss how to cut the fat out of your HTML documents.
- Appendix B: Performance, Implementation and Design Notes
- Dave Raggett, Arnaud Le Hors, and Ian Jacobs, in HTML 4.01 Specification, (World Wide Web Consortium, 1999). How to speed up your HTML tables.
- Cascading Style Sheets, level 2 CSS2 Specification
- Bert Bos et al., (World Wide Web Consortium, 1998). Enable fast table rendering with table-layout:fixed.
- Chapter 11, Tables
- Dave Raggett, Arnaud Le Hors, and Ian Jacobs, in HTML 4.01 Specification, (World Wide Web Consortium, 1999). Giving the browser table sizing information beforehand (colgroup, col, width, and table-layout:fixed) speeds the rendering of tables.
- Evolution of a Home Page
- Andrew King (Jupitermedia Corporation, 2001) chronicles the evolution of WebReference.com's home page over time. Includes performance techniques used.
- Extreme HTML Optimization
- Andrew King, (Jupitermedia Corporation, 2001). Radical reductions in HTML file size with no holds barred techniques.
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.
HTTP Compression (content encoding)
- Gzip.org
- The gzip compression format. This is the most widely supported encoding method, used in mod_gzip etc.
- HTTP Compression Speeds up the Web
- Peter Cranstone of Remote Communications discusses how HTTP compression can save you bandwidth and speed up your site.
- mod_gzip - serving compressed content by the Apache webserver
- Michael Schroepl's excellent mod_gzip site.
General HTML Resources
- 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).
