0

A friend of mine threw a website I made through the tool at http://analyze.websiteoptimization.com/ . When he came back to me, he insisted that my browser was preloading tons of unrelated images on only the homepage of the site.

I came back to him, insisting that YSlow (and other 'network' tabs in browsers) prove that only specifically-displayed images and content gets loaded on the homepage-- nothing else. I insisted that the statistics from that site are only for a complete visiting of the site, and downloading all the required images.

However, he's not convinced, believing that some browsers (i.e. IE) will pre-load that unrelated content regardless. For that reason, he uses a global CSS stylesheet, and then applies changes to individual pages by loading a separate stylesheet.

I thought it was best practice to minimize requests to the server, not to add more, which is why we have CSS sprites. I also thought browsers never load images unless they're needed to display the page.

I don't believe I can accept an answer without healthy discussion.

  • Am I correct in that the browser's not loading EVERYTHING on every page?
  • Is the above tool incorrect?
  • Is the lesson my friend's learning from the tool's results incorrect?

Thanks.

SoreThumb
  • 530
  • 1
  • 5
  • 17
  • 1
    I've seen claims that some browsers will request assets such as background images for elements that are set to `display: none`. If there's no elements on the requested page that have background images (`display: none` or otherwise), additional files should not be requested. You should be able to confirm for yourself by tailing your server's request log. – cimmanon Sep 17 '12 at 20:14
  • That's true for this case; Either a CSS selector applies, or it's not applied. There are no `display: none` containers with background images. – SoreThumb Sep 17 '12 at 21:36

2 Answers2

1

The browser will generally only load what's actually shown in the page. (There may however be exceptions in some exotic browsers, like Opera Mini.)

The WebSiteOptimization tool will only look at what images are referenced in the HTML and in the CSS, not which images are actally used in the page.

When I analyse my own webpage, which has eight different background images that are shown one at a time by random pick, the tool says that all eight images are loaded, just because they are in the CSS. Checking the network traffic in Firebug and IE developer tools shows that they aren't.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
-1

According to me

Browsers do load cached images at time but newer updates can check if the image has changed. Also there are permissions which coders can set to allow browser caching or not. when using yslow or Google page speed which is a better tool try and use control+f5 to refresh your page so the site is forced reloaded without any offline files. You can also set Brower permissions based on your preferences.

I also want to add a little about your last line a browser will load all images linked in the code even if there css property is hidden.

It always loads thing in the img tags first and then all images in the css code.

It will also process the image request in sequential order ie first come first server

I hope this help.

mindmyweb
  • 888
  • 9
  • 13
  • But what about when there are CSS images, but the CSS requirements for that image don't apply? EG: `html#index { background-image: url(index.jpg); ` ? In that instance, there's a CSS image specified, but it's not requested to load for this page. – SoreThumb Sep 17 '12 at 19:32