Reducing Page Size for Quicker Loading

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:

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.