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. This will be possible by following these performance rules:
- 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.
Steps to get to DoneDone
For this iteration, the following needs to be accomplished:
-
Add an Expires Header
- We've decided on adding expires headers. The exact expiry time for different components needs to be agreed upon.
-
Gzip Components
- With Ethan Devenport's valuable input, we've decided to not use compression while transferring files to the client. The issues raised were
- AboutUs servers are already over-worked. Since compression is computationally expensive, using it will lead to more work for the servers resulting in slower response times for the clients.
- Not all browsers support compression, and clients with low-end machines will have performance implications when they have to decompress files before rendering the page in their browser windows.
-
Remove ETags
- This needs further input whether applying this rule will result in substantial performance gains in our case or not.
