Techniques for making pages download faster

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

   
1. Remember that people nowadays want everything quick. We're living in a very fast-paced world. The Internet is popular precisely because it saves time in research and shopping and communicating. Don't give your viewers an opportunity to get frustrated with your website. Any negative feeling they get will be projected onto your entire message, or your product or service.

2. The biggest time-killers are graphics, music files and special effects that require the browser to initiate Java plug-ins. Don't overload a webpage with many of these. Ask yourself: What can be eliminated from the page without reducing the quality of communication or the over-all look? Perhaps the graphics can be made smaller, without losing their quality or purpose.

3. Frames pages download slower. If the page is divided into two frames and both have an equal number of graphics and other features, it will take twice as long for the page to download. On the other hand, if one frame is fairly simple and small, downloading is slowed only a portion of that time. And (obviously) the more frames on a page, the longer it will take to download.

4. If a page is going to be laden with graphics (let's call it the G-page, as in G is for Graphics), pre-load some of the images. This can be done by using a JavaScript, or you can use the page prior to the G-page for downloading a few of the images (if by itself it's a fast-loader). Below the main content of the P-page (P is for prior), insert a couple of the G-page images, and define the width of these images as 0 (zero) and the height as 1 (one). No one will be able to see it, but when the P-page loads into the visitor's browser, so will those invisible images. Then, when the visitor goes to the G-page, those images will already be cached in his/her computer ~ they won't require any downloading time at all. Of course, if the P-page already takes a while to download, you don't want to add to it for the sake of graphics that belong on another page.

5. Use the "low src" feature in the Image Properties dialog box of your Web designing program, if a particular graphic is going to take a while to download. The HTML code would look like this:
<img src="name.jpg" lowsrc="name-low.jpg">
Here are the steps involved:

  1. Make a low-resolution copy of the graphic. Convert it to grey-scale, reduce the number of colors to 16, then increase the number to 16 million and save it as a new jpg file (don't accidentally save it with the same name as the original image).
  2. In your webpage, insert the original graphic as you normally would, but then add the name of the low resolution graphic as the "lowsrc" image.

What happens when the page downloads with this? The browser ignores the high-resolution image and loads the page first with the low-res image. Your visitor sees the whole page a lot sooner, and when it's finished downloading, only then does the high-res graphic appear.

6. Images made as .gif files usually take longer to process. They use less colors, but they actually take longer to transfer from the host server to the visitor's browser. The exception is when very few colors are used, especially with text or line drawings.

7. Figure out just one purpose for each page. Is it to invite visitors to see the rest of the site? (That's the home page.) Is it to describe your organization? Is it to post a schedule? Any information or graphics that do not address that single purpose should be put onto a separate page.

 

Download this tutorial as a printable Word Document.

EXTRA TIPS

As an alternative to using frames for a menu of website contents, put the list into a table, and repeat the table on every page in the same location. After it's been loaded into the browser the first time, it will come up quickly on each new page. Or just invite viewers to return to a Table of Contents page every time they're ready to move on.

Do not use many animated images on the same page. Not only do they take longer to download (because each image is really several images layered on top of each other), but they also clutter up the page with too many distractions.

Background images are usually an unnecessary page-slower. Using textured backgrounds are often a sign of amateurism, so save some downloading time by choosing a nice color (usually white) instead of an image. Besides, this makes the text easier to read.

If you do use a background image, (such as the one on this page that creates the border down the left side) repeat the same one on every page that carries a related theme or belongs to a corresponding category of information. This image won't take any time to load after the first page.

If your page contains a lot of text, divide it into portions, and at the bottom of each page, put a link to the next page, like so:
continued

 

Return to Directory of Tutorials or GNWDA home page