W3 Total Cache is my favorite plugin when it comes to configuring CDN with WordPress. I already posted how to configure MaxCDN with W3 Total Cache almost 2-years back.

Today I will show you how to configure Amazon Cloudfront CDN using W3 Total Cache as a “generic” origin-pull mirror.

This is 2-step process:

Creating Amazon Cloudfront Distribution to be used as CDN for WordPress
Configuring W3 Total Cache to use Amazon Cloudfront Distribution

In between above 2-steps, you can add an extra step to create “white-labelled” CNAME records in case you like to use something like cdn.example.com instead a random subdomain from cloudfront like d3otazh35pn6.cloudfront.net

Creating Amazon Cloudfront Distribution to be used as CDN for WordPress

Login to your amazon aws console: https://console.aws.amazon.com/cloudfront/home and click on “Create Distribution” button.

Amazon-AWS-Create-Distribution-2

It will start a 2-step process. In Step-1, use delivery method “Download” which is set by default and click “Continue”.

In Step-2, You will be asked different settings for this new Cloudfront distribution.

Under “Origin Settings”, set…

Origin Domain Name: example.com
Origin ID: example.com

where example.com is your domain name on which you are running WordPress.

Under “Distribution Settings”…

You can add your one or more CNAMEs to Alternate Domain Names(CNAMEs) setting.

This is optional but if you choose to use custom CNAME record(s), do not forget to configure them on your domain registrar’s end. Instructions for CNAME records are NOT covered in this article.

CloudFront Distribution List

Once you complete setup, this newly created distribution will appear in CloudFront Distribution list.

You can see Domain Name value here only which we will need to provide to W3 Total Cache going ahead. This is the value you will also need in case you want to setup your own CNAME records.

You can see more details and complete domain name value by clicking on info icon.

Configuring W3 Total Cache to use Amazon Cloudfront Distribution

W3 Total Cache provides many options to configure a CDN for your website. For Amazon Cloudfront also, they provide 2 different ways. But we will use “Generic Mirror” option as we have configured CloudFront manually in above steps. You are free to configure Amazon using other ways as well.

Go to W3 Total Cache’s General Settings. Scroll down to CDN section (not submenu)

Select “Generic Mirror” option and click “Save all settings” button.

Then go to W3 Total Cache’s CDN Submenu. Scroll down to Configuration section.

In “Replace site’s hostname with:” field, paste value of your CloudFront Distribution Domain Name. You can also paste value of CNAME if you have configured one already.

Next, click “Test Mirror” button. If you get positive response, click “Save all settings” button to save changes.

Finally, clear your page cache. W3 Total Cache will remind you about this. But this time you shouldn’t ignore it!

If you stuck/need help, feel free to use comment form below! 😉

Update:

Many users asked why we are using Generic Mirror when Amazon CloudFront option is already in dropdown menu.

On many occasions, Amazon CloudFront option did not work for us. Though, it that option works for you. Please use it. Most likely, using Amazon CloudFront way will purge your CDN cache automatically from WordPress dashboard. BUT, Amazon CloudFront charges for cache-purge also. So accidental and unnecessary purges will increase you bill.

This billing aspect is another reason, we did not think bother to try harder to get Amazon CloudFront option working for us.

CDN

PREVIOUS

CDN.NET Configuration with W3 Total Cache Wordpress

NEXT

Comments

rajan anuraj

November 20, 2012

getting this error:

NoSuchKey
The specified key does not exist.

wp-content/uploads/avatars/6831/499807178ba1678eee7d80768cd2dd3a-bpfull.jpg

FEB78DAAF4507115

irMPwIoWJpJ9GXbkT6uVMhlb6CxnfMPuVSll2XbZRA9DWqw7i60C3DB1tDd7+0QH

can you throw some light on this… your help is highly appreciated….
1. Rahul Bansal
  
  November 21, 2012
  
  @Rajan
  
  Can u share your website and CDN URL?
  Is your website public? Do you have any /etc/hosts entry?
  Also, are you getting error for one file or every file?
  
  Looks like CDN is not pointing to correct origin (website-domain)…
