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