Howto: Speed up WordPress sites by using Amazon Cloudfront
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.
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.
Move files to Amazon S3
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
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.