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.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive website improvement tips and tutorials.

 

We'll periodically send useful information, tips & tutorials to improve your website performance, conversion optimization, SEO and design tweaks to make your website better.

Thank you for signing up!

Please check your email and click the link provided to confirm your subscription.

Powered by Rapidology
20 Comments
  • Liv
    June 18, 2017 at 7:13 pm

    Hey man great tutorial. What about https websites, can’t all settings be changed to SSL?

    • Andrew Yancy
      June 18, 2017 at 7:15 pm

      Yes, it can be changed to SSL. It’s standard options for big cdn companies such as cloudflare, akamai, amazon and so on.

  • Ayush Gupta
    June 18, 2017 at 7:16 pm

    I’ve setup the exact same way but still the theme files are not uploaded in S3. My bucket is still empty. Am I missing anything?

  • Hussain
    June 25, 2017 at 5:48 am

    My WordPress CSS was broken and my loading time faster than before. 380ms. But CSS was crashed, what should I do..? I need your help now.

  • Zlatko
    July 4, 2017 at 9:33 am

    Hey guys, great tutorial. Very intuitive to get Cloudfront’s CDN up and running. However, it has some strange behavior: 1) a few gzip files gave me “Uncaught SyntaxError: Invalid or unexpected token”. I had to manually delete them and turn the compression off. 2) for several css I got “Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream”. In metadata I changed type to text/css. However, the same warning is showing up again, although in S3 the validation metadata is there. As a result, my web page does not look great.
    When turning the ssl off and reading just from my host server everything is good.

    I also disabled JS and CSS minify in W3 Total Cache as suggested by Abu. Not looking great …..

    Any advice?

    The link to the web page is https://www.dianurse.com

  • Zlatko
    July 4, 2017 at 9:52 am

    What bothers me even more is that when I test from different locations:
    1) I get the correct look and feel when test is conducted through http://www.locabrowser.com
    2) I get the corrupted look and feel when using https://www.geoscreenshot.com/
    On my browsers it is also corrupted.

    Any hint on why is this behavior?

    Thank you!

  • Zlatko
    July 4, 2017 at 6:46 pm

    Thanks Abu for coming back to my post. I thought it might be a DNS latency, but I was not sure. Now, the site that I shared is working because I turned CDN off. However, to continue experiments, I created a mirror at https://test.dianurse.com with CDN on. This one is also working. This should confirm that it has been an issue due to DNS latencies.

  • Zlatko
    July 4, 2017 at 6:47 pm

    By the way, what should be a good content security policy when CDN is present?

  • Zlatko
    July 4, 2017 at 7:20 pm

    Not sure what is going on, but the CDN based webpage is not working again … Debugging with Chrome, I got again “Uncaught SyntaxError: Invalid or unexpected token” for the very same gzip files – see my previous comment.

    Do you have any idea why is this? Bear in mind compression is off on my AWS distro.

  • Zlatko
    July 4, 2017 at 8:26 pm

    Still and issue:
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (jquery.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (jquery-migrate.min.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (jquery.crellyslider.min.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (scripts.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (core.min.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (scripts.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (main.min.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (skip-link-focus-fix.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (wp-embed.min.js.gzip:1)
    [Error] SyntaxError: Invalid character ‘\u0031’
    (anonymous function) (styling-25.min.js.gzip:1)

  • Zlatko
    July 4, 2017 at 9:22 pm

    Thx for being patient with me. I ran the following two commands, but without any success.

    aws s3 cp s3:/// s3:/// \
    –exclude “*” \
    –include *.js.gzip –recursive \
    –metadata-directive REPLACE –expires 2100-01-01T00:00:00Z \
    –acl public-read –content-encoding “gzip” –content-type “application/javascript” \
    –cache-control max-age=31536000,public

    aws s3 cp s3:/// s3:/// \
    –exclude “*” \
    –include *.css.gzip –recursive \
    –metadata-directive REPLACE –expires 2100-01-01T00:00:00Z \
    –acl public-read –content-encoding “gzip” –content-type “application/css” \
    –cache-control max-age=31536000,public

  • Zlatko
    July 4, 2017 at 9:47 pm

    It looks like it is properly running now … Are you going to recommend any good values for max age and expire depending on the type of resource?

  • Zlatko
    July 5, 2017 at 12:31 pm

    Hey Abu, could you pls help? After getting this done, it is not working again and I cannot figure the root cause out. Meta data seem to be OK. While doing tests with http://webpagetest.org/ I noticed that only one css file was downloaded. At the same time, I am able to download from web browser the missing css – so it should be a permission problem.

    Any hint?

    The test page is https://test.dianurse.com

Post a Comment