Speeding up appearance of text

Without sacrificing image quality

[sloney]

Apart from the header, the whole main body of my home page (which contains plenty of vital images) takes 20-30 secs to appear and does not do so until at least 6-10 of the images have downloaded. Is there any way of forcing the text to appear before any of the images?

This page attracted plenty of paying punters before Florida but now I'm desparate!

Any help would be much appreciated

[BlobFisk]

Is your site designed using tables for layout?

You could look at redesigning and using a CSS based layout, seperating the style from the content and allowing you to present the most important data first.

HTH

[ken_b]

If you are using tables you could try breaking large content tables into 2 or even 3 smaller tables. That adds code, but might speed up loading.

Also be sure you specify the height and width for each image in your code if you don't already do that.

[grahamstewart]

Have you specified the height and width of each image? That should allow the browser to get on with displaying the text without waiting to find out what size the image is.

<edit>doh - kenb said that already.. oh well good advice anyway</edit>

[Purple Martin]

Everything that's been said so far is good advice. This is why:

The reason that tables can cause a long pause in loading is this: the browser doesn't display anything in a table until the entire table's code is downloaded, then it does all the necessary calculations to determine the size of the table and all it's cells, then it displays the whole thing in one go. If you have images in the table that don't have height and width specified, the browser has to wait for them to download before it can do it's calculations.

By specifying the height and width of all images the browser is able to display the table before the images have finished downloading.

By splitting your one-table layout into two or three tables, the browser can display the first table while the others are still downloading, giving the impression that the page is loading faster (even though the total code may be slightly bigger)

By switching to a CSS layout, the browser can display the page bit by bit as it downloads - it doesn't have to wait for all calculations to be finished. Also, a CSS layout can be much less total code size than a complex table layout with many rows and cells (although a very simple table layout can be even smaller).

[grahamstewart]

Oh... and if you want to stick with tables (yuk) then consider using the fixed table layout property [w3.org] in CSS.

You will have to specify widths for your columns but you will gain a speed benefit because (according to w3c) "the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths."