SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ALL my site images load on one page?

    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

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,147
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    images

    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.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,147
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    CSS images

    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");

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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
    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.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,147
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)

    image loading

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •