People on the internet are very
impatient and most of them simply will not sit around and
wait for your pages to load. Make sure you are not losing
your visitors because you have a slow loading site. One of
the goals in designing and setting up your website should
be to have it load as fast as possible.
There are dozens of little things
you can do that will impact the loading speed of your website.
I will talk about three of the
more effective techniques in this article:
- compressing the size of your
graphics
- using tables to speed up
the load time of your website
- how to get rid of redundant
code.
Compressing your graphics
The idea behind compressing
your graphics is to make the graphic file size smaller so
that your web page loads faster.
Time and time again people build
graphics in Photoshop or Paint Shop Pro and think they have
the graphics down to the smallest size. Well they don't! Most
of the time the graphics can be compressed much more. The
problem is that these programs are so powerful with so many
extra features that most users don't know all the tricks that
can be used to really compress graphics down to the bare minimum.
Once your graphics are done,
I recommend going to http://www.gifwizard.com
or http://www.gifoptimizer.com
for your GIF graphics and http://www.jpegwizard.com
for your JPEG graphics. These are free services that will
retain the viewing quality of your graphic but compress them
down as much as possible so that they load faster.
If you are really familiar with
Photoshop or Paint Shop Pro, you can do a lot of the compression
yourself. The first thing to do is make sure you aren't using
too many colors in the graphics. For example some people have
16 million colors in their banner
when in actuality
they are using only three real colors. Use the minimum number
of colors in your graphics. Always use 256-color mode, or
if you can, you might even try 16 or 8-color graphics mode.
This one technique alone will compress your file size so
much it will make your head spin! As a side note, Photoshop
5.5 has one of the best compression utilities that will do
all the compression for you and generate small file sizes
while preserving the quality of the image. Check it out at
http://www.adobe.com/prodindex/photoshop/main.html
Using Tables
If you have a really long page,
the second thing you can do is split it up into tables. You
can see a sample of this by going to http://www.marketingtips.com/tipsltr.html
You will see that we've broken the page into 5 separate tables.
The idea behind using tables is to split the text up into
different sections. The browser maps the page immediately
and automatically starts loading text into the first table
so it appears as the rest of the page is loading. This allows
your visitor to start reading right away while the rest of
your page loads.
Let me explain this in more
detail.
Say, for example, your file
size is 10K and you break this down into 5 tables of 2K each.
As soon as you hit the 2K load period of your 10K file, the
browser will drop that information into the table so that
your visitors have something to read on the first part of
your page while the rest of your information is still loading.
Normally the browser would wait for all 10K to be loaded before
it would display the page at all.
This is a great way to trick
the browsers into displaying the first part of the page while
the rest of it is loading. It gives your visitor something
to read right away and makes it appear as if your page is
loading faster.
I recommend that you take this
a step further by making your table shorter at the top and
longer at the bottom. This way your table loads really fast
at the top while the bottom takes a bit longer. It makes
it appear as if your page is loading even faster and gives
the illusion of a really fast website! And, most importantly,
your visitors won't leave because they are tired of staring
at a blank and loading screen.
Remove Redundant Coding
The third way to speed up your
website is to take out redundant HTML. If you are using any
of the "What You See Is What You Get" (WYSIWG) editors like
Microsoft FrontPage you will find lots of excess code. These
editors put a lot of redundant HTML on your page... it simply
does not need to be there and it only increases the size of
your files.
For example WYSIWG editors put
in the font size and font type for every paragraph. This is
a waste of space. This gives the browser more things to figure
out which takes time. You should only have to put in your
font type or size when you change it, not in every paragraph.
Here's an example of some simple
coding done in a text-based editor:
<html>
<head>
</head>
<body>
<font face="Times New Roman">
<p>Hi, My name is Corey</p>
<p>Some HTML editors put in a lot of excess code,
making the size of the field large and unwieldy.</p>
</font>
</body>
</html>
By taking out excess code
you can reduce the size of your files significantly!
Here's an example of redundant
source code put in by a WYSIWG editor:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author" CONTENT="Corey
Rudl">
<META NAME="GENERATOR"
CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<TITLE>Hi there</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial" size="-1">Hi,
My name is <I>Corey,</I></FONT><FONT
FACE="Arial" size="-1"></FONT>
<P><FONT FACE="Arial"
size="-1">Some HTML editors put in a lot of excess code,
making the size of the field large and unwieldy.</FONT><FONT
FACE="Arial" size="-1"></FONT>
<P><B><FONT
FACE="Arial" size="-1">By taking out excess code you
can reduce the size of your files significantly!</FONT></B>
<BR>
</BODY>
</HTML>
As you can see, it has put in
a font face and size definition for every paragraph even though
it always stays the same throughout the page. WYSIWG editors
will insert code like this for many other things, not just
font face and size.
If you have a file that is simple
text and it comes out as a 20K file when you use a WYSIWG
HTML editor, you can reduce the size by at least 4-5K by just
removing redundant HTML code. It doesn't sound like much,
but it can add up to a load time which is 25%+ faster.
OK... you've reduced the size
of your graphics, divided long pages into tables and removed
all the redundant HTML coding... now, how do your figure out
how long it takes for your site to load?
Visit NetMechanic at http://www.marketingtips.com/tools.html
and try out their free service... you can get a report that
shows how quickly your page loads at several common modem
speeds.
This is just the beginning,
for 640 pages of the most cutting edge tips, tricks and tools
for promoting and successfully running a business on the internet,
check out http://www.marketingtips.com/tipsltr.html.
You will be glad you did!