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:
- Amazon delivers your content real fast.
- 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).
Hello. Thanks for publishing this article. As a cloudfront newbie (that’s how I found this … google search), I just had a couple of questions regarding your article.
1- Do you recommend either WP Super Cache or W3 Total Cache as a WordPress plugin, or does that depend on your particular host? I’m with hostgator and just set up my CNAME records to cdn.occupyhln.org …
2- Is creating a bucket necessary? All of the literature I’ve read says to create the distribution and then hook up your caching plugin to Cloudfront. But you mention buckets. When I create a bucket, all I can do is upload files from my hard drive; I don’t see how W3 Total Cache connects … the only instruction in W3 Total Cache is to set up a distribution.
Thanks!
Hi Jason,
Thanks for finding my article 🙂
With regard to your questions:
1. I have a bias towards WP Super Cache (that’s what I use). But I can confirm that W3 Total Cache will also work here. So if you already have it installed, no need grabbing WP Super Cache.
2. This is a matter of terminology. Whether you are creating a “bucket” or a “distribution” depends on what AWS technologies you are using. If you are working with the “S3 plus cloudfront” method (Method 1 as discussed in this article), you will need to create both a bucket and a distribution. But if you are working with the “cloudfront only” option (Method 2 discussed in the second part of this article here: Speed Up WordPress With Amazon S3 And Cloudfront (Part 2)) you only need to create a distribution.
Buckets = Amazon S3
Distributions = Amazon Cloudfront
The reason why most of the articles you find only speak of creating a distribution is because, most people use the “cloudfront only” (also called “Origin Pull”) method.
Recommendation:
If you already have hosting like you do, and if your site is a dynamic site (with frequently changing content and/or database queries), use the “cloudfront only” method. It will save you cost and effort.
You can read about the pros and cons of both methods in this article (just before the discussion of the first method).
Wow, that really clears things up. My site is down at the moment (so much for Hostgator 99% uptime), but I was going to switch to WP Super Cache.
I don’t really care which plugin it is — I just want whichever one gives me faster page load times.
But thank you for explaining the difference etween buckets and distributions / Amazon S3 and Amazon Cloudfront, as well as the “origin pull” method … that’s what W3 Total Cache was asking for, and I didn’t know what that meant.
Thanks again!
This is a good direction that can been improved even more.
1. There is a plugin for WP that stores all your content in S3 natively from WP with no additional tools. I think it even has CloudFtont support built in. Look for S3 related plugins in the codex.
2. You should try this with Zend Server AMI on AWS Marketplace. You will get so many features , including performance improvement using caching and better development using Z-Ray that you won’t understand how did you work before that.
3. If you really need WP at scale, check my webinar at http://www.zend.com/en/webinars/recorded/show/2978_from+zero+to+cluster+in+15+minutes+building+scalable+php+apps+with+zend+and+amazon+web+services