Extreme HTML Optimization: Summary

Extreme HTML Optimization

HTML Optimization Tips:

• TRIM THE FAT - If you can remove a design element from your page and the page still works, do it
• COMMENTS - Remove all comments
• HEAD
  • MINIMIZE the size of your page's HEAD, it must be parsed before the page is rendered
  • DELAY script loads until the page loads (place JavaScript at end of BODY, use onload)
  • META TAGS - keep under 200 char, use no commas (just spaces)
    • CONDITIONAL META TAGS - even better, conditionally include META tags only for spiders
  • COMMENTS - to raise relevance, remove, they don't work anymore
• TABLES
  • Simplify complex tables as they display slower
  • Break tables up into separate tables, with a simple fast loading table of the top (see webref.com for an example)
  • Use the fast table rendering algorithm with "fixed" style or attribute, TABLE {table-layout:fixed; width: 100%}
  • Use one TR ALIGN=CENTER|RIGHT not many TD ALIGN=CENTER|RIGHTs
  • Use CELLPADDING or CELLSPACING for spacing around tables rather than TDs
  • Use colored table cells instead of graphics
• STYLE SHEETS - Optimize and minimize style sheets, use one character names, use global styles (P, not <P CLASS="body">)
• FONTS - Substitute style sheets for font tags or vice versa, whichever is shorter
• IMAGES
  • MINIMIZE the size and number of images in your page. Each one takes a HTTP request with associated latency (CNET says most HTTP servers send up to 4 images at once)
  • Use RELEVANCE-ENHANCED cropping (see Nielsens' book summary)
  • MAXIMIZE REUSE - Reuse images where possible to take advantage of caching
  • Use WIDTH and HEIGHT attributes with all images, tables, and applets
  • BACKGROUNDS - remove, substitute page/element background colors, table cells
  • COMBINE - adjacent graphics and use imagemaps if nec, minimize those HTTP requests
  • ALT TAGS - Minimize all and remove ALTs from single pixel GIFs**
• REMOVE FLUFF - Get rid of unnecessary spaces, returns, tabs, quotes* (<A HREF=url> works).
• DHTML/JAVASCRIPT
  • MULTIMEDIA/COMPLEX DHTML - limit on high traffic pages, optimize, use flash instead
  • JAVASCRIPT - Hand optimize code (single character vars/functions), refactor
  • EXTERNALIZE SCRIPTS - link to external scripts at the end of the page for delayed load (and also create valid XHTML)
• ATTRIBUTES - Use defaults where possible, use the shortest attribute available, reuse attributes where possible (TR, CSS)
• COLORS and CHARACTER ENTITIES
  • NAMES - use named colors rather than hex, when shorter (BODY BGCOLOR=white TEXT=black ...)
  • Use ISO-8859-1 for character entities (can be shorter, more compatible) &#160; = &nbsp;
  • Use three char styles for colors (#FC0 = #FFCC00)
• WRITE TIGHT - Use short descriptive headlines and leads
• URL OPTIMIZATION
  • Use SHORT URLs, keep file names as short as possible
  • REDIRECTS - Pull a yahoo, use mod_rewrite and .htaccess or a RewriteMap file or server redirects to create short URLs on your home page (i.e., a href=r/d = dhtml/).
  • QUALIFY domains and directories (i.e., webref.com/html/ not webref.com/html) to minimize latency
• IP ADDRESSES - Use IP address for domain names when shorter than the name itself***
• CGIs - Put as much default parameters and error checking possible within your CGI's, not in your HTML
• NO "WWW" - Create a identical A record for the zone, to redirect domain.com to www.domain.com****
• CLOSING TAGS - Get rid of unnecessary closing tags </LI>, even </BODY>* etc.
• SET PAGE SIZE LIMITS - of 20-30 K, especially for your home page
• TRIAGE - Optimize your busiest pages first
• TEST - have real users try your pages with modems, ask them to find something

*Can violate HTML4 - The HTML spec indicates that any value that is purely alphabetic or purely numeric does not require quotes; everything else does. Therefore, you can strip quotes from things like width="10" and but not width="10%" or href="/html/".
**Bad form
***IP Addresses - Using IP addresses instead of domain names may not work on some larger sites, with the introduction of host header names. Especially for sites that are maintained on a shared server by a hosting provider. It is common practice to share a single IP address among dozens of host names for small sites because it means the hosting provider can use fewer of its allotted block of IPs. Thanks to Seth Perlman for this tidbit.
****NO WWW- The cleanest way is just simply have an identical A record for the zone itself, like:

@   IN  SOA internet.com. hostmaster.internet.com. (
        2000042402  ; Serial
        1800        ; Refresh
        900         ; Retry
        604800      ; Expire every one week
        3600        ; Minimum TTL 1 hour
)
                IN  NS      ns1.internet.com.
                IN  NS      ns3.internet.com.
                IN  MX 10   boris.iworld.com.
                IN  MX 20   natasha.iworld.com.
                IN  A       63.236.73.111
www             IN  A       63.236.73.111

(thanks to Peter Hegedus for this)

Some of these tips are pretty extreme, and useful for higher traffic pages only. We go to great lengths to minimize the size of our home page to maximize speed. Note that a couple of these tips violate HTML 4, you can choose which ones you use on your pages, but it is best to stay within the spec. There may be more we haven't thought of, let us know.

Created: Jan. 10, 2000
Revised: Mar. 19, 2001

URL: https://webreference.com/authoring/languages/html/optimize/part2.html