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.
- 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
- 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:
- 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):
ExpiresDefault "modification plus 10 years"
- Gzip components
Serve gzipped Content
- Put CSS at the top
- Move scripts to the bottom
- Avoid CSS expressions
- Reduce DNS lookups
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
Besides the above, the following are also helpful to better optimizating sites:
- 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
- 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. http://www.example.org) and not for the top-level domain name (e.g. example.org). This way, your asset subdomains will be cookie-free.
- Split the Assets Among Domains
- Serve gzipped Content
Adding in .htaccess file (or in httpd.conf):
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/.
- Use Post-load Pre-loading and Inline Assets
var js = document.createElement('script');
js.src = 'mysftuff.js';
//Here’s the CSS version:
var css = document.createElement('link');
css.href = 'mystyle.css';
css.rel = 'stylesheet';
- Tools for Performance Optimization