Web Site Optimization

I got a very helpful article from http://www.sitepoint.com/web-site-optimization-steps/, the following is my summary and supplementary.

1. Make fewer HTTP requests

   • Combine scripts and style sheets: merge the .js files into one, the same as .css.
   • Use image sprites: This technique allows you to combine several images into one and use CSS to show only the part of the image that’s needed.
   • Avoid redirects
   • Avoid frames

2. Use a Content Delivery NetworkSome of the most widely known CDN providers are Akamai and Amazon, through its S3 service.There are some non-profit CDNs in the market; For example, one free non-profit peer-to-peer CDN is Coral CDN, which is extremely easy to integrate with your site. For this CDN, you take a URL and append “nyud.net” to the hostname. Here’s an example:

   http://example.org/logo.png
   // becomes:
   http://example.org.nyud.net/logo.png

3. Add an Expires header Setting the Expires header in Apache is easy: add an .htaccess file that contains the following directives to the root folder of your i1 and i2 subdomains (make sure Apache’s mod_expires is on):

   ExpiresActive On
   ExpiresDefault "modification plus 10 years"

4. Gzip components Serve gzipped Content
5. Put CSS at the top
6. Move scripts to the bottom
7. Avoid CSS expressions
8. Make JavaScript and CSS external
9. Reduce DNS lookups
10. Minify JavaScript
11. Avoid redirects
12. Remove duplicate scripts
13. Configure ETags

Besides the above, the following are also helpful to better optimizating sites:

1. Host Assets on Different Domains but Reduce DNS Lookups

   www.sitepoint.com – hosts only HTML (and maybe content images)
   i1.sitepoint.com – hosts JS, CSS, and some images
   i2.sitepoint.com – hosts most of the site’s images

2. Place Assets on a Cookie-free Domain If you use subdomains to host your assets, you need to make sure that the cookies you set are for your canonical domain name (e.g. www.example.org) and not for the top-level domain name (e.g. example.org). This way, your asset subdomains will be cookie-free.
3. Split the Assets Among Domains

4. Serve gzipped Content Adding in .htaccess file (or in httpd.conf):

   mod_gzip_on Yes
   mod_gzip_item_include mime ^application/x-javascript$  ^application/json$ ^text/.*$
   mod_gzip_item_include file .html$ .php$ .js$ .css$ .txt$ .xml$ .json$
   Header append Vary Accept-Encoding

   For details, see http://www.sitepoint.com/web-site-optimization-steps/.

5. Use Post-load Pre-loading and Inline Assets Once index.html has completed loading, make a behind-the-scenes request to pre-load mystuff.js. (which is not actually needed until the second page loads). This way, when the user hits one of your content pages, the JavaScript has already been delivered to the browser and cached.

   var js = document.createElement('script');
   js.src = 'mysftuff.js';
   document.getElementsByTagName('head')[0].appendChild(js);
   
   //Here’s the CSS version:
   var css  = document.createElement('link');
   css.href = 'mystyle.css';
   css.rel  = 'stylesheet';
   document.getElementsByTagName('head')[0].appendChild(css);

6. Tools for Performance Optimization

   • Firebug’s Net panel for Firefox, at http://www.getfirebug.com
   • YSlow, Yahoo!’s performance extension to Firebug, at http://developer.yahoo.com/yslow/
   • LiveHTTP Headers for Firefox, at http://livehttpheaders.mozdev.org/
   • Fiddler — for IE, but also a general-purpose packet sniffer, at http://www.fiddlertool.com/fiddler/
   • HTTPWatch for IE (commercial, free version), at http://www.httpwatch.com/
   • Web Inspector for Safari, at http://webkit.org/blog/?p=41
   • CSS Compressor and JavaScript Compressor are two handy web apps that can minify your code for you.