Optimizing XHTML

What does this all mean for web site optimization? XHTML's persnickety nature means that some of the optimization techniques shown in Chapter 3, "HTML Optimization, and Chapter 4, "Advanced HTML Optimization," cannot be used. Closing tags are not optional and all attributes must be quoted and fully qualified. All these other HTML optimization techniques can be used, however:

  • Remove whitespace.

  • Minimize HTTP requests (replace images with CSS).

  • Cut the comments.

  • Minimize alt attribute values.

  • Use conditional meta tags.

  • Optimize forms.

  • Tune tables with table-layout:fixed and colgroup/col elements.

  • Auto-abbreviate URLs.

Just make sure that you close your tags and quote and fully qualify your attributes. Adopting the quoteless link approach Yahoo! uses is verboten in XHTML.

Transform Your Code

You'll gain the most benefit, however, by transforming your code to a more standards-compliant mode. XML's emphasis on structure, not presentation, enables authors to transform their code into a more interoperable format. By separating presentation in the form of style sheets from structure, authors can enable their pages to work well in different contexts.

Think Outlines

When marking up your web documents, think purely in terms of logical structure. Organizing your documents like a traditional outline ensures interoperability:

 <h1>Primary Topic</h1>      <p>Introduction...</p> <h2>Seconday Topic</h2>     <p>Secondary text...</p>     <h3>Tertiary Topic</h3> 

Avoid using presentational tags like <b> , <font> , and <i> . Use structural markup instead, like <strong> , <hx> , and <em> . Better yet, use style sheets to control the appearance of your document and streamline your code. So instead of this:

 <h1 align="center">Main Topic</h1>  <p><font size="+1" face="arial,helvetica,sans-serif" color="#333333">Overly graphics/ccc.gif specified paragraph text goes here.</p> 

Do this:

 <h1>Main Topic</h1>  <p>Normal paragraph text goes here.</p> 

Then use a simple style sheet, which could be reused site-wide.

The W3C reminds us that "HTML documents are supposed to be structured around paragraphs, headings, and lists." [6] If you muddy the waters with embedded presentational tags and common HTML spacing hacks, you will experience higher maintenance costs and larger files. This will ultimately reduce your audience.

[6] W3C, "Font tag considered harmful ," HTML Home Page [online], (Cambridge, MA: World Wide Web Consortium, 2002), available from the Internet at http://www.w3.org/MarkUp/.

Replace Tables with CSS

Chapter 4 showed you how to get the most out of your tables. Although originally designed to present tabular data, tables have become the traditional way to lay out entire web pages. Table-based layout has some inherent drawbacks, however, mainly because it embeds presentation amidst your content. But there's a new kid on the block-level: CSS2.

CSS2 allows you to separate presentation from structure. This seemingly innocuous statement has rather powerful implications. Pure structural XHTML can be easily repurposed for different formats and platforms. Alternate style sheets can reformat your content for printing, display on handheld devices, and even screen readers for the visually impaired. Best of all, this separation of church and state means faster pages, because CSS-based sites are generally smaller, and the CSS file(s) are cached throughout the site.

Rather than using table rows and columns , you can use positioned div s to lay out your pages. Most of CSS2 is supported by over 85 percent of the web's current browsers and it is growing fast, which makes CSS2-based layout a practical alternative to tables. By breaking out of the fixed grid tyranny of tables, you can free up your code to adjust to your user 's whims.

Let's rework our three-panel table design in XHTML and CSS2. Here's the original table-based layout:

 <?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE html     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>     <title>Three-panel table layout</title> </head><body> <table>     <tr>         <td colspan="2">             <p>top navigation bar (branding and advertising)</p>         </td>     </tr>     <tr>         <td>             <p>left navigation bar</p>         </td>         <td>             <p>main content area</p>         </td>     </tr> </table> </body> </html> 

Here's the XHTML/CSS equivalent:

 <?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE html     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>     <title>Three-panel XHTML/CSS layout</title> <link rel="stylesheet" href="/css/layout.css" /> </head> <body> <div id="top">     <p>top navigation bar (branding and advertising)</p> </div> <div id="nav">     <p>left navigation bar</p> </div> <div id="content">     <p>main content area</p> </div> </body> </html> 

Note that we use descriptive labels here, not positional ones like "left" or "right." Don't think in terms of positioning when labeling elements; think function instead. You can see that the body of the document is greatly simplified, with its presentational aspects within the style sheet, not intermixed within the HTML.

By combining the use of strict XHTML, CSS1 to replace font tags, and CSS2 to replace tables, you can dramatically reduce the size of your pages and gain layout flexibility in the process. Chapter 8, "Advanced CSS Optimization," delves more deeply into how CSS can streamline your pages and how you can optimize your CSS.


Speed Up Your Site[c] Web Site Optimization
Speed Up Your Site[c] Web Site Optimization
ISBN: 596515081
Year: 2005
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net