Monday, January 31, 2011

Book Notes: High Performance Web Sites

In his 137-page book High Performance Web Sites: Essential Knowledge for Front-End Engineers, Steve Souders (who works at Google on web performance) presents 14 web site optimization rules supported by examples and code snippets.

Rule 1: Make Fewer HTTP Requests

  • Use CSS Sprites (or the less flexible image maps).
  • Use the data: URL scheme (usually for inlining images but applicable anywhere a URL is specified, including the SCRIPT tag.)
  • Merge JavaScript; merge CSS files. Use a build system to do it automatically.

Rule 2: Use a Content Delivery Network

Use CDN to host static content.
  • Pros: improved response time, backup service, high storage capacity, better caching, resilient to traffic spikes.
  • Cons: affected by other CDN clients, indirect control of content servers, subject to the performance of CDN.

Rule 3: Add an Expires Header

  • Set a far future Expires HTTP header.
    (e.g. Expires: Tue, 19 Jan 2037 00:00:00 GMT)
  • Set a Cache-Control header.
    (e.g. Cache-Control: max-age=315360000)
  • Change links when resources change. Embed file revision number or fingerprint in the URL to bust the browser cache.

Rule 4: Gzip Components

  • Turn on gzip for highly compressible content such as HTML, JavaScript, and CSS.
  • Use mod_gzip for Apache 1.3 and mod_deflate for Apache 2.x.

Rule 5: Put Stylesheets at the Top

  • Put CSS in the document HEAD using the LINK tag.
    (e.g. <link rel="stylesheet" href="style.css"/>)

Rule 6: Put Scripts at the Bottom

  • Put SCRIPTs to the bottom of the page so that they don't block rendering and parallel downloads of other resources.

Rule 7: Avoid CSS Expressions

  • CSS expressions are generally slow and dangerous. (They are also deprecated in IE8.) Do not use them.

Rule 8: Make JavaScript and CSS External

  • Put large, reusable JavaScript and CSS in external files.

Rule 9: Reduce DNS Lookups

  • Reuse connections by setting Connection: Keep-Alive in the header.
  • Use fewer domains to reduce DNS lookups.

Rule 10: Minify JavaScript

Rule 11: Avoid Redirects

  • Avoid redirecting URL just because it's missing a trailing slash.
  • Not mentioned in the book, but it's better to serve both desktop and mobile versions of a page from the same URL.

Rule 12: Remove Duplicate Scripts

  • Make sure scripts are included only once.

Rule 13: Configure ETags

  • Either turn off ETags or generate ETags that uniquely identify a specific version of a resource. The default ETag formats of popular web servers are not cache-friendly.

Rule 14: Make Ajax Cacheable

  • Make Ajax response cacheable by following rule 3, 4, 9, 10, 11, 13.

High Performance Web Sites is short and easily digestible. It's a pertinent book on speed optimization for web developers, although professional web frontend engineers may find it short of original ideas they are not already aware of.

No comments:

Post a Comment