Using a CDN to Speed Up Your Website

By admin, March 11th, 2010

Speeding up your website with a CDN is easier than you think using SimpleCDN.

What’s a CDN

CDN stands for Content Delivery Network. CDNs come in many forms, but the basic ideas is they will host your non-dynamic content (images, js, css) on an array of servers all over the world that are optimized for delivering it fast.

Benefits of Using a CDN

CDNs allow for both for greater performance (as your content is closer to the audience) and greater redundancy (your content is now in multiple locations and not dependent on a single server somewhere).

As well, many CDNs will optimize your content for caching and peformance (far expire, etag, gzip, etc).

Costs

Using a CDN used to be an expensive proposition. Recently though, it has become much easier and cost effective. The latest trend is a pay-per-use model. This usually results in upload, storage, and download fees (similar to how Amazon charges for S3). Becuase CDNs are generally used for bandwidth intensive operations live video-streaming, costs are actually quite cheap when you’re just distributing images, CSS and JavaScript.

Getting Started

There are many options when it comes to CDNs, but once of the simplest I’ve found is SimpleCDN. Getting started is quite easy:

  1. Sign up. Do that here.
  2. Create a “Bucket”
  3. Load your content

Create a “Bucket”

Next you’ll need to load your content. SimpleCDN offers a number of ways to do that, but using a Mirror Bucket is probably the easiest.

After you’ve created a Mirror Bucket, you just replace your host name with a special one provided by SimpleCDN and they will automatically pull your content as requests come in. Super easy.

The Nuts & Bolts

Anyone who has played with YSlow from Yahoo knows tweaking your http headers can create big performance boosts. Here are a few to point out:

  • Add an Expires Header – Adding an expire header makes the files on your website cacheable. The farther into the future you make it, the less often your browser needs to check for new versions.
  • Gzip components – Most web servers can compress content before sending it to your visitor’s browser. This obviously reduces the amount of data sent and thus makes it a faster download. The main drawback is it requires more processing on both the server and by your browser. As well, it doesn’t really make any difference to binary type files like images
  • Configure ETags – ETags are a way to uniquely identify content in your browser’s cache.

How SimpleCDN Works

Now that we have that out of the way, lets look at what SimpleCDN does. Once you’ve created your bucket, SimpleCDN will give you a list of special URLs you can now use when linking to your assets. Each is optimized for different types of content. For example, if you have a text based file (like a JavaScript library) that doesn’t change very often you’ll probably want something like Special HTTP 1 below. This will distribute it across the CDN, gzip it to minimize the file size, and mark it to expire in 7 days. Images on the other hand, you probably don’t want to gzip, but have a much longer expire time.

Many of these option are normally difficult or impossible to configure on run-of-the-mill hosting packages.

Other Features

Now you’re probably like “… this is a great idea, but I don’t like those ugly urls …”. Well, there’s a solution for that as well. Simply add a CNAME record that maps to your CDN address:

cdn.cowfacts.com CNAME cdn.cowfacts.com.simplecdn.net

You’ll probably need to do this for each different CDN url you’re using so it may end up something like:

images.cowfacts.com CNAME cdn.cowfacts.com.simplecdn.net
assets.cowfacts.com CNAME cdn.cowfacts.com-gz.simplecdn.net
video.cowfacts.com CNAME cdn.cowfacts.com-s3.simplecdn.net

You can follow whatever scheme makes sense including just doing a www1, www2, etc.

Caveats

One last thing, any external scripts you’re running (in particular, ads) can really undo a lot of good you do here. Following these steps, I boosted my YSlow score from low 60s to 81. After adding a JS include for an ad script, I dropped back down to the low 60s.

Category Icon Posted in Advanced Topics

Discover and Share

  • StumbleUpon
  • Digg
  • del.icio.us
  • Technorati
  • Reddit
  • RSS Feed
  •