Browser (load speed) Behaviours (Windows)

[FordCorsair]

Hi, I've not been around on here so excuse me if this thread is not quite in the right place for discussion, but for a while but I have noticed this curious thing with Windows browsers...

This is a site that I have created: http://www.freddysrevenge.co.uk/

on a couple of Windows PCs (XP and Vista) that I've tested I get these results:

It loads quickly in Chrome (7.0)
not so bad in Opera (10.63) or Safari (5.0.2)
but...
Firefox (3.6) is quite slow and loads my Lightbox2 gallery thumbnails first before the page's main CSS background images and colours.
The same applies to IE (8.0)

• Is there a way of ensuring the page's main styling CSS is loaded first before the Lightbox2 stuff?
• Have I missed out some thing in my coding?

Most of the target audience use IE or FF so it would be good to resolve this niggle.

many thanks

Dom

[Beverleyh]

Hi,

I think the main issue is that you have over 4.7MBs of images loading on that one page.

One of your images (Xtreme003.jpg) is a rather large 364kb - I optimised this in Photoshop, saving at a medium 40% quality, and the file size is now 55kb.

See my results here: http://i53.tinypic.com/243rbb9.jpg - the human eye can see very little degradation but consider how much space and load-time you'd be saving if you did this on all your (unoptimsed) images.

Even better, if Lightbox2 offers the means to use thumbnails instead of a resized version of the large image, you'd save even more space and load-time.

[FordCorsair]

laziness on my part, and my only excuse is I inherited the the images 'as supplied' and didn't consider the effect they'd have on the way browsers would treat them... will go about optimizing the guilty images (later).

thanks for your advice, Beverley

but is there a way to ensure the HTML and CSS is excuted in the right order?

Dom

[Beverleyh]

You could use javascript to load elements in a certain order (I there's a script here in the DD library that does that) but you'd still be loading in an additional javascript to create the effect.

Have you considered breaking up the page a little and loading each info block via Ajax at the users request? http://www.dynamicdrive.com/dynamici...jaxcontent.htm

You have nicely defined content areas already so I'd be tempted to break off the following and include them a their own page-blocks;
1 - The Rebuild
2 - Extreme Wheels Show
3 - Workshop Happenings
("The Future" would be the first page-block that loads by default via the DD Ajax script and the ones above take its place as they're requested.)

That would be the majority of your gallery content taken care of - you'd only have one loading on the main page and the rest would load as the user clicked on the relevant pages. The result would be a much faster load, and combined with your freshly optimised images, your website will be ultra-zippy!