ALL my site images load on one page?

[michaelg]

Hey there, any light shed on this would be great.


This single page:

http://www.andrewfitzgerald.michaels....net/news.html

once fed into an optimization report, results in this:
http://www.websiteoptimization.com/s....net/news.html

the problem is, that the single page in question - only has one image, although 2 other images load with it (seen under "Page Objects" section). The summation of the report warns that i have too many images loading.


Im a newbie trying to understand loading speed in CSS and this is confusing to me.

Perhaps someone knows what my coding error is?

Thanks for reading.

-michael

[Mittineague]

Hi michaelg, welcome to the forum,
I don't think the "speed report" page cares whether the images are in img tags in the mark-up or from CSS url sources. If they download, it counts them. Actually, the report doesn't warn that you have too many images. It warns that their total weight is higher than optimal. (89,046 is more than 30K)
If you add the weight of the 3 images
backgroundNEWS.gif 9.89 KB
backgroundRESUME.gif 38.14 KB
backgroundWORK.gif 38.94 KB
it comes to 86.97 KB (difference from rounding up/down ??)
A large portion of the resume image is black (#000000).
A large portion of the work image is white (#FFFFFF).
You should be able to let the browser render these colors with CSS instead of an image and be able to lower the load weight. eg. float the character image left and use background-color for the monochromatic block.

[michaelg]

First off, thanks for the quick response -

What i don't understand is, why do the 3 images download on one page (in this case "news") if the html only calls for one on each? Why would the report even see the other 2 images?

Is there a way to only download one at a time?

Otherwise thanks so much for the tips on the 2 large images - i wouldnt have thought of that for a while. That will def help there.

Thanks again.

[Mittineague]

I have learned something new here myself I guess that even though the 3 images in the CSS background urls are all used on different pages, because the CSS is loaded, they're downloaded whether they're needed or not. My CSS file only has 2 image urls. A very small-weight list-style-image, and a rather large background image that's only used on a very few pages. True, once it's downloaded and cached it's no problem. But adding any unneccessary load time to the primary landing page isn't a good idea. I'll be making the changes ASAP.
I'm going to take this out of my CSS
elem {
background-image: url("img.jpg");
and put it into an include for the few pages like this
<elem style='background-image: url("img.jpg");

[Tyssen]

I have learned something new here myself I guess that even though the 3 images in the CSS background urls are all used on different pages, because the CSS is loaded, they're downloaded whether they're needed or not

I'm not sure the speed report is accurate on the matter of whether all your CSS images are downloaded at one time rather than when the page that calls them is loaded.

[Mittineague]

Good point. I looked at the "live http headers" FF extension info for a page that didn't use the list-style-image and it didn't show a request for it. But then I did the same for a page that does, and it still didn't. In any case, I've already made the changes to the few pages that use the bg image so I guess I'll leave it as it is now.