December 7, 2010

Optimizing website performance can dramatically increase conversions and
loyalty, and decrease costs. Although it may be traditionally viewed as a
responsibility of developers, the reality is that sysadmins are also often
asked to work on website performance optimization.

The following is intended as a busy sysadmin's "crash course" in optimizing
website performance.

As with trying to optimize any process, you should establish a baseline to
measure any changes against. Install the Firebug
Firefox plugin and Yahoo!'s YSlow add-on
to measure your initial performance and verify improvements as you make
changes. To see performance changes over time from a consistent external
source, you can use free tools like Pingdom's Full Page
Test or Octagate's
SiteTimer. Also, Google's
Webmaster Tools shows optimization
suggestions based on the Page Speed
tool, and crawl stats for the average time spent downloading a page from your
site.

Yahoo!'s
research
shown in the table below shows 62-95% of the time required to load a page is
spent making HTTP requests for non-HTML components like images, scripts, and
stylesheets. See the following table for the time spent loading HTML vs
non-HTML components for popular websites:

Site

Time Retrieving HTML

Time Elsewhere

Yahoo!

10%

90%

Google

25%

75%

MySpace

9%

91%

MSN

5%

95%

eBay

5%

95%

Amazon

38%

62%

YouTube

9%

91%

CNN

15%

85%

As the table indicates, reducing the number of HTTP requests can provide one
of the biggest increases in performance. Aggregating CSS and JavaScript into as
few files as possible and using CSS
Sprites are two ways to reduce the number
of HTTP requests.

In addition to reducing the number of HTTP requests, being able to load
scripts in parallel instead of serially can improve performance. A newly
developed tool called Head JS can be used to load
JavaScript scripts in parallel, while retaining execution order. This allows
scripts to load without blocking other components from loading.

Most sites include static files that change infrequently (CSS, images,
JavaScript, etc) and can benefit from appropriate HTTP caching. See the
Google's Page Speed team's guide to HTTP caching for more information.

Another important step in website performance optimization is configuring your
web or application server to deliver gzip compressed content. On typical
sites, gzipping
content reduces text size by 75% and total size by 37%.

In addition to gzip compression, making images, scripts, and CSS files smaller
also helps - especially when loading a site on lower bandwidth connections
like mobile devices. Even if you gzip scripts or CSS files, you can "minify"
them to further reduce their size by 5% or more. Yahoo!'s YUI
Compressor
can minify both CSS and JavaScript, while Yahoo's
Smush.it can optimize image sizes without losing
quality.

Although there are many other things you can do to optimize website
performance, this "crash course" in optimization should get you started.