Article
Practical Web Design - Speed Up Your Site
Choosing the Right DOCTYPE: Strict vs. Quirky
An HTML page using the "Strict" standard will parse faster than one using the "Transitional" standard, and much, much faster than one using an older standard or one without a DOCTYPE at all. See my previous article for SitePoint, Fundamentals of Web Design, for a further explanation of DOCTYPES, and visit Mozilla's DOCTYPE Sniffing page for details of the various standards and how browsers such as Mozilla decide which DOCTYPE is being employed.
Of course, a page using the Strict standard must be written in strict HTML 4.01 -- no deprecated elements. A page written in strict HTML 4.01 with all closing tags employed will render faster than a similar page using deprecated elements and "quirky" HTML, as the browser has to do less work -- even though it will be slightly larger because of the use of all closing tags (more on that later). The nice thing about this is that it also brings us one step closer to being compliant with XHTML standards ...which is a whole different subject.
Whitespace
"Whitespace" in HTML code -- indents, skipped lines, and the like -- is strictly for ease of use by the designer, and the odd bird who views the code. It does nothing for the way the code displays, and can actually slow down the loading time. Here's a simple example from p. 53-4. Prepare to be amazed at how much the code size is lowered.
<TABLE ID='whitespace-repository' WIDTH="800">
<TR>
<TD>speed</TD>
<TD>me</TD>
<TD>up</TD>
</TR>
<TABLE>
becomes
<TABLE ID='whitespace-repository' WIDTH="800">
<TR>
<TD>speed</TD>
<TD>me</TD>
<TD>up</TD>
</TR>
<TABLE>
or better yet:
<TABLE ID='whitespace-repository' WIDTH="800"><TR>
<TD>speed</TD><TD>me</TD><TD>up</TD></TR><TABLE>
This final example saves over 50% of the file size over the original.
Exception: some JavaScript requires whitespace in certain instances. Don't try to optimize JavaScript unless you know what you're doing.
Comma-Delimited Attributes
A few tags, most commonly the <KEYWORDS> META tag, the <MAP> coordinate attribute, and the <STYLE> tag, allow comma-delimited lists. Browsers and search engines both ignore the spaces after the commas. You can save precious file size by eliminating the spaces. Again, it isn't as easy on the eye of the folks perusing the code, but everyone else will reap the benefits.
Here's an example, cribbed from pgs. 54-55:
<STYLE TYPE="text/css">
<!--
body {
font-family: arial, helvetica, sans-serif;
font-size: 1.1em;
}
-->
</STYLE>
becomes:
<STYLE TYPE="text/css">
<!--
body{
font-family:arial,helvetica,sans-serif;
font-size:1.1 em;
}
-->
</STYLE>
or even:
<STYLE TYPE="text/css"><!-- body {font-family:
arial, helvetica, sans-serif;font-size:1.1 em;}--></STYLE>
Another nice reduction in file size for a small loss in aesthetics.
Department of Redundancy Department
You'd be surprised how many tags and attributes are redundant and can be eliminated without affecting how the code runs. Deprecated tags such as <FONT> and <BASEFONT>, <CENTER>, <STRIKE>, and <U> can be handled more efficiently with style sheets. So can many of the variety of <BODY> attributes -- BGCOLOR, BACKGROUND, LINK, ALINK, VLINK, and so forth. The more you rely on style sheets, the more you're compliant with XHTML as well.
Tables are a great place to find redundant elements. A simple example, cribbed from p. 56, shows us how to tighten up our table code.
You could use this:
<TABLE>
<TR>
<TD ALIGN="right">tastes great</TD>
<TD ALIGN="right">less filling</TD>
<TD ALIGN="right">burma shave</TD>
</TR>
</TABLE>
but this works better:
<TABLE>
<TR ALIGN="right">
<TD>tastes great</TD>
<TD>less filling</TD>
<TD>burma shave</TD>
</TR>
</TABLE>
Even more space can be saved like this:
<style type="text/css">
<!--
table.tr.right{text-align:right;}
-->
</style>
...
<TABLE><TR CLASS="right"><TD>tastes great</TD>
<TD>less filling</TD><TD>burma shave</TD>
</TR></TABLE>
You can write a dozen more tables on this page using the same style sheet.
Eliminating Optional Quotes
Some attributes in HTML 4.01 can be unquoted. If the attributes only contain alphanumeric characters, hyphens, periods, underscores, and colons, then they can be left unquoted. If the attributes contain other characters, they must be quoted.
So this works:
<IMG SRC="t.gif" WIDTH=1 HEIGHT=1>
but this doesn't:
<TABLE WIDTH=100%>
Yahoo!, the busiest site on the Web, omits quotes from its link tags. Other sites omit quotes entirely, violating the standard HTML recommendations but trusting in the individual browser to handle the code anyway. Usually this works ...usually (p. 57).