Slow Loading Background Images

I rely on background-image, but the page load is slow

[cmarshall]

I have an issue. I am using <div> tags with "background-image:" attributes to define my page, as opposed to <img /> tags. This allows me to completely skin the site from CSS.

Great stuff.

However, the first page load is unbearable. Even on high-bandwidth cable modem connections, it takes forever to load the page. I have all the sizes spelled out, so everything is positioned and scaled properly, however, the backgrounds don't get drawn until the entire page is loaded.

The images are small, and heavily optimized. It has nothing to do with image size. It even happens if I preload the images (either by Javascript or 1-pixel invisible images).

Ironically, <table> tags draw faster than <div> and <a>.

Is there a way to force the page to draw faster?

[coopersita]

Are you setting the image scale in css or html?

You could try to trim your css. Sometimes if you css is too big, it will take longer to download.

Google for css optimizer. They are tools that help you trim your css.

[cmarshall]

I didn't think you could scale background-image attributes in CSS.

I'll read up on it a bit more...

The CSS is read properly, as the entity sizes are set in CSS, and the page is sized correctly almost immediately.

It is the actual drawing of the background images that takes the time.

[tedster]

Whether images are rendered as background (where they are the last element to be rendered) or foreground doesn't affect the actual time to render them once the browser actually takes them on. To me this sounds like you may have other issues with loading the page that make the foreground take too long -- so the images just wait and wait until whatever it is in the foreground is finished.

Are you making database calls that are hitting long server response times, perhaps? Something else in the content that hangs? Too big a total html size?

Or maybe somewhere in the html you're calling out to a third party server for some kind of tracking or ad serving -- and that server is slow?

[cmarshall]

Good thoughts, but they don't apply in this case. I had first experienced this on a site that uses MySQL, but this site does not.

All my sites build with PHP, but I generate squeaky clean XHTML 1.1 code. I do detect whether or not the browser will support a MIME type of text/xml, and feed it that as a content-type.

I don't think that's it, but I'll check.

I suspect that it is just an image size issue. I have everything optimized, but speed check thinks it's too big. Maybe I should reduce the preloads.

I can do without one or two of the images.

I'll keep messing around.