Performance increase by loading images outside of css

HTML & CSS
1

Hi

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.

<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.

2

Hmmm, if those images are in the HTML, then why not let them just load from where they belong in the HTML? I would say it’s better not to load presentational images in the HTML. If CSS etc. is off, you’ll see all those images on the page; and though I know that’s rare, assistive devices may thump into them (although most ignore anything set to display: none) but I wonder what will happen to someone tabbing through the page?

3

They are background images and sprites. Only the logo is loaded in the page so I’ve not included it.

CSS being switched off is not an issue, this is a web application and it would not work anyway without css/javascript.

I cannot find any tabbing issues. As far as I can tell tabbing just selects links and they are not links.

The only thing that bothered me slightly was the SEO impact of doing this. Lots of sites use display:hidden for sliders, panels etc. so I don’t think google would care unless its packed full of keywords or something.

So far I can find no reason not to do this on every site I own!

4

In that case they should be served via CSS. Are you saying that you call them in the CSS file but also put them in the HTML in this way and they appear faster? If so, that’s odd. I assume you cleared the browser cache after each trial?

5

They are listed in the CSS as well, however if they are also preloaded in the HTML at the top of the page in a hidden div then the browser is able to load them faster as it doesn’t have to wait for the css file to download first. Makes prefect sense really.

Yes Browser cache is always flushed (images return 200 not 304.)

6