Easily set up your AWS Cloudfront distribution with no manual configuration using W3 Total Cache plugin in WordPress.

Speed is really the lifeblood of any site. Even a few seconds of delay in loading takes away a large percentage of visitors already. This is why cache plugins are really popular in WordPress as it makes caching easy. But one of the dramatic ways you can speed up your site is by pairing your cache plugin with an actual content delivery network (CDN).

A content delivery network basically sets up a presence that hosts a copy of your website near your visitor. Since the copy is near to the visitor, the speed is increased dramatically. This is automatic, as CDNs usually have a presence on all continents and in a lot of countries.

Some CDNs are free but have certain caveats included. An example is Cloudflare — it has a free tier, but it takes away your flexibility in the process. You cannot control certain aspects of it, unlike if you build your own. Sometimes it doesn’t even act like a CDN. I chose Amazon CloudFront for this mini-project as it’s simple to set up, and you can tweak certain settings you need to, without actually setting it up from scratch.

I chose the W3 Total Cache plugin for this because they have the easiest process of setting up a CDN distribution for your site. Other cache plugins are a bit more tedious to set up, and for most purposes, a CDN distribution can be enough to speed up your site, without even fiddling with any of the other cache settings.

The prerequisites before starting this are:

  1. You’ve already set up a WordPress site and installed the W3 Total Cache plugin.
  2. You have an existing AWS account.

The main steps for this mini-project are:

  1. Setting up AWS CloudFront
  2. Configuring W3 Total Cache in WordPress

Let’s start!

Setting up AWS CloudFront

When setting up any AWS service, it is preferable to limit the roles and privileges you provide to the third-party service you are using. IAM stands for “Identity Access Management” and when creating an IAM user using this function, you can control which services that user can access. This is in contrast with a “root user” where the privileges are akin to an administrator.

Creating an IAM user for CloudFront

Let’s first create an IAM user that is limited to managing a CloudFront instance.

  1. Log into your AWS console using root user credentials.
  2. Access your IAM service and click on “Users”. From the Users list, click on “Add Users”.
  3. Add the username. Then under “Set Permissions”, you can either click on “Attach policies directly” if you are planning to have single-user permission only, or “Add user to group” if you are planning to have group-based permission. If you don’t have a group, you can create one on the same page.
  4. Whichever you choose, you will be able to see the different permissions policies you can endow your user or group. Search for “cloudfront” and pick “CloudfrontFullAccess”.
  5. Under review and create, verify your selection and confirm by selecting “Create user”.

Creating an Access Key for the IAM user

After creating the IAM user, the next step is to generate an access key for use in our W3 Total Cache plugin.

  1. From the IAM service console, click on your newly created user.
  2. Click on the “Security Credentials” tab to be able to see the different options you have to create and manage keys. Under “Access Keys”, click on “Create access key.”
  3. On the “Access key best practices & alternatives” page, click on the “Third-party service”. A warning will show something about using an IAM access role instead, unfortunately, W3 Total Cache does not use this method.
  4. Your access key will be created, and you should copy your key and secret temporarily somewhere as this is a one-time thing. If you forget the key or the secret, you will need to generate a new one from the start.

Configuring W3 Total Cache in WordPress

Lastly, we need to set up the W3 Total Cache plugin to create the CDN from CloudFront. I’ve seen some how-to’s that create the distribution from the CloudFront side, and map it manually to the cache plugin. But this way is simpler as the heavy lifting is done by the plugin itself. You just need to plug and play.

  1. Log into your WordPress admin page and go to your W3 Total Cache settings page.
  2. Under the CDN section of the General Settings, enable the CDN and choose “CloudFront” as your CDN Type.
  3. Go to the CDN settings and under the Configuration: Objects section, input the access key and the secret you generated from the AWS IAM console.
  4. Click on “Create Distribution” and it should trigger a new distribution on the AWS CloudFront side. You can verify by going to your AWS CloudFront console. Take note that this can take 15min or so to complete.
  5. Once the distribution is created, you can go back to your CDN settings and click on the “Test CloudFront distribution” button. If it passes, you’ve just created your CDN distribution successfully. If the distribution isn’t completed yet, it will result in failure.
If the distribution is not up yet, it will result in error
Otherwise, it will pass

Optional: Adding CNAME to Replace the Distribution Hostname

As an optional step, you can prettify your distribution domain by adding a CNAME (or an alias) to it. An example is instead of “xxx.cloudfront.net” you can change it to “cdn.yourdomain.com”. The main purpose of this is to make it easier to remember if you want to tinker with it more or use it with another plugin.

If you want to add a CNAME, you need to go to your DNS provider and map the hostname of the distribution to the CNAME you decided. Here is an example I used for Namecheap:

After setting this up, you can add “cdn.<domainname.suffix>” to your CNAME setting in W3 Total Cache.

FAQs

How much does it cost to use a CloudFront distribution?

One good thing about AWS is its free tier. You get 1 TB of data transfer per month before you get billed. If you have a small site, 1 TB is plenty. Otherwise, you can refer to their pricing guide.

How can I test that my CloudFront distribution is working?

You will able to see the usage metrics from the AWS CloudFront console for your particular distribution. An alternative is you can visit your distribution domain link (i.e., “xxx.cloudfront.net”), and you should able to see your site. You can also use speed test sites like GTMetrix.

Do I need to set up an SSL certificate for my distribution link?

No need, as the link is already in HTTPS. Because of this, any CNAME assigned to the link will also by association be in HTTPS already.

Summary

I talked about how to set up your CloudFront distribution using the W3 Total Cache plugin in WordPress without manually creating the distribution itself. You only need to set up the IAM privileges so that the plugin can do the creation for you.