William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Web Site Optimization

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. 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.
  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
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: