Reducing Page Size for Quicker Loading
Reducing page size for happier visitors
 |
Article
by
Steve Watkins |
Having your site display quickly is one of the
essential ingredients of a successful site. Just because you or your
company have an ultra-fast broadband connection to the Internet, does
not mean most of your visitors have one too.
Why would we want to speed display up?
Even in highly developed countries, around 80% of
people are still using dial-up modems to connect through their
telephone lines. The slower speed of these connections can result in anger
at your site for taking too long to load.
After all, there are plenty of sites on the Internet
that probably offer the same information as you do but quicker. People
will leave your site if it is taking too long to
display.
If you sell online, as many sites do, those lost
visitors are lost customers and lost profits.
For this reason, we want to take all of the steps we
can to reduce the loading time for your visitors.
How long to display is too long?
The difference in somebody staying or leaving is
measured in seconds. Your site should at least be displaying something
after four seconds (even if the images are not downloaded yet), and be
fully downloaded in ten.
For each second after those times, you can expect to
lose at least 5% of your visitors (who are potentially paying
customers). That's a pretty heavy pice to pay if you are two or three
seconds slow.
As a guide to your page sizes (images and all):
- Bigger than 60K in size - Your
visitors will be unlikely to wait around to see your first page
- 50K to 60K - Your visitors may see
your first page but will be wary of another wait to see your second
- 40K to 50K - Better, but you're
still losing visitors
- 30K to 40K - The absolute largest
serious sites should be
- 20K to 30K - Responsive, and likely
to get return visits
- 10K to 20K - Very responsive and a
pleasure for your visitors
How do we speed things up?
There are a few core techniques to allow your pages to
load quicker. You don't necessarily have to revert your pages to just
boring text to have a snappy response time.
Reduce image size and help visitors
display them quicker
Images are the major contributor to a slow loading
time. By reducing their size by either making them smaller, optimising
them further with Photoshop (or the editor of your choice), or removing
them altogether can make a great advance in display time.
Selecting any GIF images to be "interlaced" can make
them display slightly faster too.
In addition, specify the height and width properties in
your HTML code. For example, while you could add images to
your page using the code <img src="./image.gif">, your page will
display faster with the code <img src="./image.gif" height="20"
width="80"> or something similar.
Use external CSS (Cascading Style Sheets)
External CSS is something that every site
should be using. If you are unfamiliar with CSS, it is an easy way to
mark the way several similar things should look on your website from
one place.
If you have every paragraph in your site displayed in a
green colour text, it would look like this in your HTML code:
|
Using an external style sheet (CSS)
reduces the HTML code to:
|
And a style sheet like this:
|
While this is a fairly trivial example, over the size
of a whole site that is a lot less font tags. CSS can save your
visitors a lot of time by setting the look of a lot more things that
would bloat your pages normally.
The external style sheet is also saved by your visitors
computer when it downloads it for the first time. As such, when your
visitor looks at the subsequent pages, he doesn't need to download it
again.
Use external JavaScript (if your site
uses it)
Moving your JavaScript to an external file is another
time-saver for the users of your website. If you have Javascript code
that is used on several of the pages on your site, rather than making
them download the same piece of code over and over for each page - make
it external.
Having an external JavaScript file means it only has to
be downloaded once (much like external CSS), and speeds up the viewing
of multiple pages considerably.
Remember that every little bit helps. And every extra
second your visitors are waiting to download is a potential client (or
many) leaving.
Less Flash and no Java Applets
As mentioned already in our should I use Macromedia Flash page
it can be a huge liability for your visitors' download times.
While it does look pretty when made professionally, the
size of one Flash image can be up to 40K or so on a site. That's bigger
than your whole page should be!
Unless all of your visitors are on broadband,
steer clear of using Flash. Most sites use it very sparingly with only
small animations.
Java applets should never ever be used on a
website. If your site has them - remove them.
It can take up to seven seconds to start a Java applet,
even on a computer with broadband. That is simply unacceptable to a
website visitor. It also screams "This site was made by an amateur".
Very unprofessional.
Conclusion
While implementing all the advice in this article will
reduce the size of your site, and may reduce its raw, visual appeal by
doing away with many of the graphics - your visitors will thank you.
Never underestimate how important responsiveness is on
a site. Even if you don't use all of the suggestions, removing even a
little of the page bloat is a good thing.
The increased usability of your site will be seen in
more visitors staying longer, returning more frequently, and, for
ecommerce sites, buying more.
See further general
website hosting FAQs or our FAQ categories
for more information.
Please contact
us if you have a question that is not answered on our site.
Other Frequently Asked Questions Categories
|