how to improve page load time

lots of thumbnail images

[scorpion]

I've got some pages with lots of thumbnails and was wondering some "tricks" to speed up loading (besides more pages) Any ideas? I saw some javascript to preload images but not sure if its faster...

[buckworks]

If you haven't already, be sure your images are optimized for the leanest file size that still gives an acceptable image quality. I'm no graphics guru, so I find the GIFbot at Netmechanic useful for that.

Search in the archives for threads on saving bandwidth. Techniques that conserve bandwidth usually result in faster pages, too.

Another thought: be sure to include height and width attributes for all images. Then the browser knows how much space to allow for the images and can display the surrounding text right away, giving something that visitors can start reading while the images come in. This will not decrease the total loading time, but getting away from an "all-or-nothing" loading sequence will make the page SEEM faster to your visitors. That's almost as good!

[IanKelley]

Preload the images on any page that points to the thumbnail gallery.

[tedster]

Make sure your layout isn't controlled by one big overriding table (or div). Break off the top section to be independent of the rest of the content. This allows the browser to render the first screenful early on.

The result is that usable content for your visitor is available sooner. The entire page doesn't load any faster - but the visitor gets a better feeling about it anyway.

As in many things, the perception is what matters, more than the measured reality.

[piskie]

The biggest code hogs are font tag/attributes, tables and javascript. Removing these from your page and putting them into external files makes your code lean and fast.

Use external css and js plus eliminate tables completely if possible and as Tedster says use several divs to allow the page to unfold rather than a long wait with nothing showing.

[dingman]

I have a page of thumbnails that is older than my conversion to CSS, and just loaded it in several browsers to get an idea of how things progress with an all-tables thumbnail page. Before I give the results, here's the structure of the page:

Layout table: four cells; left site navbar, content, lower-left link home, site footer. There are % widths for the columns, but they make no sense and are over-ridden by every browser I've ever tried it in. (It arose from an NN4 display issue. Don't ask.) No heights.

In the content page: 5-column table. None of the cells have size specified, but each contains an image with size attributes and a text label, so it's easy enough for the browser to calculate size before it loads all the images.

Results: NN4 still insists on downloading everything before it displays. This is bad, but predictable. Opera 6.03 also insists on downloading everything before it renders the table. I was suprised at this, since Opera touts their 'progressive rendering' and there *is* enough data there to render the tables before downloading the images. IE 5.5 renders both tables all at once, but before downloading the images. I think that's about as fast as the page could be rendered, since the outer table can't be rendered before the inner table's size is known. Galeon 1.2.7 (using Mozilla 1.2.1) also rendered the tables before downloading, as did dillo 0.6.6.

Re-writing that site has been on my to-do list for a while. However, I thought the list of how various browsers handle it might be useful.