Question

I have a website where when a user does a query, he is taken to a results page with 25 200x150px image links. My problem is that (at least on my computer) the content seems to not load before the images!

I have content before and after the image part (something like header and footer, and the images are the content in-between) but I can’t see the footer until after all the images have been transferred, which is a lot, around 500ms each and nothing appears before the previous image has loaded!

I tried to access my website from a proxy, but the results differed: The image slots were loaded, so was the header and footer, and the images loaded one by one, but without keeping any other content from being loaded!

Even so, they were loaded slowly… 🙁

This issue appears on Mozilla Firefox and on Internet Explorer,but not on Chrome or Opera.
Any ideas what could be causing this?
And more, any ideas of ideal optimization to my specific situation?? Thanks in advance!

Cheers!

Answer 1

Any ideas what could be causing this?

I think we would appreciate some code, firebug information, google page speed, etc.

Any ideas what could be causing this?

This is a guess, but maybe flushing the buffer early might help

And more, any ideas of ideal optimization to my specific situation??

Post-load your images(other assets too) using YUI image loader.

You can take a closer look at your page and ask yourself: “What’s
absolutely required in order to render the page initially?”. The rest
of the content and components can wait.

When loading javascript you should be using non-blocking javascript using headjs for example Or just put your javascript at the bottom.

I would advice you to have a look at Yahoo!’s best practices and Google Page speed page as well