Hi there, this is an odd question so sorry... I've noticed that when using sprites defined in the CSS, the packet for the sprite doesn't get retrieved until after the CSS is retrieved (This seems to be consistent on most sites, and makes sense... you wouldnt want to download imaged defined in the css that arent displayed on the page). I've been using firebug and pingdom tools (and others) to watch these packets. This means the parallel downloads are slowed since the order of retrieval is 1) The HTML file 2) The CSS, Images and scripts ... 3) The images defined in the CSS (There are now 2 sections of image parallel downloads, and its not needed) Downloading the images after the CSS has been retrieved will slow the performance unnecessarily. What I'm suggesting is to add the images with display:none (hidden) within the page they are intended to be displayed, so the order of retrieval will be: 1) The HTML file 2) The CSS, Images and scripts This will cut out the 3rd section of parallel downloads, since the images defined in the css have already been added to the page so dont need to be called again. I wondering if anyone has also seen this, and would recommend for/against displaying hidden spites in the page Before you do, have a look at your site using pingdom tools, and look at the order of the packets... you'll see what I mean about the order of packets, and unnecessarily retrieving images after the CSS has been retrieved.
This is not 100% correct. It works a little bit different. The first thing you have to make sure is the correct order of CSS and JavaScript files. Put all JS files just above the </body> so the parallel downloading process won't be blocked by JavaScript (loading and executing). If the JavaScripts you use do add content via document.write to your site, leave it in the header. More about this can be read here: http://developer.yahoo.com/performance/rules.html#js_bottom Ok, now that CSS is in the <head></head> and your JS is referenced above </body> the retrieval is like this: 1. HTML 2. CSS 3. everything else in head 4. Images referenced by HTML 5. JS code that is inside page elements 6. JS code referenced via <script> 7. Images that is referenced by 6. 8. JS referenced by 6. 9. Images refernced by 6. I have combined several JS to one file, the order the Images are loaded referenced by JS is the order the scripts are combined! I can not recommend hiding any graphics. In some cases it might be ok, in some it is not ok The download order depends on if you spread your files from several subdomains, too. If you hide images with display: none they will be loaded anyway. What if some JS you load blocks rendering? You will have a page without images for seconds... and your visitor is gone