• View
• Edit
• History
• Print

Website Performance and Optimization

A Web Design Lecture by Steven Choy

Overview: Make Fewer HTTP Requests - Use a Content Delivery Network (CDN) - Add Expires or Cache-Control Header - Gzip Components - Put Stylesheets at the Top - Put Scripts at Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Minify JavaScript and CSS - Avoid Redirects - Remove Duplicate Scripts - Flush the Buffer Early - Reduce the Number of DOM Elements - Split Components Across Domains - Reduce Cookie Size - Use Cookie-free Domains for Components - Choose <link> over @import - Optimize Images - Don't Scale Images in HTML - Avoid Empty Image src

Make Fewer HTTP Requests

• Combine all scripts into a single script
• Combine all CSS into a single stylesheet

• Combine background images into a single image with the CSS Sprites technique

• CSS Sprite Demo: SpriteMe, CSS Image Sprites: How to Create CSS Sprites for Blog Icons, Web Site Icons
• CSS Explained: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprite Online tool: CSS Sprite Generator

Use a Content Delivery Network (CDN)

Add Expires or Cache-Control Header

• For static components: implement "Never expire" policy by setting far future Expires header
• For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests

Gzip Components

• Web browsers indicate support for compression with the Accept-Encoding header in the HTTP request.

      Accept-Encoding: gzip, deflate

• If the web server sees this header in the request, it should compress the response.
• The web server notifies the web client of this via the Content-Encoding header in the response.

      Content-Encoding: gzip

Put Stylesheets at the Top

• The HTML specification states that stylesheets are to be included in the HEAD of the page.
• Moving stylesheets to the document HEAD makes web pages appear to be loading faster.
• Putting stylesheets in the HEAD allows the page to render progressively.

Put Scripts at Bottom

• Browsers can download multiple components in parallel.
• However, while a script is downloading, the browser won't start any other downloads. (i.e. scripts block parallel downloads.)
• In some situations, scripts cannot be move to the bottom.
• However, if a script can be deferred, you should move them to the bottom of the page. That will make your web pages load faster.

Avoid CSS Expressions

• CSS expressions allow you to set a CSS property not to a constant, but to the result of a JavaScript expression.

       background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Make JavaScript and CSS External

• JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested.
• Disadvantage: it increases the size of the HTML document.
• Advantage: this reduces the number of HTTP requess that are needed.
• However, remember that the JavaScript and CSS that are in external files will be cached by the browser, so the size of the HTML document is reduced without increasing the number of HTTP requests.

Minify JavaScript and CSS

• Remove unnecessary characters from code to reduce its size. This in turn improves load times.
• Minify JavaScript: JSMin, YUI Compressor, minify
• Minify CSS: minify, YUI Compressor, Clean CSS

Avoid Redirects

• Redirects are accomplished using HTTP response codes 301 and 302 and HTTP headers.
• Example:

      HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html

• Inserting a redirect between the user and the HTML document slow down the user experience.

Remove Duplicate Scripts

• Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

Flush the Buffer Early

• Make the server-side program able to send partially ready HTML code to the browser so that the browser can start fetching components while the backend program is busy with the rest of the HTML page.
• In PHP you have the function flush().

Reduce the Number of DOM Elements

Split Components Across Domains

Reduce Cookie Size

• Eliminate unnecessary cookies
• Keep cookie sizes as low as possible to minimize the impact on the user response time
• Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
• Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

Use Cookie-free Domains for Components

Optimize Images

• Use the most appropriate format for your web graphics and photos.
• Use image optimization programs to further reducing the file sizes of images.

Don't Scale Images in HTML

• Don't use a bigger image than you need just because you can set the width and height in HTML.

Avoid Empty Image src

• Avoid to use <img src="">.
• Browser makes another request to your server.
  • Internet Explorer makes a request to the directory in which the page is located.
  • Firefox, Safari and Chrome make a request to the actual page itself. (Firefox version 3.5 addressed this issue and no longer sends a request.)

Summary

1) Optimize caching

• 1. Leverage browser caching
• 2. Leverage proxy caching

2) Minimize round-trip times

• 1. Minimize DNS lookups
• 2. Minimize redirects
• 3. Avoid bad requests
• 4. Combine external JavaScript
• 5. Combine external CSS
• 6. Optimize the order of styles and scripts
• 7. Parallelize downloads across hostnames

3) Minimize request overhead

• 1. Minimize request size
• 2. Serve static content from a cookieless domain

4) Minimize payload size

• 1. Enable compression
• 2. Remove unused CSS
• 3. Minify JavaScript
• 4. Minify CSS
• 5. Minify HTML
• 6. Defer loading of JavaScript
• 7. Optimize images
• 8. Serve scaled images
• 9. Serve resources from a consistent URL

5) Optimize browser rendering

• 1. Use efficient CSS selectors
• 2. Avoid CSS expressions
• 3. Put CSS in the document head
• 4. Specify image dimensions
• 5. Specify a character set early

References and Resources

• Best Practices for Speeding Up Your Web Site - Yahoo! Developer Network
• Web Performance Best Practices
• High Performance Web Sites
• Improve your web site performance – tips & tricks to get a good YSlow rating

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.