http://www.webpagetest.org/result/120309_SB_3H5DQ/1/details/
It seems css_7.css is blocking everything for almost 200ms. Is it possible to make css load in parallel with other files? If so, how can I approach the solution? 
Hi peery,
To begin, it seems that you are wasting one connection to load a spacer.gif (http://idforums.net/s.gif). Get ride of it, you should be using CSS for that.
On the other hand, it should be possible to combine these two sprites:
in one sprite.png (with an inedexed png) to save another connection.
Then, this image (http://idforums.net/style_images/1/tilesprt.gif) is so small that it should be worth to embed it in the CSS file using a data URI, using some code like this for backward compatibility:
div.image {
background-image:url(tilesprt.png);
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
That way, you save another connection for modern browsers (IE8+ and everything else). I believe that this page should do the conversion you need:
http://www.greywyvern.com/code/php/binary2base64
Finally, you can preload some resources, while loading the CSS file, but it only makes sense for important images called by the CSS file and which appear on every page and eventually the logo. This can be done with a small inline javascript before the css file:
[code]
[/code]Using the aforementioned function, you can prioritize the webpage resources without worrying with the maximum number of concurrent connections established by the browser.
Considering how small the css is, I’d consider inlining it directly into the HTML. As far as downloading in parallel, newer browsers (IE9, Chrome, Firefox) will do a better job of looking ahead in the html and fetching those resources. You could also move all of your script to the end of the HTML which may help for IE8 but may not be worth the effort if you inline the css anyway.
Even if newer browsers look ahead in the html, they are not psychic, i.e. they need more or less 200ms to know what images are linked in the css file and therefore must be loaded.
To make the page feel faster [the above fold is completed sooner] and be faster [connections established earlier and for that reason also warmer], I rather prefer the menu sprite to be loaded as soon as possible, as well as other important background images from css template. For these reasons, I prefer to preload css template images which appear above fold and the logo and use javascript for that.
Please don’t use javascript for critical images like that - you’d be a LOT better off inlining the css and letting the browser handle it naturally. Otherwise you have to deal with noscript behaviors.
If you want the performance to be screaming fast for the small images you can even embed them inline using Data URI’s so they come back with the base HTML response.
Thanks for all the helpful tips/responses! I combined the logo sprite with the index sprite. Reduced the initial pageload by one HTTP request.
http://www.webpagetest.org/result/120314_AP_3JYMH/1/details/
As for removing the transparent gif and making everything CSS will be a lot of works, not to mention it will increase the size of CSS rules by about roughly 3KB (before gzip) Which brings me to the next dilemma - external CSS or inline CSS.
If I keep the transparent gif, I know there will still be 11 HTTP requests, versus 10 if I move everything to CSS and increase the size of CSS by 3KB in the process. To inline CSS, everything gets returned as HTML, which is fast and reduce one HTTP request, but it can’t be cached. After gzip the CSS becomes mere 2.5 KB. However, that is 2.5 extra KB for all consequent pageload, which translate to roughly 40~50ms as downloaded HTML. If a visitor goes to my site and click around for more than five pageviews, then this delay quickly outweigh the 200ms penalty for loading the CSS for the first visit.
Looking through Google Analytics, I see 43% of my visitors are new and 57% are return visitor. So it seems having the CSS file external may be more suitable for my current situation.
Thanks for the advice about using javascript to pre-load images, but I think I’ll pass on that one for now. I want to reduce my dependence on javascript and rely more on server-side. The HTTP server I use is lighttpd and I would rather tweak it so that it serves more concurrent connections than to rely on javascript…
pmeenan, could you further elaborate about the problems of noscript?
As the images are still referenced in the CSS file, I would expect that without javascript it would revert to the unoptimized case, the one you are defending.
@lena - ok, sorry - I thought you were suggesting to use javascript to insert the images into the actual DOM, not just to force the browser to prefetch them.