Best practices for faster web pages

The following techniques are interpreted from the rules in Steve Souder’s book “High performance web sites” [wc] (O’reilly 2007), they suit the needs of my environment, YMMV.

The author provides examples of these web site performance techniques on the companion book site.

I divided the list into two groups, one for front-end developers and one for sysadmins since on most of my projects these are separate roles/people.

For the front-end developer

  • Learn/use telnet port 80, netcat, dig, IBM Page Detailer, Firebug, YSlow, JSLint.
  • CSS sprites for all (or strategically sliced subsets) nav icons and dingbats in optimized png format (ch. 1)
  • No meta cache-control or expires in html, we’ll use Apache conf for this (ch. 3)
  • If possible use PHP vars when constructing internal links to images, CSS, scripts etc. (So we can later rev the file names, split HTTP requests to pairs or CNAMES or use a CDN), (chs. 11, 9, 3, 2)
  • CSS always in one reduced, minifyied, obfuscated, externally linked file. [YUI Compressor] (chs. 5, 8, 10)
  • Scripts go at the bottom of the page in external linked filed, reduce to fewest number of eternal script file possible, minify and obfuscate (chs. 6, 8, 10, 12)
  • No CSS expressions (ch. 7)
  • Use image beacons and onload handler to track outbound traffic (ch. 11)
  • Track internal traffic using redirects with mod_rewrite (compromise, test to make sure it is worth the delay in you environment vs referrer log analysis)

Inferred from the book and past experience

  • Use symlinks or very short directory names and filenames (where revving isn’t likely) on common external resource (images, scripts, etc) to reduce the occurrence of stuff like http://i.cdn.turner.com/cnn/.element/img/2.0/Weather/go_btn.gif to http://i.cdn.turner.com/cnn/i/go.gif, or if your not using a CDN or image servers, why not use relative references like /i/go.gif. In this example you save 27 characters and 54 characters respectively—for each occurrence.
  • Use a favicon.ico, the browser is going to request it anyway and if its not there its just going to fill up your error log

For the sysadmin

  • Learn/use telnet port 80, netcat, dig, IBM Page Detailer, Firebug, YSlow, JSLint.
  • Implement gzip and mod_gzip_item_include. Consider mod_gzip_can_negotiate and mod_gzip_update_static for items that don’t change very much and can be cached in their compressed form on the server—saves CPU cycles. (Ch. 4)
  • Use vary: accept-encoding, user-agent (ch. 4)
  • Reduce the number of hostnames/DNS lookups required to compose your web pages. Use 2-4 hostnames per page at most. Maximize parallel downloads. Use keep-alive
  • Use DirectorySlash off or turn off AutoIndex to solve the missing trailing slash problem (ch. 11)
  • Know the trade-offs for using redirection for tracking internal and external links, memorize the HTTP response codes and know how they impact search ranking, fall in love with mod_rewrite if you must. (Ch. 11)
  • Configure ETags correctly (ch. 13), Don’t use the default settings (ch. 13)
  • Use a robots.txt even if it is just
    user-agent: *
    allow: /
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