How to setup a CDN in WordPress using W3 Total Cache & Amazon CloudFront

If you want to find out how to setup a CDN in WordPress, you’re at the right place!

I’ve been experimenting with CDNs (Content Delivery Networks) in WordPress over the last couple of months on a few different WordPress powered blogs and websites to test the increase in page speed and site load times for website optimisation purposes.

There has been news circulating around the social networks that indicates that there has been a large increase in active sites using CloudFront, which according to this blog post is now in excess of 20,000 active CloudFront customers.

I recently wrote a blog post on how to setup Cloudflare in WordPress to speed up your website, so I created this guide on setting up a CDN in WordPress using Amazon CloudFront and the W3 Total Cache plugin for anyone that is interested in finding out how.

How to setup a CDN in WordPress using Amazon CloudFront and W3 Total Cache

Here’s a quick guide on how you can setup and use a CDN for your WordPress powered website or blog using Amazon CloudFront and the W3 Total Cache plugin.

Step 1: Register for CloudFront via Amazon Web Services (AWS)

Go to the Amazon Web Services website.

If you don’t have an Amazon.com account, you’ll have to sign up for one first. If you already have an account, use your Amazon.com credentials to create an Amazon Web Services (AWS) account.

Create a new account or login to Amazon Web Services

In order to use AWS, you will have to provide valid credit card details when creating your account. Pay only for the data transfer and requests that you actually use. Amazon CloudFront passes on the benefits of Amazon’s scale to you. You pay only for the content that you deliver through the network, without minimum commitments or up-front fees.

Amazon Web Services - Setup your payment information

Pay only for what you use! There is no minimum fee. Estimate your monthly bill using the AWS Simple Monthly Calculator. For a rough idea as to pricing, see the table below:

Amazon CloudFront Pricing Structure

In order to complete the Amazon Web Services sign up process, you’ll have to verify your identity with a telephone number.

It’s 3 easy steps: provide a telephone number, you’ll be called back (and asked for a code that has been sent to you) and then – once verified – you can review your account details to proceed.

Setting up Amazon Cloud Front - Identity Verification

Your account activation process will then begin activating your settings so that you can begin using Amazon CloudFront.

Setting up Amazon CloudFront - Activating your account

You’ll be notified via email once the verification is complete, and then once verified, you’ll have access to your Amazon Web Services account’s dashboard. Click on “Amazon CloudFront”.

How to setup Amazon Web Services - Amazon Web Services Dashboard

You’ll be taken to your AWS Management Console for Amazon CloudFront fro which you can manage your distributions.

Setup a CDN in WordPress using Amazon Cloudfront & W3 Total cache plugin

NOTE: Before you go any further in Amazon CloudFront, you’ll need a CNAME record setup on your domain hosting account. I recommend that you you set this up prior to creating your CDN distribution in Amazon CloudFront, as you’re going to need your CNAME record details to setup the service. Some of my domains run on a cPanel based admin interface so if you need to learn how to, read my short blog post on how to setup a CNAME record in cPanel.

Click on “Create distribution”.

You will be asked what type of delivery method you’ll be using (e.g. Download) as well as the origin domain name (i.e. yourdomainname.com) and the sub-domain you’ll have your CDN running on, etc.

Create a new distribution in Amazon Web Services CloudFront

Once you’ve done that, you’ll be taken back to the dashboard and you will notice a new domain name created for your distribution – it will look like xxxxxxxxxxxxxx.cloudfront.net – which is the address you’ll be using when creating your CNAME record in cPanel.

Your dashboard will then display your distribution ID, status, domain name and other information you’ll require when setting up Amazon Cloudfront as a CDN in WordPress.

Amazon Web Services CloudFront settings

Step 2: Configure W3 Total Cache to use Amazon CloudFront as a CDN

Go to the “Performance” menu item – only displayed if you have installed the W3 Total Cache plugin and are running version 3.3 – in your WordPress installation to expand the visible options.

From here you’ll be able to setup and configure your new Amazon CloudFront distribution’s details.

In the “Configuration” section, input details of Amazon CloudFront distributions access key ID, secret key, cloudfront.net domain name, CDN and origin server.

Configure Amazon CloudFlare in W3 Total Cache for WordPress

You’ll also be able to specify which file types get hosted on your CDN – in this specific case I have opted to serve all resources (i.e. attachments, includes, theme files, minified CSS and javascript files) via my new CloudFront CDN.

Other optional settings include not replacing URL’s for logged in administrators, setting he cookie domain to your origin domain as well as a section where you can specify which file types to import.

Once you’re done, click on the “Save all settings” button and then purge the W3TC plugin cache. If you have successfully configured your Amazon CloudFront CDN, you’ll be able to see so at the top of your CDN settings page in W3 Total Cache.

That’s it! You’ve now successfully setup a CDN in WordPress using Amazon CloudFront and the W3 Total Cache plugin.

Has setting up your CDN improved your WordPress powered websites page speed?

You can find this out by enabling the Google Page Speed API in the “General Settings” of W3 Total Cache.

NOTE: If you don’t have a Google Page Speed API key, you can get on on the API’s console.

Google Page Speed API

If you have specified and enabled W3 Total Cache to use the Google Page Speed API, you’ll be able to measure your page speed rating which can be displayed  on your WordPress dashboard.

Google Page Speed Report in WordPress

For this specific site installing Amazon CloudFront as a CDN boosted the test domains page speed report score by 4 points – from 88 to 92 points. A 4 point increase is not bad as far as I’m concerned

NOTE: By no means will CloudFront exclusively be able to improve your page speed report as the results will depend on what theme you’re using, your hosting provider, hosting setup, resources you use on your domain and several other factors. The Google Page Speed report in WordPress will allow you to identify and fix the elements which slow your site down.

The following two tabs change content below.

Pedro Da Silva

Online Marketing Junkie

My name is Pedro Da Silva. I have built-up a wide range of digital marketing skills over the last 15 years working in the web industry. From front-end web design and graphics, to SEO and online marketing. I'm creative, commercial and technically minded. South African born & bred, I work in the UK online marketing industry. I'm a proud dad & husband that loves music, photography and mixed martial arts.

2 Responses to How to setup a CDN in WordPress using W3 Total Cache & Amazon CloudFront
  1. andrew Reply

    Horribly written. I went step by step and now my website isn’t working wtf?

    • Pedro Da Silva Reply

      Andrew,

      If your website isn’t working, it could be due to the fact this post is over 1 and a half years old. Check the dates on “How To” posts before you try them out…

      PS: You’re Welcome!

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.