I recently read High Performance Web Sites, and these are the notes that I took from the reading:
Only 10-20% of the response time is downloading the HTML, the rest are the other components. Front end improvements typically take fewer resources than back end improvements. If you cut back end responses in half, that would only decrease the user response times by 5-10%, but cutting the front end response times in half yields a savings of 40-50%.
1) Make fewer HTTP requests by using image maps, CSS sprites (position in the background of a Div or Span), combine scripts and style sheets. This point provides the largest wins -reduce the number of HTTP requests to the server. Typical savings is 30-45%.
2) Use a Content Delivery Network. The user's proximity to your servers has a large effect on the page response time. The first step is to disperse the component web servers. Do this before attempting to handle the application. CDN are used to deliver static content, such as images, scripts, stylesheets and flash. Typical savings is 18%.
3) Add an expires header. This tells the browser that it can use the cached content until the content expires. For Apache you can use the mod_expires module. Also, use Max-Age directive. When you change a component, change the file name, this ensures that no cached content is seen by users. Add a far future Expires header to your components. Typical savings is 57%.
4) GZip components. Compress all text files - HTML, scripts, stylesheets, XML, and JSON. Typical savings is 7%.
5) Put style sheets at the top, in the head. Putting stylesheets near the bottom of the document prohibits progressive rendering in many browsers. Use <Link rel ... and not the @Import.
6) Put the external javascripts at the bottom of the page to enable progressive rendering and greater download parallelization. Moving scripts down the page, means that more of the page is rendered for the user before the script is processed. Also, most often only two components can be downloaded at a time from each host name. While downloading and executing a script, browsers stop other downloads.
7) Avoid CSS expressions. CSS expressions are evaluated every time the page is rendered, resized, scrolled or even when a user moves the mouse. The CSS expression can overwrite itself as part of it's execution. See http://stevesouders.com/hpws/onetime-expressions.php
8) Make JavaScript and CSS external. This allows for caching, that is where the savings are.
9) Reduce DNS lookups. It typically takes 20-120 miliseconds for the browser to look up the IP address for a given hostname. Reduce the number of hostnames in the web page, split between two - four hostnames and use Keep-Alive.
10) Minify JavaScript - reduce unnecessary characters from code. Also your code can be obfuscated - remove comments, whitespace and munges the code (converts function and variable names to smaller strings). Use ShrinkSafe or DoJo Compressor.
11) Avoid redirects. Use the Apache Alias to alias www.xxxxx.com to www.xxxxxx.com/. Or, you can use the DirectorySlash directive or the mod_rewrite.
12) Remove duplicate scripts, they hurt performance.
13) Configure ETags / Entity Tags - a way web servers and browsers validate cache components. This only really effects sites that are clustered; one servers component will be seen as different from another's component. This will loose the benefit of caching. Reconfigure or remove ETags.
14) Make sure your AJAX requests follow the performance guidelines, especially having a far future Expires header.
And here are a few links to tools from the book:
http:// developer.yahoo.com/yslow / Analyze load times of pages
