Read MoreThe best VPS hosting starts from $5 per month!

Amazon CloudFront CDN In WordPress With W3 Total Cache

Amazon Cloudfront is one of the most popular and best Content delivery network (CDN) that is used by millions of websites. If you are completely newcomers in the industry of CDN, You my want to learn which CDN service is best suited for your website. You may also want to consider choosing a CDN service based on your Budget, Skill and your Website’s needs.

If you are using a large scale of Website which is powered by WordPress, You may want to optimize and enhance the performance of Your Website. If there is no CDN activated yet! on Your Website, Adding a CDN can do a lot, Even more than your expectation.

There are a few Content Delivery network available and Amazon Cloudfront is best among all for a large scale website. Amazon Cloudfront is used by some high profiled website and If you want to enable it for your own website, You can refer this guide to learn how to activate and configure Amazon Cloudfront in WordPress.

Here, While I am writing this Tutorial, I am also enabling Amazon Cloudfront for this blog. So this is a tutorial, That you can trust on and follow each steps carefully. Before you start proceeding, I’d like you to know that, There are many ways webmasters can enable CDN in WordPress. As well, I will also show you two methods of enabling Amazon CF in WordPress with W3 Total Cache.

Before we start enabling Amazon Clodfront on your WordPress, Make sure that you have an active Amazon web service account with Cloudfront access.

How To Activate Amazon Cloudfront In WordPress With W3 Total Cache

I’m going to use a 3rd party WordPress plugin called as W3 Total Cache. W3 Total Cache is an advance WordPress caching plugin, That I’ve discussed before. Nevertheless, When It comes to activating CDN service, W3 Total cache plugin is rock. It’s a free WordPress plugin, That you may already using on your WordPress right now!

Okay! The Very first step is installing W3 Total Cache on your WordPress. While You are technically enough to install any plugin to your WordPress, Please proceed next!

Once W3 Total Cache successfully Install on your WordPress, It’s time to configure it for caching. A few months ago, I have shared an article, Titled “How to properly configure W3 Total Cache“. Tough the article is little old, But still useful.

When you finished configuring W3TC for WordPress caching, Now Follow a method from below to activate Amazon Cloudfront in your WordPress Blog.

Notice this: Here I’ve show two different method to activate Amazon’s Cloudfront CDN in your WordPress. You must pick any one and Don’t try to use both unless you want your WordPress to be crashed.

Method 1: Allow W3 Total Cache To Access Your Amazon Cloudfront Service

This method is recommended by W3TC. By following this system, You are allowing W3TC to access your Amazon’s Clodfront Service. If you don’t want to give W3TC to access your Amazon CF account, You should try following the 2nd method instead this.

Step 1: Create A New User On Amazon Web Service

In order to allow W3 Total cache to access your Amazon’s Cloudfront CDN, You will have to create a new user on Amazon and Then Permit the user to access your Cloudfront service. To do that, Login to your AWS account and head over to Security Credential from the user menu at the top right.

Amazon AWS Security

Now create a User from “Users” menu at the left sidebar and then click on the “Create New Users” Button.

Create new user on AWS

Once you click on the Create New Users Button, AWS will ask you to put usernames. You may don’t want to create multiple users only for enabling Cloudfront on your WordPress.

I recommend you to create only one user instead of multiple, In fact there is no need to create more than one users.

Put a user name on the username field and make sure that “Generate an access key for each user” is enabled, And then click on the “Create” button.
Insert User Name

After that, Copy the user’s Security credentials.

AWS User Credential

You can also download the User’s security credentials to your computer by clicking on the “Download Credentials” button.

Now follow the step below to set the access level of the user.

Step 2: Allow The User to Access Cloudfront

Once the user is created, Now you need to allow the user to access your AWS’s Clodflare account. Follow the instructions below:

Go to the user section and you will see the user that you just created.
Amazon Web Service User

Now Click on the user and then click into “Attach User Policy” button.

After that, You will drop on a page that will ask you to select policy template. From the policy template section, Select Cloudfront Full Access and then hit on the apply policy button.
Cloudfront Full Access