tom

November 25, 2012

Thanks very much for this. I just moved all my sites from Maxcdn to Cloudfront today.
1. Rahul Bansal
  
  February 28, 2013
  
  Hi Tom,
  
  Can you let us know how it is working on budget? Are you saving with Amazon as compared to Maxcdn?
Josiah

December 24, 2012

It seems that W3TC is replacing the entire image path, not just the host name. Any ideas?
1. Rahul Bansal
  
  December 26, 2012
  
  Can u paste some sample URLs here? Which URL is being replaced by what? And what is expected?
  
  Looks like some error in configuration. W3TC is one of most stable plugin out there (IMHO)
Avi

February 5, 2013

Works.

Thanks for the info.
Josue

February 22, 2013

why you chossed a Origin Pull over Origin Pull?

I wanna know which one is best and why.

Thanks
1. Rahul Bansal
  
  February 28, 2013
  
  I think you wanted to ask – why choose Origin Pull over Origin Push?
  
  My answer to this is – ease of setup. On origin pull, you don’t need to “upload” anything.
  
  Also, Origin Push is generally expensive in terms of pricing.
seb

May 16, 2013

yo

when all this is done, how do I sync files with cloudfront? I’ve tested the connection with cloudfront and it says it’s ok but now, i wonder what to do for my filest to be sync with the cdn ??

thanks

Seb
1. Rahul Bansal
  
  May 17, 2013
  
  You don’t need to sync files manually. I have written about Origin Pull Mode in which CDN copies files on-demand.
Cristhian

June 13, 2013

Hi.
If im gonna use Cloudfront. Whats the diference between using (Origin pull) “Generic Mirror” and “Amazon Cloudfront”?

At first sight you should think selecting “Amazon Cloudfront” is the obvious way, but insted you are selecting “Generic Mirror”. Why?

Thanx!
1. MacMonkeyMark
  
  June 21, 2013
  
  I’d be interested in this answer too. I have it set up and working just fine with generic, but I wonder if there are advantages to a specific Cloudfront configuration setting.
2. Emmanuel
  
  June 22, 2013
  
  Same here, just finished going through this tutorial and first thought was why “generic mirror” .
  1. Rahul Bansal
    
    June 25, 2013
    
    @All
    
    Please check article again. I have added explanation for “Generic Mirror” vs “Amazon CloudFront” part.
    
    Sorry for missing it out earlier.
Aash

July 1, 2013

@Rahul

We have tried both MaxCDN & Cloudfront. And would definitely recommend using Cloudfront

Here is why:
First: Cloudfront is cheaper and because of pay as go billing (For starters & Low Traffic Websites)
Second: With MaxCDN you have to pay an extra $10/Month for Asia Zone which is just not worth it. Especially if you are low to medium traffic website.
Third: With Cloudfront, you can setup as many zones as you want (Good for multiple websites), but with MaxCDN you have to upgrade to Business or custom plan to use on multiple domains.
Fourth: Cloudfront has got servers in Sydney for Australiasia region. Which is what we liked the most…

Anyways, that just my opinion… 🙂
1. Rahul Bansal
  
  July 1, 2013
  
  @Aash
  
  MaxCDN was one of my favorite CDN. I also hate their new pricing strategy and number of website limits per account.
  
  But we are using http://www.cdn77.com/ which has freedom of Cloudfront, only with better pricing. I think they have more number of edge location than Amazon Cloudfront.
2. Rahul Bansal
  
  July 1, 2013
  
  There is one more provider – http://cdn.net/
  
  cdn.net is backed by big guys but their customer support is worst and software interface is confusing. They are cheapest so we are using them for a very big site which consumes more than 1TB every month.
Suhas

July 15, 2013

