Howto: Speed up WordPress sites by using Amazon Cloudfront

Posted March 12, 2010 at 9:07 am by Niek Waarbroek in CDN, Cloud Computing, Content Delivery Network.

In my previous blog post I wrote on “Howto: Speeding up apps using a CDN“. In this post I will take it one step further and explain what I did to get the results mentioned below. I will end my post by providing some tips for WordPress users who want to use a content delivery network like Amazon Cloudfront.

Results

The results below are quite impressive. By simply moving static data to Amazon S3 and serving it via Amazon Cloudfront I was able to improve the content delivery significantly.

Results before and after using content delivery network

The results have been achieved by 5 simple steps:

• Create an Amazon Cloudfront account
• Create a S3 bucket
• Add DNS CNAME
• Move files to Amazon S3
• Change URLs in your application

Create an Amazon Cloudfront account

In our case we selected Amazon Cloudfront as our CDN-provider. The first step will be to create an Amazon Cloudfront account.

Create an Amazon S3 bucket

After you have created an account it is time to create a S3 bucket. There are some handy tools you can use like the Firefox plugin S3 Organizer. Open S3 Organizer (Tools -> S3 Organizer), add your account and create a folder.

Click on the icon

and a new window appears

Create a name for the bucket and choose whether to place it in Europe. Click on ‘OK’ and the bucket is created. Right-click the bucket and choose ‘Manage distributions’.

Create a distribution. Once the status shows ‘Deployed’ the bucket is available in Amazon Cloudfront and can be used.

Add DNS CNAME

Use the CDN-name you used during the creation of the distribution to create a CNAME in your DNS.

For example:

Move files to Amazon S3

Amazon Cloudfront is ready to receive your files. Select which files are static and can be served from Amazon Cloudfront. In most cases this will be images, javascripts, stylesheets, etc. Add these files to Amazon Cloudfront by using the S3 Organizer tool. When the files are uploaded you need to set the right privileges. See the window below.

Change URLs in your application

The last step is to change the URLs which are used for the images and static content. Just replace the links by following the Jitscale case (http://cdn1.jitscale.com), for example. When all static files have been moved and changed, the only requests on your own server are for dynamic content. For the Jitscale website, for example, there is only one request left.

Advantages and disadvantages

Using a content delivery network like Amazon Cloudfront can realize a huge performance boost. In the results mentioned earlier we can see some locations that are at least 6 times faster, which is quite impressive. But is a CDN always better? There is no standard answer to this question. When you have a lot of dynamic content it can be an disadvantage because you need to sync your static files every time and it can take some time before the static content is available on every edge.

Advantages using CDN 

• Performance boost
• Lower load on own web-farm
• Less bandwidth own web-farm

Disadvantages using CDN

• Control over files
• Deployments
• Costs

For a lot of web sites it will work great, but you have to remember that you don’t have much control over your static data anymore. The edges will update their files only when the expire header is expired. A quick update can’t be done anymore or you need to change the URL and serve the file from your web-farm. You can consider to only serve images from your theme like the header and so on. Only dynamic content will be served from your own web-farm.

Useful CDN-tips using WordPress

Many people use WordPress as their content management system these days, so here are some very useful CDN-tips:

W3 Total cache

A very important part is cache. We have chosen W3 Total Cache. Just install the plugin and install php-apc or memcache. Configure the plugin and your site uses caching.

OSSDL CDN off-linker

A very handy plugin is OSSDL CDN off-linker. It replaces all URLs for static files in a given URL. In our case that will be cdn1.jitscale.com. When you want to use this plugin it’s useful to use a sync script for all media files. The plugin does not check if a file is available on Amazon Cloudfront, for example. In our case we used some kind of script described on Mark’s blog. It’s a great script which even gzips content and adds custom headers.

These plugins make it a lot easier to implement a CDN in WordPress.