You are almost done, Now all things are ready, Head over to your WordPress and start applying the AWS user credentials to W3 Total Cache.

Activating & Configuring Cloudfront With W3 Total Cache In WordPress

Login to your WordPress admin area and head over to W3 Total Cache General Settings.

W3 Total Cache General Settings

In the W3 Total Cache’s General Settings, Scroll down to the CDN section and follow the following settings:

  • CDN: Enable CDN
  • CDN Type:From the CDN type drop down menu, Choose Amazon Cloudfront Under Origin Pull/Mirror (recommended menu.

After that click on the Save all settings. After hitting on the Save all setting, A notification will appear like this:
W3 Total Cache CDN

Now Click on the “Specify it here” link from the notification.

After Clicking on Specify it here text, You will be redirected to the CDN configuration page, Where you will be asked to provide the AWS User’s Credentials to allow W3 Total cache to access Cloudfront service.

Here is the settings:

  • Access Key ID: Insert the access key ID that you have downloaded or copied from AWS User’s security credentials
  • Secret Key: Copy and Paste the Secret Key from AWS User’s Security Credentials.
  • Origin: Click on the “Create Distribution” Button to let W3 Total Cache create a Distribution network on Cloudfront using the User’s Security Credentials.
  • SSL Support: Leave this settings default to let W3TC decide the best
  • Replace site’s hostname with: Leave this default

After following the above configuration, Hit on the Save All Settings Button to enable and Apply Cloudfront to your WordPress. That’s All!

Manually Configure Cloudfront And Activate With W3 Total Cache In WordPress

This is the recommended method, Because, following the first method or allowing W3TC to access Cloudfront, Can increase your monthly bill by requesting purge on Cloudfront. As Amazon Cloudfront charges for cache purge.

By The way, If you want to use this method, That doesn’t allow W3TC to full access your cloudfront CDN service, Follow the instructions below:

Step 1: Create Distribution In Cloudfront

Head over to AWS’s Cloudfront CDN from AWS console home and Click on the “Create Distribution” Button.

Create CloudFront Distribution

After that, You will drop into a two step process. One is Select Delivery Network while another is Create distribution.

In first step, Cloudfront will ask you to choose delivery method and here you need to select “Web” method.
Cloudfront CDN Distribution

Now, In 2nd step, You will be asked a few different settings for your Cloudfront distribution. And Here is the instruction for configuring your cloudfront distribution properly:

Under the “origin settings”, Use the following:

  • Origin Domain Name: Use your domain name. For an example www.yourdomain.com
  • Origin ID: Use your domain name again.

Cloudfront Distribution settings

Leave other settings default and hit on the “Create Distribution” button.

Now click on the distribution you just created from the Distribution list to see the full domain name, As shown below:

Cloudfront domain name

Copy the domain name to your computer or notepad, Because you just finished first step and it’s time to configure W3 Total cache.

Step 2: Configure W3 Total Cache In Your WordPress

Login to your WordPress admin area and go to W3 Total Cache’s General setting from the performance tab.

After that, scroll down to the CDN section and enable CDN and choose Generic Mirror from the CDN type.
W3 Total Cache CDN Generic Mirror

And Then Hit on the “Save All Settings” button. Also make sure that, You’ve choose Generic Mirror from under “Origin Pull/Mirror (recommended)” Section.

Go to the CDN sub-menu from the Performance tab.
Go To CDN From Performance Tab

Now scroll down to the Configuration section and paste the Cloudfront’s Distribution domain in the “Replace site’s hostname with field. You may also want to confirm before saving by clicking on the “Test Mirror” Button.

Replace Site Host name

Finally! Click on the “Save all settings” Button and clear all cache, Tough, W3 Total Cache will remind you and you mustn’t ignore this time.

So, Now head over to webpage performance test service like Pingdom,GTMetrix or Google page speed insight to see your WordPress Performance after activating and configuring Amazon’s Cloudfront CDN.

Hope you find this tutorial useful and feel free to use the discussion box below to share your opinion and questions.

3 Comments

Leave a Reply