Hi Rahul, I am using Amazon Cloudfront and also using W3 total but not configured them to work together. However you post is really good and helpful. Thanks for sharing.
1. Rahul Bansal
  
  October 14, 2013
  
  If you are already using two, it will be good to use them together. CDN can help in many ways.
Rishi

August 12, 2013

Hi – I am using cloudfront along with CNAME & w3 total cache and everything is working fine –

mydomain.com (Main Site)
cdn.mydomain.com (CloudFront)

Both the versions are fully functional. Since it might create duplicate content issue on google search i just want to load image/js files from the cdn.mydomain.com and not the entire site from cdn.mydomain.com.
Is there a way to handle this? Temporarily i have used rel=canonical which will prevent duplicate issue.

Please let me know
1. Rahul Bansal
  
  August 14, 2013
  
  rel=canonical is recommended and I think only way unless CDN provider add some option to choose which content can be served using CDN.
  
  pull-cdn is basically a distributed-proxy in-front of original server. So any page on original site will be accessible using CDN.
ouwerling

August 19, 2013

Thanks Rahul for the article.
I have been testing both Maxcdn and Amazon Cloudfront with the pull option.
Amazon Cloudfront works very well with one of my sites, but with my other blog Amazon Cloudfront doesn’t pull the images from my Nextgen Galleries.
I think it has to do with the fact that my blog is in a subdirectory. for instance: mysite. com/blog
Isn’t it possible to get a CDN to work with a subdirectory?
Thanks.

Johanna
1. Rahul Bansal
  
  October 14, 2013
  
  @Johanna
  
  Sorry for late reply. If issue is with nextgen gallery only, then its better to talk to its developer.
  
  If nextgen is not using WordPress-Media Library API, then its content may not be get accessible over CDN-pull method.
Vasu Garg

September 3, 2013

Hey Rahul, thanks for this wonderful guide, but I am confused what to choose among’st MaxCDN and Amazon? Since my primary traffic originates from India, I should consider a pull CDN service with an edge location in India.

I had used MaxCDN earlier, they are no doubt one of the most reliable and easy to use system but, they have only one edge location in Asia and that’s also in Singapore (Higher latency) while, Amazon has just setup two new edge locations in India, Mumbai and Chennai (Even lower latency). Now, what should I opt for out of these two? and which one will be more affordable? MaxCDN is charging roughly $170 for a year with asian edge location selected, and I have no clue about Amazon!

P.S. my site is already hosted in India.
1. Rahul Bansal
  
  October 14, 2013
  
  MaxCDN is really ripping off customers. That is why we stopped recommending them.
  
  You can try cdn77.com and cdn.net – both has India edge location and both charges slightly higher for traffic to Indian location.
  
  cdn.net is more flexible in terms of pricing per location.
mihir

October 2, 2013

Hi rahul,
I am getting an error when trying to update my cname record in w3 total cache dk5nvpm2usf7b.cloudfront.net
this is the url of cloudfront and it is working correctly now.

The error that i get is “empty hostname”..
1. Rahul Bansal
  
  October 14, 2013
  
  You can ignore that error and proceed.
  
  I have seen that error many times even when everything is working correctly. May be w3-total-cache validation code has a bug.
vijay

October 13, 2013

I tried many times, also cleared the cache, yet when i click on test mirror..it just shows ‘testing…’ and there are no results. I mean it is stuck at this point. What could be the error?
1. Rahul Bansal
  
  October 14, 2013
  
  You can ignore testing procedure from w3-total-cache.
  
  Open CDN domain directly in browser. If you can see your origin-site, then its working correctly.
Amar

October 30, 2013

Hi,
I am hosting my images in outside word press installation. place of my image is public_html/pics. With your tutorial I have set up everything perfectly. Under CDN pull I am using Amazon cloud front. After enabling CDN images hosted in pics folder is not showing. Adding Cname also did not work.
Harsha

December 1, 2013

