Improving Site Performance
What (summary)
This is a SkunkWorks initiative to help improve the performance of the site by following some simple rules.
Why this is important
This is expected to enhance user experience. Incorporating these rules will help us
- save up on our bandwidth costs
- improve response times experienced by clients.
The end product of this exercise will be a more refreshing client experience and lowering our site's bandwidth consumptions/costs.
DoneDone
We will know the operation is complete when we get an A grade on YSlow.
Steps to get to DoneDone
- Minimize HTTP Requests: We need to lower the number of http requests the client needs to load the entire page. Currently, the site is loading multiple javascript and stylesheet files. We should combine files to reduce the number of these http requests by combining all scripts into a single script file and similarly combine all stylesheets into a single stylesheet. This will not be possible for scripts and stylesheets that change from page to page. However, combining files that are common to all pages will result in substantial decrease in http requests.
- Add an Expires Header: Apache should send out an expires header far in the future for content that is expected to remain static for a while. Examples of these are javascript files, stylesheet files, and images.
- Gzip components: Again use apache to send all components (stylesheets, scripts) after compressing them using gzip.
- Put CSS at the top: Currently some of the stylesheet files are defined inside the body tag. It is recommended that they should be moved to the head tag.
- Move scripts outside head tag: There are some scripts that are loaded inside the head tag. It is recommended that they be moved into the body tag just before they are used.
- Minify JS: It will make sense to remove whitespaces from all the javascript files. This will substantially reduce the no. of bytes that need to be transferred. Consider a million hits a day, resulting in a similar number of javascript loads. Minifying these script files, we are looking at a saving of 20-30% of bytes transferred.
- Remove Duplicate Script: Need to remove the duplicate script "show_ads.js".
- Remove ETags: Remove the ETags header.
For a detailed information on the above, have a look at http://developer.yahoo.com/performance/rules.html.