Does having to many background-image in css affect perfomance?

Question

Some users are reporting that my site is too slow And i think background images in css might be a possible culprit

I have a site that uses a custom build system to concatenate all css, compress them ( yui compressor ) , make css sprites automatically ( smartsprites ) and I end up with a 9kb CSS for the whole page, this includes all css for background-images at last is d they were around 60 ( several go to the same sprite not sure how many )

I was wondering if the default behavior of browsers is to download the images as needed ( when they match a selector ) or download them all.

Right now firebug in firefox seems to suggest that they are all been downloaded. What techniques would you suggest i'd use to avoid the problem, and or mitigate it.

edit: I misread firebug, the images that are being downloaded belong to a lightview that is hidden but the background-images are matched to the dom.

Answer 1

the default browser behavior is to download two items at a time(i.e. 2 http requests), if you think you have lots of images create a sub domain for your images like images.yoursite.com and you will start seeing the browsers making parallel request, and you can see some improvement in performance

Answer 2

Maybe take a closer look at the image(s) you're sending, particularly if there are a lot of them being compiled into a single "sprite" image.

What could be happening is that the image you're pointing to is very large. Sure, it should only be loaded once (the benefit of the sprite method), but if it's several hundred KB it could certainly cause some performance problems.

Answer 3

No, in fact it's better to put them in the CSS than in the markup.

The image calls will not block the page and as the images are loaded they will be rendered on the page so overall it is a good idea to load them via CSS. Not to mention that this design is also more flexible.

(It goes without saying that each of those images will take up bandwidth and extra HTTP requests)

Answer 4

(Side topic. Not really answering your question. But might be interesting or even relevant.)

I think another possible culprit is that "some users" will always feel that your site is "too slow". (Maybe it's more of a Mental Breakdown than Stack Overflow thing? What do these users consider being a fast site? Can they give examples? How fast is their connection and computer? Where are they, and where is your server located? What exactly is slow? The signup process? Watching videos in HD? Scrolling the window? Loading Firefox? After all, it's humans.. n'est pas?)

Answer 5

There's a nice firefox plugin called Yslow that gives you some useful information about performance optimization. It shows you performance issues it detected, and gives you links to articles suggesting an improvement. http://developer.yahoo.com/yslow/

Some info on best practices http://developer.yahoo.com/performance/rules.html