Tutorial: Fast loading websites
Level: Beginner. Published on 1 January 1998 in Web design and style
Fed up with your site taking forever to load? Then you can bet your other viewers are too! Check out this tutorial for tips on making your site quicker to load.
Websites are often deadly slow to load. Here we're going to tell you how avoid such things as far as is possible. We'll cover the reasons for a slow-loading site and what you can do about it.
Why sites are slow
The main reason that sites are slow is that when using a modem, the Internet has a really slow data transfer rate. The "world wide wait" is very unforgiving of sites with a lot of information on. We're not talking about content, we're talking about the size of the files.
The main culprits are big image files. Now big image files in the print world are around 30-100Mb - huge in other words - but on the Web, a big image file is anything over 20KB. And it adds up: if you have 5 20KB GIFs on your homepage, that's a 100KB download, plus the text file with the code. At a transfer rate of, say, 1KB/second (not that fast, but not that slow either, in Internet terms), that's getting on for a minute and a half download time. Sloooow!
So what can I do?
It should be apparent by now that the way to get a faster download time is either to have fewer images on the page, or to shrink in file size the ones you have.
You can use HTML to good design effect. With the clever use of CSS, you can maybe do away with those graphical section headers (the headers for this tutorial are all defined in HTML). Do you really NEED the image, or can it be done in code?
If you are going to use an image, ask yourself if it really adds something to the page, or is it really unnecessary for the overall effect?
Faced with the fact that you have to use the image in your site, there are several immediate things you can do:
- In you image editor, crop out all the extra space you may have for positioning purposes and replace this with CSS padding or margin. Code is a much more economical way to do it. If you can, reduce the physical size of the image.
- Use JPEG (.jpg) files for photographic-type images and compress them on saving down to a size that is acceptable. In Photoshop 4, try to get the slider down to 2 for good compression levels. There will be a loss in quality, so this may take some experimenting!
- When you export a GIF that's really quite simple, say a menu option, but the dialog box is telling you that it needs 256 colours (or other really high numbers), try manually pushing down the number of colours in the image a bit. This sometimes turns out dreadfully, but it often makes little discernable difference.
For animated GIFs, try to reduce to a minimum the number of frames that the animation takes. Fewer frames - smaller filesize.
Later versions of Photoshop have a handy "Save for Web" feature which optimises GIF, JPEG and PNG images for Web use. This feature can dramatically reduce the size of your images. Check out our Save for Web feature tutorial for more info.
The last word
Hopefully, if you follow these tips, you site will load a lot quicker. It does make a real difference to the end viewing experience! There are, course, things you can do nothing about, like slow servers, net congestion etc. - that's just the way it is, as the song says.
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!