The Best Way to Use TimThumb with a CDN (and Why Amazon S3 Is Not so Good)

Speeding up a websites loading time is so good for so many reasons, so it’s understandable that people want to use a CDN (Content Delivery Network) to serve their images, however in the case of TimThumb there’s a right way and a wrong way. Below I am going to explain how I use a CDN to speed up TimThumb on Binary Moon.

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.

Note that technically Amazon S3 is not a true CDN. S3 was designed for content storage. The correct Amazon service to use for content delivery is Amazon CloudFront.

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.

Here on Binary Moon I have set up a pull server to use cdn.binarymoon.co.uk. If the pull server sees a request to cdn.binarymoon.co.uk then it will check for a stored file, grab the content it needs and then store it for serving later. This means that you can happily make use of TimThumb AND of CDNs.

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.

All of the images on Binary Moon are served from a CDN. Currently I am 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.

Check out more articles on TimThumb here.