From the Yahoo research on user experience, they found out that 90% of user waiting time is coming from the frontend. So, we should start paying attention on this to get a bigger impact on our changes in a short time.

Here are the 14 rules they formulated:

1. Make fewer HTTP requests
   • Concatenate scripts and stylesheets to reduce HTTP traffics
   • CSS sprites (combine images to 1 file and use background position attribute for particular image).
2. Use a CDN
   • Akamai (distribute your static content before distributing your dynamic content).
3. Add an Expires header
   • Maximize the use of Browser cache (not just for images but stylesheet, scripts as well).
4. Gzip components
   • Gzip will cut 90% of size for response to send back (fewer TCP packets). This will affect users’ download times. Configure apache to do it.
5. Put stylesheets at the top
   • IE waits for all external stylesheets to load up before rendering.
   • Improve user perception to put it at the top.
   • use LINK tag but not @import
6. Move scripts to the bottom
   • scripts block parallel downloads across all hostnames. In HTTP 1.1, you can download 2 components in parallel per hostname. So, JS right above your component to minimize the block.
   • scripts block rendering of everything below them in the page
   • scripts defer attribute is not a solution. Block rendering and downloads in FF but slightly in IE. So, rely on it.
7. Avoid CSS expressions
   • Use one-time expression
8. Make JS and CSS external
   • Could be cached!
9. Reduce DNS lookups
   • typically takes 20-120ms.
10. Minify JS
    • Take away white space, tab… and comments on JS to reduce its size.
    • Obfuscation is risky and not save you much unless you want to protect your JS.
11. Avoid redirects
12. Remove duplicate scripts
13. Configure ETags
14. Make AJAX cacheable
    • You can make expire time far in the future and put last modified time in the url.

Tool

http://developer.yahoo.com/yslow/ (Firebug)