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.

Friday, January 28, 2011

WordGap AdWords experiment

Over the last seven days, I ran a shoestring-budget ad campaign for WordGap to get a feel of AdWords. I set a daily budget of $3, targeting at North American users across all networks and devices; twenty six search keywords related to Scrabble and anagrams were chosen, each with a default bid of $0.25.

During the one week ad campaign, 154 clicks were logged by AdWords as opposed to 283 clicks reported by Google Analytics and 285 by Google AppEngine. I can't really tell if this is normal, but the discrepancy may be explained by AdWords's removal of click spams or accidental clicks.

As you can see in the following screenshot, search ads are about an order of magnitude more effective than display ads in terms of clickthrough rate (CTR). Their average cost per click, however, turn out to be curiously close.

Now that the ad campaign has ended, I'm going to monitor the number of returning visitors for a while before running more experiments.