Hi Rahul,
Thanks for the wonderful and useful article. I have used maxcdn for about a month and they were fine. But shifted to cloudfront recently. I am ok with those ugly urls and dont want to use Cnames, will it effect SEO? And With cloudfront will there be duplicate content issues and if so, How can i prevent that. In maxcdn there is a simple option of adding robots.txt. Any help would be appreciated. Thanks in advance.
1. Rahul Bansal
  
  December 5, 2013
  
  I don’t think CNAME will affect SEO. I never did anything to remove duplicate contents or disallow CDN crawling.
  
  But I am using WordPress-SEO by Yoast plugin and I think using “rel=canonical” is enough to prevent duplicate content.
  As an example, check HTML source for http://cdn.rtcamp.com/ and you will see rel=”canonical” there.
  
  You can also Google for pages indexed from your CDN domain using “site:cdn.example.com” query as search input. If you see duplicate content there, please let me know. We will see how we can debug it!
BIju Subhash

January 12, 2014

Hi,
I have a problem with CDN. Its replacing my all external urls with CName. So its throwing error. The url are just like “cname”/wp-content/uploads/20131/10/”
Kindly please help me on this problem. How can I resolve this issue.
Thanks in advance.
1. Rahul Bansal
  
  January 12, 2014
  
  Please post clearly (a) original url (b) cdn url (wrong one) & (c) expected url.
Dario

January 23, 2014

Is there any way to test if you have properly installed the CDN
My cdn is http://d82s70rlf4awh.cloudfront.net and my web is propdental.es
When i use gtmetrix it does not recognizes the cdn and i had followed your instructions on the configuration of the total cache. When i see page codes it seems not to serve the can. is there any way to check if i did it correctly or what am i doing wrong. Thanks
1. Rahul Bansal
  
  January 24, 2014
  
  You need to log into gtmetrix and add CDN domain to your profile. Unless you do that, it cannot figure out which domain to consider as CDN domain.
Praveen Kumar

February 14, 2014

Nice article. I was struggling to setup with W3 Total Cache. Amazon’s documentation was too complex. Your article helped me to successfully configure Amazon CloudFront. My site (nearesthomefood.com) is finally faster than before, thanks to your article. I cross checked with http://www.webpagetest.org to confirm it works, and it indeed worked.
Pooja Jain

February 27, 2014

Hello Rahul,

Will it be possible for you to help us with CDN. Website is eogonline.org, hosted on amazon. We are launching on March 8, 2014. The website is already live! Let me know please.
1. Rahul Bansal
  
  February 28, 2014
  
  For commercial support, please use http://rtcamp.com/contact
  
  If you have followed article and facing issue, you can try our free support forum at – https://rtcamp.com/support/forum/wordpress-nginx/
Sriniwas

March 11, 2014

Thanks Rahul, yeah i finally set up one of my WP site with CDN. This guide is really very easy to follow up.
CLuna

March 14, 2014

Hey so do you recommend CDN77.com or CDN.net? I have a very small blog with WordPress targeted to Mexico and wanted to try out free CDNs like Bluehat for instance but what do you recommend? I still have 3 to 5 secs in page load time… And I am desperate.

I also have doubts with Hostgator which I am working with and have had some probs, but am not sure if they have the issue.

Thanks in advance for your recommendations!!!
1. Rahul Bansal
  
  March 16, 2014
  
  Both are cheap. Go with CDN.net if you want to pay only for a particular location. Nobody gives control over locations and pricing like them.
  
  For hosting issues, try DigitalOcean with EasyEngine – http://rtcamp.com/easyengine
Tony Grant

March 18, 2014

Why can I never see the buttons that people tell me to click on in AWS? Everything always sounds so simple but ends up being totally impossible. Their site is a total nightmare and I cannot follow this article one little bit. Even step 1 doesn’t equate to anything I can find on the AWS page you sent me to.
Maybe Max CDN will make more sense?
1. Rahul Bansal
  
  March 22, 2014
  
  Any CDN will make sense.