Do all CSS background images get loaded even if the CSS isn't applied? [duplicate]

Question

I'm concerned about load times on home page of our site.

My home page uses a default stylesheet with ALL the styles for the whole site. I have background image references for elements on other pages (i.e. not used on the homepage). Do these background-image graphics get loaded anyways when a user visits the homepage of the site?

Or are the only css background image that get loaded are the ones that are directly used on that page?

Answer 1

One way to find out: try a debugging proxy.

The answers may differ for different browsers.

Answer 2

The images won't load unless they are actually used on the page; as far as all the styles being loaded on the home page goes -- this is actually a reasonably good thing. Once that single CSS file is in the viewer's cache, its there and doesn't have to be downloaded for subsequent pages.

Someone else's post just reminded me I'm basing my info off of firebug; browsers other then FF may very well download those unused BG images, but I really doubt it.

Answer 3

Building on Erik's answer, you could use tools like Google's Page Speed addon for Firefox (which I believe is built on top of firebug) and see what is actually slowing down your website when loading.

You can find more info about the tool and some other tips here: http://code.google.com/speed/page-speed/docs/using.html