Credit: Eladesor @ Everythingbutcomputers.net
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
,
and
. 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
Code:
<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:
Code:
<img
src="myimage.gif" alt="This is the description of my image" width=50 height=40>
In
this example, consider striping the alt="..." portion such that the revised code
appears as
Code:
<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:
Code:
A HREF="http://www.yoursite.com/link_goes_here/" (Absolute Link)
Code:
A HREF="/link_goes/here/" (Relative Link)
