SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Performance increase by loading images outside of css.

    Hi

    I've been doing some performance tests using chrome and firefox's net page load speed readings and I've noticed something curious.

    On those two browsers images do not get loaded until after the css file is completely downloaded however with the HTML page inline images using the IMG tag are downloaded progressively.

    I found that if I preload all of the images using a hidden DIV at the very top of the page (on the next line after the BODY tag) then the images load at the same time as the CSS file.

    Code HTML4Strict:
    <div style="display:none">
    <img src="fe-images/top-form.jpg"/>
    <img src="fe-images/sprites.png"/>
    <img src="fe-images/bg-body.jpg"/>
    <img src="fe-images/bottom-form.jpg"/>
    </div>

    The origional page currently takes 1.8 seconds to download, if I use the above trick it downloads in 1.2 seconds. The difference is probably magnified by the fact I'm in the UK and the server is in California but It's still a 30% speed improvement.

    Does anyone know of any downside of doing this? Shouldn't everyone be doing this already? Does anyone know a way of getting it to work similarly with IE?

    I've never seen this explained on any page performance optimization guides.
    David Meagor
    http://BooRoo.com
    Online Surveys - Online Quizzes - International Support

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hmmm, if those images are in the HTML, then why not let them just load from where they belong in the HTML? I would say it's better not to load presentational images in the HTML. If CSS etc. is off, you'll see all those images on the page; and though I know that's rare, assistive devices may thump into them (although most ignore anything set to display: none) but I wonder what will happen to someone tabbing through the page?

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are background images and sprites. Only the logo is loaded in the page so I've not included it.

    CSS being switched off is not an issue, this is a web application and it would not work anyway without css/javascript.

    I cannot find any tabbing issues. As far as I can tell tabbing just selects links and they are not links.

    The only thing that bothered me slightly was the SEO impact of doing this. Lots of sites use display:hidden for sliders, panels etc. so I don't think google would care unless its packed full of keywords or something.

    So far I can find no reason not to do this on every site I own!
    David Meagor
    http://BooRoo.com
    Online Surveys - Online Quizzes - International Support

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dmeagor View Post
    They are background images and sprites.
    In that case they should be served via CSS. Are you saying that you call them in the CSS file but also put them in the HTML in this way and they appear faster? If so, that's odd. I assume you cleared the browser cache after each trial?

  5. #5
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are listed in the CSS as well, however if they are also preloaded in the HTML at the top of the page in a hidden div then the browser is able to load them faster as it doesn't have to wait for the css file to download first. Makes prefect sense really.

    Yes Browser cache is always flushed (images return 200 not 304.)
    David Meagor
    http://BooRoo.com
    Online Surveys - Online Quizzes - International Support


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
  •