With just a bit of extra effort, you could get significant page speed improvements on your WordPress website by using Amazon’s Content Delivery Network (CDN). This is because Amazon has robust servers all over the world that can serve your content much faster than the single shared hosting server that your WordPress site is most likely installed on.

This post assumes that you have the latest version of WordPress installed (Version 3.6 as of this writing) and that you have also installed the WP Super Cache plugin.

How It Works

Amazon has fast servers around the world and for a fee, they are letting people use their infrastructure to serve up copies of their own files such as text, pictures etc. These files are stored on the Amazon Cloudfront servers. When someone visits your website the main part of your page (the bits that need to actually run php code and so on) come from your own server, but all the images and so on come from Amazon Cloudfront. This speeds up your site in two ways:

1. Amazon delivers your content real fast.
2. The demand on your own server is reduced making it faster as well.

There are two ways you can use Cloudfront:

• One way is to upload your WordPress files onto Amazon S3 and then get Cloudfront to retrieve your files from Amazon S3 as it needs them. This technique is explained further below.
• The other way to work with Cloudfront is to tell Cloudfront to get the files directly from your site as it needs them. This second method is popularly called “Origin Pull”. It is explained in my next post here.

Pros And Cons Of Both Methods

The advantage of the first method is that if you ever change your WordPress host, your entire wp-content folder is stored off-site at Amazon S3, so you won’t need to copy your wp-content folder to your new WordPress installation. You can even upload images directly to S3 and then insert them into your WordPress posts.

The advantage of the origin pull method is that it’s easier and cheaper (saves all costs associated with S3 since you won’t be using S3 at all), and you don’t need to upload (or sync) the files to Amazon each time you create a new post or each time a file changes.

Step 0:
In both cases, the first step is to register for an Amazon Web Services (AWS) account. If you already have an amazon.com account, you can link to it for payment. As of this writing, Amazon is offering a free usage tier to all first time subscribers to help new AWS customers get started in the cloud. The free usage tier can be used for anything you want to run in the cloud: launch new applications, test existing applications in the cloud, or simply gain hands-on experience with AWS. This offer has been ongoing for quite a while now and it gives you one whole year to play with AWS for free. You might want to check out the offer here.
Note: A valid credit card is required for registration.

Method 1: Sync Amazon S3 With Cloudfront

Step 1:
Go to the AWS Console and select S3. Press the “Create Bucket” button.

Step 2:
Add an appropriate name for your bucket. Bucket names must be unique across all of Amazon S3. Buckets are similar to Internet domain names. Just as Amazon is the only owner of the domain name Amazon.com, only one person or organization can own a bucket within Amazon S3. Once you create a uniquely named bucket in Amazon S3, you can organize and name the objects within the bucket in any way you like and the bucket will remain yours for as long as you like and as long as you have the Amazon S3 account. A good idea is to name the bucket using the domain name of the site it is for.

Step 3:
If your site was a static site, at this point, you could simply upload the site files to S3 and proceed from there. But since we’re dealing with a dynamic WordPress site in this tutorial, we need a way to sync your consantly changing files with your S3 bucket. Here is where the CDN Sync Tool comes in. Install and activate it.

Step 4:
Go here and grab your Access Key ID and Secret Access Key for AWS.

Step 5:
The settings for the CDN Sync Tool are pretty self explanatory. Enter the Access Key ID and Secret Access Key obtained in Step 4 above. Also enter the name of the S3 bucket you previously created. Save all your options and press the Sync button.

Step 6:
Go to your S3 bucket and confirm that all folders have been correctly populated. Go to wp-content and right click on the uploads folder. Click “Make Public” in the pop-up menu.

Step 7:
This isn’t absolutely necessary, but it is a good idea to create a CNAME record with your DNS service to route queries from your site to your distribution. This helps to maintain cleaner links in your page source. Most people use the sub domain of “cdn”. For example, if you view the page source on any page on this site, you will see http://cdn.ehikioya.com repeatedly. This appears instead of something like http://d3nt4jmz34ymkr.cloudfront.net

In this step, you decide if you will want to create a CNAME or not.

Step 8:
Now you create a distribution for your files in Amazon CloudFront. In the AWS Console, click the CloudFront tab and then click the “Create Distribution” button.

Delivery Method should be Download. Choose Amazon S3 Origin and choose the appropriate bucket in the dropdown. Click continue. If you plan to create a CNAME, enter the CNAME value you plan to create. Most other stuff can be left at their defaults. Click “Continue” and then “Create Distribution”.

Step 9:
Now you will need to go to your DNS service website and create the CNAME you selected in the previous step. The CNAME should point to the actual Cloudfront domain name.

Step 10:
The last step is to enable CDN Support in WP Super Cache. Go to the settings for WP Super Cache and click the CDN tab. Check the “Enable CDN Support” box. Enter the full URL of the CNAME you just created (like this: http://cdn.ehikioya.com). If you did not create a CNAME, then enter the ugly Cloudfront domain name (like this http://d3nt4jmz34ymkr.cloudfront.net).

If you synced some directories to your S3 bucket that are outside of wp-includes or wp-content, you should enter them in the “Include directories” field. Save the changes and you’re in business!

To test that everything works, view the page source of your website. You should see that your static resources like images are now being pulled from the Cloudfront server. The URL of these resources will now contain your Cloudfront domain name or your CNAME as the case may be.

Note: DNS resolution may take a few hours. So your new CNAME may not become active immediately.

To read about the “Origin Pull” method that uses Cloudfront only (no Amazon S3), view my next post: Speed Up WordPress With Amazon S3 And Cloudfront (Part 2).