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

views:

107

answers:

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

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?

+2 A:

One way to find out: try a debugging proxy.

The answers may differ for different browsers.

Michael Brewer-Davis 2010-01-20 19:39:48

thanks Michael - I'll give it a try

Mo Boho 2010-01-20 19:57:23

installed Fiddler (http://www.fiddler2.com/fiddler/help/hookup.asp#Q-NonWindows), ran it. Opened IE 8 (for testing only - don't really use it) and visited my site. Fiddler displayed all requests, and it looks like IE8 at least also doesn't load up background-images UNLESS the css element is used on that page. So that's good news.I don't have access to IE7 or IE6 - does anyone have any info on how those 2 act?

Mo Boho 2010-01-20 20:48:14

+1 A:

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.

Erik 2010-01-20 19:40:21

That's what I would've thought....but haven't been able to find a definitive answer on this. I used Live HTTP Headers extension in FF and see that they don't get loaded up, but don't really know how to check for IE - to see if it behaves the same way.Is there no definitive answer to this from the W3C or CSS standards or something?

Mo Boho 2010-01-20 19:53:15

Yea, cause IE really sticks to standards :p If the standards say its so, doesn't mean IE does it that way.

Erik 2010-01-21 10:51:06

+1 A:

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

aip.cd.aish 2010-01-20 19:49:53

I use YSlow which is also built on top of Firebug - I presume it's a similar beast to the Google addon.

Mo Boho 2010-01-20 19:54:43

ansaurus

tags:

views:

answers:

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

related questions