There are a lot of articles available over the internet for the same. But I found few handy for me & It will surely help the developers who are not in much of it yet. Few of the points specified over here are based on the assumption that CDN is used for the static contents, while other may work without CDN requirement.
So let me do it point vise:
1. Make fewer HTTP Requests
- Make appropriate Sprites. CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
- Use combo handlers to reduce the http requests
- Use inline code if code is small (JS/CSS)
2. Reduce DNS Lookups.
3. Use a CDN for static components.
4. Add an Expire Header
5. Compress / Gzip appropriate components.
6. Put CSS at Top.
7. Put JS at Bottom.
10. Avoid Redirects.
11. Optimize the images
- Use optimized favicon (favicon cann't be served from CDN)
- Use SmushIt.
- Check for unnecessary use of high quality images. eg. 45KB 300x200 dimention.
- Remove duplicate images.
- Use background-repeat CSS property for the continous images with gradient, by picking up appropriate slice of image.
- For the continous images without gradient, use CSS background-color. For the rounded corner use CSS properties or corner images.
- Avoid empty space while making sprites.
12. Do the Post-loading of the components, which are not in visible area intially. eg. which can be seen only after scrolling down.
13. Use AJAX to fatch the components, which are not visible in page initially. eg. tab like structure
14. Make AJAX cacheable.
Yahoo! is the clear leader in the Research for Performance. That's why I always prefer to give reference from Yahoo! sites. Like for the more performance tips in detail please refer Yahoo! performance rules.
Enjoy improved performance.