Developer

Tag consolidation example

Is your HTML code to blame for slow Web page downloads? Jason Smith provides three tips for streamlining your HTML for faster downloads.


Being a member of a Web development team, I have learned certain Internet production truths. The first and foremost is the golden rule of Web development: Do unto your viewers, as you would have them do unto you. That is, you wouldn’t want extremely long download times when viewing Internet pages, so why not spruce up your site so that viewers don’t have to spend unnecessary time downloading your pages?

There are several things that you can do to decrease the average download time of your Web pages just by altering the structure of your HTML code.

Image tags
Did you know that images actually load faster when there is a defined height and width?

If you provide the Web browser with the dimensions of an image, the browser can create a place for the image and plug it in later.

Simply changing your HTML IMG tag from this:
<IMG SRC=”image.jpg”>

to this:
<IMG SRC=”image.jpg” height=”120” width=”200”>

can decrease download times for an image.

Tag ordering
Yes, the order of your tags actually matters. With a little fine-tuning, you can decrease Web page-download times.

The order in which tags open is unimportant. You can place the bold and italics tags in front of the font tag if you wish. But the closing order is important to download times. Not only is it considered proper in HTML coding to close tags in the opposite order they are opened, doing so allows pages to load more quickly. Click here to see an example of proper tag ordering.
You may not think so, but this snippet of code:
<FONT size=”2”><B><I>This text is supposed to be bold and italicized.</I></B></FONT>
 
will load faster than this snippet:
<FONT size=”2”><B><I>This text is supposed to be bold and italicized.</FONT></I></B>

Tag consolidation
The fewer tags a browser must process, the quicker the page is loaded. For instance, if you have redundant font tags, the page will load more slowly than if you have one font tag. Click here to see an example.
Because of its repetition of font tags in the code, this page will load more slowly than the one shown below.
<FONT size=”2”><FONT style=”verdana”><FONT color=”blue”>Get to the point, already!</FONT></FONT></FONT>
This page will load more quickly because it uses fewer font tags.
<FONT size=”2” style=”verdana” color=”blue”>It even looks better, doesn’t it?</FONT>

Although font tags are the best example of this concept, you can apply the concept to other HTML tags as well. Take paragraph tags and break tags, for example. If you have two break tags, one after the other just for the sake of skipping a line, use a paragraph tag. The same amount of space will be skipped, but the number of tags in the HTML document will be decreased.

You may not think that these little changes will make a big difference in a Web page’s download time but remember that the changes really add up. Sure, if you only have a few redundant font tags, cleaning up the HTML mess won’t result in beneficial time improvements.

But if you have a large site with several redundant tags, many pictures that don’t have defined heights and widths, and tags in the wrong order all over the place, then you might be surprised. A bit of time spent cleaning up your HTML code can noticeably decrease your Web page-download time.
The authors and editors have taken care in preparation of the content contained herein but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for any damages. Always have a verified backup before making any changes.

Editor's Picks

Free Newsletters, In your Inbox