After optimizing a few web 2.0 websites for speed and download time, I would like to share with everyone some of the tips I have learned and implemented during the process.
1. Use image sprites
If you use a lot of background images in CSS, it’s a good practice to put all the images you need in one big canvas. You can then set background-position in CSS to get the image you want from the big image. The advantage here is that instead of having to make numerous HTTP requests on a page, the browser only needs to make one request for the big image and thus speeding up load time. Some people usually create a sprite for images of the same purpose, for example, a sprite for navigation images, a sprite for logo images, a sprite for footer images, etc, but there is no reason why you can’t create combine all images, be it navigation, icons or footer, in one single sprite.
Examples of an image sprite: AOL, Digg
2. Combine Javascript files
If you are building a web 2.0 website, it is probably very likely that you will have multiple javascript files. For example, you might have one for jQuery, a few for various jQuery plugins, one for your own custom functions, etc. Instead of calling them one by one in your html, you can put all scripts in a single Javascript file to reduce HTTP requests.
