CSS sprite to those images
They are background images need x-expand but can’t be used in sprite;
or they are encoded in the way of which I have no idea to add and specify their position in a sprite image.
You’re testing with IE7 which isn’t representative of most users these days (even in the Outback). Use IE8, 9 or Chrome. IE7 only makes two connections per hostname rather than the usual six, which causes you a lot of pain because…
You have too many HTTP requests. A lot of these are for ‘furnature’, e.g. vtop/grey/bg.jpg which would probably be better off served as PNGs anyway. Then you can sprite them. You do not need to consider spriting IMG elements yet.
jQuery, fastslideshow.js and thickbox are all blocking all subsequent requests: synchronous jaavascript is killing your FEO.
→ Turn off javascript in your browser, and adapt your page so that it can load fully and look OK without javascript.
→ Now that all the javascript that remains is just ‘enhancements’, move it into a $.document.ready(function () { … }) call. Place this at the end of your HTML just before the closing body element, with the jquery load just in front of it.
add a dns-prefetch for your image subdomain.
move the google analytics code to the end, after the jquery stuff. Make sure it is loading asynchronously.
Use a CDN for requesting jQuery. the only one in the game really is Google’s. Use a popular version to enhance the chances of it already being cached. I use 1.7.2
Move your gzip compression to the web server (e.g. apache) instead of your application language (e.g. PHP). make sure Javascript and CSS get compressed.
Once you’ve done all this, come back and post your test results, and we’ll see where we can go from there.
Your second best option to images sprites is CSS sprites [these ones allow x-expand edit: whatever that is, but you might consider stacking the images vertically or diagonally to build an image sprite, no?]. What you are doing in the second case is serving several background images embedded in only one CSS file. The way of doing it is constructing a second CSS file with only the background images embedded with data URIs. Call this file img.css. You can find a discussion here:
IE6 and IE7 do not support data URIs, but there’s a work around using mhtml to embed the background images. Call that file img-ie.mht. You can find a discussion here:
Then what you need to do is using the following code [assuming that you are using html5]:
[code]
[/code]
The conditional comments are used to prevent unnecessary downloads.
The .mht file must be served with the correct mime type, otherwise it wont work, cf.:
As a second order optimization, you might try to join the general.css and img.css files to see if it is quicker.