I've been doing some performance tests using chrome and firefox's net page load speed readings and I've noticed something curious.
On those two browsers images do not get loaded until after the css file is completely downloaded however with the HTML page inline images using the IMG tag are downloaded progressively.
I found that if I preload all of the images using a hidden DIV at the very top of the page (on the next line after the BODY tag) then the images load at the same time as the CSS file.
Code HTML4Strict:<div style="display:none"> <img src="fe-images/top-form.jpg"/> <img src="fe-images/sprites.png"/> <img src="fe-images/bg-body.jpg"/> <img src="fe-images/bottom-form.jpg"/> </div>
The origional page currently takes 1.8 seconds to download, if I use the above trick it downloads in 1.2 seconds. The difference is probably magnified by the fact I'm in the UK and the server is in California but It's still a 30% speed improvement.
Does anyone know of any downside of doing this? Shouldn't everyone be doing this already? Does anyone know a way of getting it to work similarly with IE?
I've never seen this explained on any page performance optimization guides.