HTML Optimizations
By Submit Corner
Tell a Friend About This Page
Overview: Cut back on extra and unnecessary HTML code that can be cut out without
impacting end users or the intended visual effect.
An easy way to cut out bandwidth is simply to cut out unnecessary HTML code, Javascripts
and any other components which you simply don't need. Below, we present to you tips, ideas,
and suggestions on how to cut out those non-essential tags and excess HTML which most web
designers don't need and won't affect visual impact.
Comments
Strip away all comments on your web pages. If you use comments, even at
all, then your using up bandwidth. Even though a one line comment may not seem like much,
consider the effects of the same comment distributed throughout all your users and on all
your webpages. The net effect could result in significant savings over the long term.
Trimming White Space
Remove any excess white space, tabs and carriage returns that you don't need.
Remove Unnecessary Tags
Often webmasters include tags that don't need to be closed such as </br>, </li>
and </option>. If you are using these tags, delete away as they are unneeded.
Minimize Your Headers
Because no content can be displayed until the header has been read,
move all Javascripts to the bottom of your pages and shorten any excess META Tags which you
don't need. For example, often an HTML editor will add a default tag known as the Generator tag
such as <META NAME="generator" CONTENT="Your HTML Software Name (ie: Microsoft FrontPage)">
Row Alignment
Rather than aligning each cell individually, try aligning the entire row.
For example, most designers will use the "align" and "valign" attributes of the TR and TD tags
in order to align content. Instead of using these attributes on each TD element, consider using it
on each row. For example, consider using: TR align=center|left|right for each row instead of repeating TD
align=center|left|right for each cell.
Strip Descriptions From Irrelevant Images
If your using images which do not need a description with the ALT attribute of the image tag, consider
stripping away the associated description which are embedded with your images. For example, a typical image
tag may appear as: <img src="myimage.gif" alt="This is the description of my image" width=50 height=40>.
In this example, consider striiping the alt="..." portion such that the revised code appears as <img
src="myimage.gif" width=50 height=40>.
Minimize Image Usage / Image Reuse
Each unique image on your web pages requires an HTTP request. In addition, each HTTP request has a wait latency
and requires additional overhead from the browser and server to deliver the image. However, images which are re-used
through the cache do not require additional overhead from either side. For this reason, you should try cutting back
on image use and try re-using the same images multiple times.
Minimize DHTML Usage
DHTML has some amazing effects but bears a large toll. Some DHTML effects weigh in
at 40-60k in accompanying Javascript code. Try using low bandwidth DHTML effects or using
Flash as a possible substitute.
Move Client Code to Server Side
Any client-side error checking that is done in VBScript or Javascript
should be pushed to the server side. These error-checking scripts often take too much bandwidth and have loopholes
which can be more rigoursly enforced if error checking is done on the server. For example, users who have
Javascript/VBScript disabled will not go through error checking.
Simplifying Javascripts
Anywhere you use names for your variables or functions in Javascript, try to reduce
their length. Instead of using long variable/function names, try limiting them to a single character and
using shorter code if possible. As well, try snipping out any comments in your Javascripts which you don't
need.
Use Relative Paths
When creating links to pages on your own domain, use relative paths rather than complete
links to your pages. An example shows this best:
A HREF="http://www.yoursite.com/link_goes_here/" (Absolute Link)
A HREF="/link_goes/here/" (Relative Link)