Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
WordPress and Games
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.
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.
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:
The second time the image is requested the following things happen:
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?
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.
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.
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.