|
|
Download speed and splitting pages
People in labcoats with clipboards and sensible spectacles have found out that after eight seconds visitors begin to abandon any page that still hasn't loaded.
On a regular modem eight seconds gives you time to send around 40 kilobytes to your visitor - so that's the theoretical limit for the combination of HTML, graphics and other files on a single page.
Actually, it doesn't matter if your pages are far larger than 40 kB, as long as you manage to get something sensible showing on your visitors' screens in the first eight seconds.
You need to take advantage of the progressive loading ability of browsers - the fact that they begin to show a page before it has completely loaded.
One thing to watch out for is all-encompassing HTML tables. The browser will usually wait until it has downloaded all the text within the table before it displays anything. For big pages it's best to split the table into two - a top-encompassing table and a bottom-encompassing table. Make the split below 600 pixels, wherever there's a natural break, for example at a sub-heading. This works fine for viewers on 1024 resolution, because there's usually so much junk showing at the top and bottom of the screen that they only get to see 600 pixels deep at a time.
An alternative way to get over the problem is to avoid having any kind of all-encompassing table and allow the text to flow from one side of the screen to the other. This was the solution employed by usability guru Jakob Nielsen on his own site, useit.net, but most people believe that wall-to-wall text is hard to read, and Jakob no longer appears to champion it.
Here are a few more tips on speeding up downloading:
5. Specify the size of graphics in image tags. <img src="firstpic.gif" height="70" width="50">. If the sizes aren't specified, the page won't show until the browser has fully downloaded the pictures and knows how big they are.
4. Almost all browsers are run with local cache enabled, so it's a great idea to re-use graphics on multiple pages. They'll show up very quickly the second time they're used.
3. Each individual graphic should be optimised. With GIFs it's a question of minimising the number of colours, and with JPEGs determining the maximum acceptable fuzziness. The animated hat GIF near the top left of this page is just 3.8 kb, because it contains so few colours.
2. If you go over the top with stylesheets and JavaScript you eventually pay a penalty in processor time. Sure, the files themselves may not appear too large, but it can take the browser a long time to work out what to do with them. Just try rendering a difficult page from the hard drive of a 400 MHz machine. Even without having to download over the Internet it will take a second or so to appear. It's surprising how long these things take.
1. You can preload graphics in anticipation of the pages your visitor may decide to visit next. The best way to do this is through JavaScript. That way you can delay the preload so it doesn't interfere with the initial loading of the page. Pick up a script using the search term "javascript preload images", and make sure it kicks in after a delay.