Content Delivery Network(CDN) and TimThumb


Content Delivery Network?

A CDN or Content Delivery Network, is a method for serving website content. Your content (generally static files such as images, CSS and javascript) get uploaded to the CDN, and it then gets distributed to other servers on the network that are spread all around the world. Then, when a user tries to access a file, the CDN picks the server nearest to the user. This means that the content has less far to travel so the data will arrive in a nice timely fashion. In addition, since CDN’s serve static content, they are optimized for static files, which makes the process quicker still.

TimThumb and CDN’s

The problems start when you combine TimThumb with a CDN. The most common scenario is that a file is included in a TimThumb url as such (I am using an image I have on Amazon S3 as an example).

../timthumb.php?src=http://binaryjoy.s3.amazonaws.com/webgames/drift-runners/_thumb_100x100.png

On the face of it this looks like it will work great, the image is hosted on Amazon and is being resized by TimThumb. Look closer and it’s not so good. The first time the image is requested the things happen in the following order:

  1. TimThumb loads on your server
  2. TimThumb requests the file from the CDN
  3. TimThumb caches the external file on your server
  4. TimThumb resizes the image
  5. TmThumb saves the cached image on your server

The second time the image is requested the following things happen:

  1. TimThumb loads on your server
  2. TimThumb loads the cached file from your server

Once the file is cached it is served entirely from your server and the CDN is bypassed, making it redundant. So how do we fix this?

TimThumb CDN, a solution

The first thing we need to do is look a little closer at how CDN’s work.

There are 2 ways of getting content onto a CDN. In the case of Amazon S3 (which as mentioned above isn’t a true CDN) you have to upload the files to the server manually. This is called a push server, since you are pushing the content on to the CDN. The second type of server is a pull server. In this case the server waits for a request for some content and, if it doesn’t have it already, pulls it from the original website and then stores it on the CDN.

We want to use a pull server.

The advantage with the pull server is that it doesn’t (always) need to know what the content it is storing is going to be. For instance with TimThumb the server can access the dynamic cropped url, see there is an image, and then store that image.

W3 Total Cache

The easiest way I have found to move your images onto a pull server is using W3 Total Cache. Below is how I configured W3 Total Cache so that it would work with TimThumb.

  1. Download, install and enable the W3 Total Cache Plugin
  2. On the plugins General Settings page scroll down to ‘Content Delivery Network’ settings and then select from the Origin Pull section, either Mirror, or Mirror: NetDNA/ MaxCDN, then hit save.
  3. Go to the Content Delivery Network Settings page, scroll down to the Advanced Settings section, and then add *timthumb.php to the Theme file types to upload: field, and hit save.

A full W3 Total Cache Tutorial would take a lot longer, there’s loads of settings in there, but this should help get you started on the road to creating a site that caches your TimThumb images.

You can using http://wpcdn.com. For personal usage their prices are very reasonable (less than $10 a month). If you search around you will find there are actually quite a few cdn’s targeted towards bloggers but they have served me pretty well so far.

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