Set up W3 Total Cache with Amazon CloudFront CDN

CDNs use data centers all over the world
If you find this tutorial too difficult to follow, you can hire me to configure W3 Total Cache with Amazon CloudFront.

I wrote a post a number of months ago about using Amazon S3 to create a free CDN for your WordPress. Someone at the time correctly commented that this wasn’t a true CDN, because a CDN has a number of servers all over the world with syndicated content from your website, whereas S3 stores your information on a single server, so all it serves to do is reduce the load on your own server.

After recognising this, I set about making the switch to CloudFront, which is Amazon’s CDN offering. I was initially skeptical about the cost, but in actual fact, despite having an increase in visitors in the months since doing this, my monthly cost has gone down by 50-75% (from my S3 hosting costs). I pay just a couple of bucks a month for my CDN as well as a chunk of S3 storage.

Install W3 Total Cache

In order to do this, you’ll need to install the magnificent W3 Total Cache plugin. This plugin’s principal purpose is to cache your dynamic content into static pages to significantly speed up how quickly your site loads (and for this reason it is one of about two plugins that I will install on every single installation of WordPress). However, in the plugin’s development, they soon added the capability to use a CDN to further speed up your site by delivering your site’s static content (images and static files) from servers all over the world.

Install the plugin and activate it. The options for setting up the plugin are quite extensive, so I’ve covered that in a separate tutorial: Speed Up WordPress with W3 Total Cache.

Be sure not to get ahead of yourself. Do not activate the CDN from the plugin’s General Settings yet. We’re going to set up the CDN so that everything’s ready and then turn it on; otherwise you’ll be telling the plugin to use a CDN that doesn’t exist and you’ll have loads of missing content. However, do be sure to select Amazon CloudFront (Pull) as your CDN provider and save your changes.

Get set up with Amazon CloudFront

Most of you will likely have an Amazon account. If not, you’ll have to go through a few more steps to get set up. Go to Amazon Web Services and either create an account, or use your existing account to get signed in.

Once you’ve set up an account, go to your Account and go to the Security Credentials section. From there, create a new access key and keep the Access Key ID and Secret Access Key handy because you’ll need them later.

Set up the CDN in W3 Total Cache

Settings for your CDN in W3 Total CacheGo to the CDN tab of the W3 Total Cache configuration page. In the General section, check every box, except for the last (Import external media library attachments). You don’t want to be storing other people’s data, unless you have concerns about the reliability of their servers.

In the next section (Configuration), you’ll need to enter your security credentials from Amazon AWS that we got earlier. You’ll then see a button for creating a distribution. Click on that to create the distribution within CloudFront. If you entered your details correctly, you’ll see a little message that says that the distribution was created successfully. You’ll also note that it will populate the field titled “Replace site’s hostname with” with your unique CloudFront subdomain. You can test the distribution to make sure everything is set up correctly.

Activate the CDN

You’re all set to activate the CDN now. Go back to W3 Total Cache General settings and enable the CDN. Load your site and check that it loads as expected. At this point, you now have a fully functional CDN running through Amazon CloudFront.

Set up CNAMEs

Stopping at this point is fine; everything works correctly and you’ve achieved what you set out to do. However, another nice touch that W3 Total Cache added was the ability to use CNAMEs for your CDN. What does that mean I hear you ask? Well, if you look at the URL of any of your images on your site with the CDN active, you’ll see that the location is some random subdomain on cloudfront.net. It works, but you can make it look more professional and also help SEO a little in the process by replacing the random CloudFront domain with your own domain.

Setting up CNAMEs for CloudFront

First of all, log in to your web host’s control panel and look for a DNS Zone Editor. Next you’ll need to create a CNAME for subdomains that you want to use in place of your CloudFront subdomain.

For example, on my site, I have created CNAMEs called cdn, cdn1, cdn2 through cdn7, which all point to my CloudFront subdomain. You could choose names like media, cdn, files, static or whatever you like. I recommend creating 8-10 though to spread your DNS/HTTP requests across multiple CNAMEs. See the image above for how I set it up in WebHost Manager:

Enter your CNAMEs in AWS

Enter your CNAMEs in AWS

Once the CNAMEs are set up with your web host, go back to the AWS console, find your CloudFront distribution and edit it. It will bring up a window where you can enter all the CNAMEs for your site. Enter them all here and save them. Then go back to your W3 Total Cache CDN configuration page and enter the same CNAMEs in place of your CloudFront subdomain that was automatically populated when you created your distribution earlier. See the image below for how to enter this information.

Then, make sure to test your CloudFront distribution to ensure that it is configured correctly. If the test passes, save everything and reload your site and make sure that (a) everything looks like it should and (b) your files are being served from your CNAMEs instead of your CloudFront subdomain.

Enter your CNAMEs in W3 Total Cache

This whole tutorial seems imposing, but once you get into the swing of things, it really doesn’t take more than about 15 minutes. It makes such an improvement to your site speed, so it’s well worth your time and efforts. If you have any trouble with it, leave a comment and I’ll try and help you.

141 thoughts on “Set up W3 Total Cache with Amazon CloudFront CDN”

  1. This is awesome, Dave. Given that you are offering the guidance, I am confident I can do it! Thanks!

  2. Sorry to bug you, Dave. I have WP Supercache installed. Do I need to deactivate the plug-in before activating W3 Cache?

    1. Yes, I would recommend deactivating WP Super Cache since it performs the same function as W3 Total Cache, just not as extensive and not as well. Got a tutorial coming out later this week about how to set up W3 Total Cache. Keep an eye out.

  3. Andy says:

    Thanks. Took some doing to get it all installed and configured. I have noticed a slight DNS slow down after enabling Cloudfront.

    1. That’s to be expected I suppose, but how does the overall page load speed match up now? Was there an improvement? It doesn’t much matter if there was a slight slowdown in DNS resolve time if the content downloads ten times quicker.

  4. Houman says:

    Dave,

    Great article. Just one thing, when creating the CloudFront through the W3 Total Cache, it doesn’t use a bucket (fields are grey). But if you go to AWS management console to create a cloudfront distribution yourself, it demands an S3 bucket to be created. How is this possible that W3 Total cache creates one without a bucket?

    1. I’ve created distributions in Cloudfront before (rather than going through W3 Total Cache), but it’s never asked me to create a bucket… are you sure you’re looking at Cloudfront? Maybe a screenshot would help.

      1. Houman says:

        Hi Dave,

        I have figured it out. When doing it from W3 Total cache, it creates a Custom Origin instead of a proper S3 Origin. http://docs.amazonwebservices.com/AmazonCloudFront/latest/DeveloperGuide/CreatingDistributions.html I still don’t understand where the Custom Origin is located in this case unlike S3 bucket which you decide in which region it should be created. Usually the whole point of CDN is to create different ones around the globe. I wonder how W3 Total Cache is setting up these custom origins…

  5. Houman says:

    Dave,

    One more question: You said ” I recommend creating 8-10 though to spread your DNS/HTTP requests across multiple CNAMEs” But why? Aren’t they all pointing to the same domain anyway? Why not just having one CName called media, so that all images and css etc are references from a single subdomain. I have created three called files, media and images. But now each image gets an arbitrary subdomain. Doesn’t make much sense to me.

    Thanks

    1. Hi Houman,

      I was sheepish about including that in the tutorial. I was led to believe that it would help to spread the load across different CNAMEs, but that could be wrong. Now that you’ve explained it, I’m starting to wonder. I’m not incredibly knowledgeable on DNS, so perhaps it doesn’t help much at all. I’d be interested to hear if you find out anything more on this subject.

      1. Hello, I read somewhere that it’s bad if you serve static files from too many sub domains but I’m guessing around four is good.

        1. I must admit that DNS is not my strong point and I’m not entirely sure on where the sweet spot is. I’m going to do a little research and maybe rectify this uncertainty once and for all.

        2. OK, here’s an excerpt from the FAQs on W3 Total Cache, which suggests that the more host names you use, the better:

          You may optionally, specify up to 10 hostnames to use rather than the default hostname, doing so will improve the render performance of your site’s pages. Additional hostnames should also be specified in the settings for the distribution you’re using in the AWS Management Console.

          1. Drew says:

            Here’s the reason for that: Browsers will only download a limited number of resources from a single domain at a time. If I serve everything from the same domain, a browser may only download two or three resources (files, images, etc.) at a time. Use 10 subdomains, and the browser can pull 30 resources at a time.

            While I’m here, I’ve got a question. You said you found it to cost less than S3, would you be willing to share cost info?

          2. Hi Drew,

            That seems like a sensible answer. Is that true, even across CNAMEs on the same domain that all point to a single place (the Cloudfront domain)?

            As for cost information, my S3 “CDN” bill used to be 4-5 dollars a month and now on Cloudfront it’s at about $1.50.

          3. Drew says:

            You’d have to know way more about browser specifics than I do to answer that. But when I first read about this, they were talking about simply serving from multiple subdomains under your main site.

  6. Debbie says:

    Hi… I did all of this.. but it will not let me check host minified CSS and JS files… and so (this may be related to that issue) I have the cnames entered on my host, and on the AWS Distribution section – site still works fine, but once I enter them into W3 Total Cache and delete page cache and reload my site … it messes the layout up big time. I am not sure what to do … so for now I have deleted all the cnames out of the W3 settings and the site is working good now but I would like the cnames in if possible. I have verified that it is pulling my images from the cloudfront.

    Lastly… the site still does not speed up very much and when I go to webpagetest.org it does not detect a CDN. I am totally confused.

    I am not a techy so even making it this far has surprised me… but can you help me out? Why can’t I check the minify for CSS and JS? It is very light and there is no way to check this box.

    1. There was a period where minify wasn’t working for me either and really messed up my stylesheets, causing my site to look ridiculous. It somehow resolved itself, or I realised I had done something wrong and rectified it, but it’s now working well for me.

      Try turning the CDN on and leaving the CNAMEs in place, but disabling minify and see whether your site loads normally.

      1. Debbie says:

        I have super cache runing… and I even manually modified my htacess file and when I use googles page speed or webpagetest.org it still is saying I need to use browser cashing… and shows a bunch of files (namely png files) that should be cached – I am so confused… my site is so slow .. I do not know if its my server or my theme. I have been working on this for over 3 weeks and I am at my wits end! This should not be so hard should it?

        1. I’m not sure that WP Super Cache supports Browser Caching. I recommend using W3 Total Cache instead (as this tutorial recommends). I have a guide for setting up W3 Total Cache as well. Just bear in mind that you can’t run the two plugins concurrently as they will conflict. It’s one or the other.

  7. Christian says:

    This tutorial is awesome, Dave. I have one question: Why “static2, static3, static4, etc.” is working as domain name ?!? It’s showing the same content.
    Look:
    programecalculator.ro » static2.programecalculator.ro

    I’m going to have problems with duplicate content. True ?!?

    1. The plugin’s FAQs recommend using several CNAMEs to spread the load of the CDN across different subdomains. However, this will not create a duplicate content issue, because the page itself is only accessible from a single place, while the static components (like images, CSS and JS) are available from several subdomains. You’ll be fine.

      1. Christian says:

        OK! Thank You! ;)

  8. David Wang says:

    Hi Dave, I’ve been wanting to do this for a while so your tutorial is really helpful. I assume that images that I’ve uploaded to the media library prior to implementing the CDN will still remain on my server and not be affected? What if I want to move those images off to the CDN too? Thanks!

    1. No, that’s incorrect. The way the CDN works is, W3 Total Cache changes the URLs of all the media that should be on the CDN (such as images). Then when a page is loaded, it searches for all the components of that page on the CDN. If they don’t exist, the CDN will pull them from your site and store them on the CDN for future use. So unless you explicitly disallow certain file types, or files, it will get everything it needs from your site if it doesn’t yet have it.

      1. David Wang says:

        Wow that’s cool! So once the CDN has been set up, I can safely delete my wp-content/uploads folder? Of course i’ll keep a backup copy in case anything goes wrong :)

        1. No. You should keep that folder, because the CDN will periodically check that it has the right content by checking it against the source (wp-content), so the originals must always remain in place.

          1. David Wang says:

            Ok I see.. Thanks Dave, you’ve been a great help at explaining this :)

          2. steve says:

            I probably have 1GB of static html content. Is it possible I store it in CDN but not store it in local folder? this will lower the cost of hosting?

          3. Hi Steve,

            No, that’s not possible, because the CDN pulls the content from your own web host to redistributes it.

  9. How do I this, I’m a complete beginner and know very little: I /home/content/59/7219859/html/wp-content is write-able. When finished installing the plugin, change the permissions back to the default: chmod 755 /home/content/59/7219859/html/wp-content.

    1. In WordPress, folders should have permissions of 755 and files should be 644. If you have those, and follow this tutorial, you should be in good shape.

      1. I hid the statement: I /home/content/59/7219859/html/wp-content is write-able. When finished installing the plugin, change the permissions back to the default: chmod 755 /home/content/59/7219859/html/wp-content.

        Then I got the error notice: It appears Page Cache URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration.

        And: It appears Minify URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration.

        It seems I’m digging myself in to a bigger hole

        1. Have you tried auto-installing the rules into .htaccess? Is it a writable file? You might try installing them manually if the auto install doesn’t work.

  10. Jupiter Jim says:

    Dave,

    what an incredibly detailed video! Thanks so much for this post. I’ve been looking at CDN’s lately. I use W3 Total Cache and I use Amazon s3 storage already to back up my site, so this shouldn’t be too difficult thanks to your detail!

    What do you think of MAXCDN? I’ve heard it was good and seems simpler, especially for peeps that are not tech savvy. What’s your opinion and what’s the advantage of your set-up (which I am inclined to use).

    Thanks again!

    — Jupiter Jim

    1. Hi Jim,

      Cloudfront works very well for me, as a medium-trafficked site. I think that alternatives such as MaxCDN are perhaps more appropriate for highly-trafficked sites, where perhaps Amazon Cloudfront is not quite up to par. I’d strat out with Amazon Cloudfront and see how it works for you.

      It’s worked very well for me, giving me massively reduced load times and latency, especially for my readers outside the States.

  11. Jeremy says:

    Hi Dave,

    Thanks for this overview. Looks great and easy to follow. I have a question for you about the CNAME stuff though. I was reading on Amazon’s setup guide that CNAMEs can’t really be used over HTTPS connections (you get the secure and insecure content warnings). I would love to use CNAMEs for nicer URLs, but this limitation is a deal-breaker for me.

    Do you know, though, if we could make our HTTPS files reference the cloudfront URLs, while the rest of our site uses regular ones? Or is that incompatible w/ using CNAMEs?

    I hope what I’m asking makes sense…

    1. I’m not sure that W3 Total Cache supports that behavior, unless the Auto SSL Support automatically uses your CNAMEs for http connections and the cloudfront domain for HTTPS connections. Give it a go and let me know how it goes.

      1. I’m trying to optimize my site more and have been using the CDN just fine, without CNAMEs. I use SSL because I also have an online shop as part of my blog, so all of the images need to be called through SSL.

        Without using the CNAMEs, I had W3 TC set up for the CDN to always be https. Then today I set up 7 cnames, and did everything like I was supposed to. I refreshed my site, it started loading but looked like the images were broken. Then the whole screen turned black

        I turned off the CDN to see if that was the cause, and it was. I started doing more trouble shooting with the CDN turned back on, and tried the HTTPS at different settings in W3 TC, and also in cloudfront. But in cloudfront, it’s either always HTTP or match the user. There is no HTTPS all the time. None of the variations worked. But at one point if I used http: in my URL instead of https:, then everything loaded. So I knew it was an issue with the https. I deleted the CNAMEs and put the CDN back to how it was with just the 1 distribution, and it was back to normal.

        But that means I can’t have multiple distributions right? Which makes my site slower. I’m hitting the CPU limit with my web host, so I’m trying to optimize as best as I can.

        1. Using a CDN with HTTPS can be a little quirky. I’ve heard that MaxCDN handles it pretty well.

          However, while spreading across multiple domains will help your pages load faster, it won’t reduce your CPU load. Think of it this way: your CPU is your brain and you need to move 28 boxes. You can either tell yourself to lift all 28 boxes, which will take a long time, or you can tell 7 different people to lift 4 boxes each: the task will get done quicker, but the amount of brain work is the same either way.

          It sounds like you need to consider moving up to a better server. If you’re currently on shared hosting, you might want to consider a VPS.

  12. Ed de Beer says:

    Hi Dave,
    Firstly, thank you for the comprehensive, step-by-step instructions. I am a total techno-noob, so I apologise if I am asking silly questions! I have everything set up (even CNAMEs using your exact format), distribution is working fine and my site speed has definitely improved; but yet all images still seem to be loading from my wordpress installation. I noticed in W3TC that only the fist 3 CNAMES were automatically assigned ‘tasks’ (first for CSS, and the following 3 for jacvascript of some sort), yet the others seem dormant. Did I miss anything?
    Any advice would be very much appreciated!
    Thanks,
    Ed

    1. If you put in more than one, it starts to assign specific tasks to the first four CNAMEs. After that, the extra CDNs are used for “other stuff”, like images. So on my site, most of my images come from cdn5, 6, 7 and 8, since cdn1, 2, 3 & 4 are reserved for CSS and JS. If you’ve got more than 4, the remainder should be used to serve up your images.

      1. Bongaards says:

        Is there a specific reason for not loading with multiple cnames on this website and on your other website?

        On http://www.theukedge.com/ I only got files from cdn.theukedge.com and on this website only from maxcdn.doitwithwp.com, and not from other cnames. I’m curious about the reason.

        1. Just because I have been satisfied with the performance with just a single CNAME. And because I don’t have many static files per page load, so adding more wouldn’t be particularly advantageous to me.

  13. Tony Meyer says:

    Great write up Dave, going to give this a try for my blog soon.

  14. I’m a little lost. Your info says “In the next section (Configuration), you’ll need to enter your security credentials from Amazon AWS that we got earlier. You’ll then see a button for creating a distribution. ”
    I’m in the CDN tab, and under configuration there, I don’t see where to put my credentials. There are areas to put in FTPhostname, username, password, path & SSL support.

  15. I realized the problem. On the general tab, I hadn’t selected Amazon Cloud front under CDN.

  16. Well shoot! I enter in my access ID & secret key. But when I click on “Create Bucket & Distribution”, and leave it on the US default. I get an error that my bucket is empty. I checked my ID & key, & they are correct.

    1. You can just ignore me! I obviously didn’t get enough sleep last night, so I’m making mistakes. When I selected Amazon Cloudfront, I selected push instead of pull . . . Now I’ve successfully created my distribution.

      1. Hehe, well I’m glad you get there in the end!

  17. mmln says:

    I did all setups including testing (it passes). How to check Cloudfront is active and working ?
    My URL still shows original server(my server), not cname or cloudfront.
    is it necessary to use S3 ? can I just implement cloudfront without S3 ?

    1. Your domain will still show your original URL, but if you right click on an image and find its source, it should be on a Cloudfront URL, not on your domain. That should tell you whether or not it’s active. And no, you don’t need to use S3, you can just use Cloudfront.

  18. Houman says:

    1) What is the exact difference between “Amazon CloudFront (Pull) ” and “Amazon CloudFront (Push)”? The latter requires S3 bucket, but at least files are being visually uploaded. I can see they are on CloudFront. With pull, I see nothing and It seems as if all the ten subdomains are simply pointing back to my server.

    2) Weird enough in both cases with CloudFront CDN activated, I scored one point lower on YSlow benchmark.

    3) It seems that both methods have trouble displaying the SSL protected pages. How are we meant to use a shopping cart then?

    Thanks,
    Houman

  19. Paul says:

    So should I assume that I would have to load all files to amazon for this to work or will it do that for me?

    1. Once you set up the CDN, it will “pull” all the files it needs from your site. You don’t need to do anything in that sense.

      1. I’ve got everything setup correctly, however when I modify css files on my site, the new updates never seem to show up. Even after I purge everything, this does not work.

        How do I force a pull so that my new files are updated on my Amazon Cloud account?

        Thanks,
        Mike

        1. I’ve not been able to force a pull either. When I make changes, I confirm it by temporarily turning off the CDN and looking at the site. Then I reactivate it and after a day or two, the changes show up. You can also try to use the Purge Files tool to force individual files (your CSS file in this case) to be purged from the CDN.

  20. Borris Real says:

    Hi Dave,

    Thanks for the wonderful guide on Cloudfront implementation. I am looking to speed up my blog.

    There is a free CDN option called Cloudflare.

    If you know about it, can you please compare Cloudfront and Cloudflare?

    1. I have never compared the two, but I’m actually a little put off by Cloudflare, because they require you to point your nameservers to their servers in order to turn out your content, so I’m not a big fan of putting them in charge of my DNS.

  21. Ed de Beer says:

    Hi Dave,
    Thanks from me also for the tutorial on Cloudfront implementation. I agree with your comment regarding Cloudflare. I tried it a few months ago, had to reroute my name servers, and then found that my site was ‘down’ on a number of occasions. My site was faster than before, but I had never experienced a ‘down’ before. That was when I found your articlel, and have not looked back. I am planning to use S3 at some point (there is a Wordprress plugin that facilitates saving to a bucket), but haven’t had the time to try that yet.
    Thanks again,
    Ed

  22. Nick says:

    Incredible tutorial, thanks!

    Seems I have one last problem on the CNAME front. I set up a bunch of CNAMES and get this error when I try to test:

    Error: Domain name cdn.triplepundit.com is not in distribution CNAME list.

    Does this just take some time to propagate? Also get a funny error if I try to go directly to the new CNAME url, ie, cdn.triplepundit.com that says “Sorry, invalid request”

    Do I just need to wait?

    1. Nick,

      That could be one of the reasons, but the more likely reason is that you need to go into your AWS Amazon console and add the CNAMEs to the Cloudfront distribution. Try that and let me know if that resolves it.

  23. Bob Molecule says:

    Great tutorial, but the DNS bit seems a bit confused! For splitting DNS, I think common practice now is to go with 4.
    Each DNS lookup is going to take time (your 10 DNS lookups could add 1-2 seconds, even on a fast connection), and most browsers now will download 6 files from each at a time, but from (I think) 4 hosts at a time, ie. 24 files can download together. Don’t forget facebook, google+, twitter, they all will have their own (multiple) hostnames as well.
    It’s probably not a bad idea to split the largest group across at least 2 hostnames. Eg. if you have 10 images on average on a page, then if they are split by 2 different hostnames that could halve the load time (for those images).
    Ie. if you have 6 images, 2 javascript files and an html file – 2 hostnames will be fine, and that will leave 2 slots for 3rd party sites to load through.
    This page for instance has 84 elements from 25 different hosts, a lot of them could be combined into sprites, and this would probably actually speed up your first-look load time even more than offloading to a CDN.
    The best way of checking the impact of hostname-splitting is to install firebug (and ySlow) on firefox and test, looking at the Net panel. Don’t forget the three types of page refresh: holding shift and clicking refresh, clicking the refresh button, and clicking in the url box and hitting enter. Shift+refresh will show the equivalence of a fresh site view and will be most useful here.
    I recommend checking out Stefan Stefanovich’s work at Yahoo:
    http://developer.yahoo.com/performance/rules.html#dns_lookups
    http://developer.yahoo.com/performance/rules.html#split
    This one is kindof old (I think browsers download more files in parallel now) but interesting:
    http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

  24. Abraham Laria says:

    Great tutorial it works for my site. Now I have a question: What I need to do to upload videos to CloudFront???

    Thank you

    1. On the CDN tab, you need to go down to the Advanced section and include the extensions of the file types that you want to include on the CDN. So that might be *.mov, *.m4v etc. depending on how your videos are encoded.

      1. Abraham Laria says:

        Thank you for answer my question. Now I have a new question. Where to store those videos on my hosting or do i need an S3 bucket?
        Thank you again i hope not bother you. I’m a newbie in cloud stuff.

        1. You don’t need to store it anyway. If you’re running Cloudfront and have entered the file types into the allowed file type list, then Cloudfront will automatically upload and store them – they don’t need to go into an S3 bucket, or anywhere else.

          1. Abraham Laria says:

            Thank you very much, I really appreciate your help :)

        2. I would not host video files on your regular hosting account. Most accounts don’t have the bandwidth and the space. Host your videos someplace on Amazin, or look at Wistia or Vimeo for video hosting.

          1. Patrick,

            You’re quite right, and I think that’s what he’s trying to achieve, by having them live on the CDN, rather than his own hosting account. The bandwidth and delivery speed are the biggest concerns in my opinion, especially when most shared hosting has “unlimited” storage space.

          2. Abraham Laria says:

            What i want is to store the videos elsewhere but not on my own hosting. I’m using Hostgator and it is good but it is still a shared hosting. That’s why i asked for the CDN solution. Thanks Patrick and Dave for your responses.

  25. Just did all of the this and according to pingdom I’ve actually slowed down a little bit and received a lower score. By using multiple CDNs my CSS and JS had been pushed up to Cloudfront and NOT been minimized. So I am getting pinged on CSS and JS not being minimized. When it says I should add cdnxx.allaboutfocus.com to my list to be minimized I am hesitant.

    Anybody feel free to run pingdom against allaboutfocus.com and tell me what you think. Thanks

    1. I just checked out your page course and it looks as though your CSS and JS is being minified and sent through the CDN. Have you made some changes since you wrote this comment?

      1. Thanks Dave. Yes – All weekend. I’ve learned that there is some JS and CSS that you can’t cache or it breaks the theme. Example: I am pretty sure that some of the CSS that my theme uses is actually coming from PHP. You can’t cache that or it breaks – at least for me it did. The end result is that most of the code is over on Cloudfront now, but not 100% of it.

        I ended up going with 10 DNS entries. Initially my perf score at pingdom was worse than before this work. But I just checked it and I’m looking better.

        Thanks for a great write up. Bookmarked!

        1. Yes, the minify function has always been a bit wobbly and sometimes it just kills the theme. At any rate, I’m glad you got it working and that your score is improving now. Thanks for the bookmark :)

  26. Daniele says:

    Hi Dave,

    i followed all steps, but when i load the page and i go to see the code, the link doesn’t changed into a cdn address… Do i missed something?

    1. More than likely. Did you clear your cache (both browser cache and your W3 Total Cache page cache)? There must be something awry with your configuration if the image URLs aren’t changing (I hope you’re not expecting your link/page URLs to change – they will remain the same).

      1. Daniele says:

        Yes i cleared the browser cache and the w3 total cache cache… I thought that they changes. How can i test if the cdn working?

        1. If you look at your page source, look for an image in the code (i.e. ) and the URL should be your CDN, bot your main domain

  27. Sahus Pilwal says:

    Dave,

    When I select Create distribution after inserting my Access Key & Secret Key I get the following error msg:

    Error: Unable to create distribution for origin http://www.domain.com (S3::createDistribution(www.domain.com, custom, 1, ”): [MalformedInput] Unexpected list type).

    I’ve obviously replaced my domain name with http://www.domain.com for security reasons. Anyway I’ve not found any information through forums/searches for the MalformedInput. Any idea is wrong with my configuration/setup?

    Any feedback greatly appreciated. Cheers, Sas

    1. Try omitting http://www. and just enter the domain itself (i.e. domain.com). See if that helps.

      1. Sahus Pilwal says:

        Hi Dave, Thanks for your response. Unfortunately I’m unable to change the origin domain but sorry when I posted comments here with a domain of http://www.domain.com it added the http:// part. Looking at your screenshots above I can see that my domain is exactly as yours is including just the subdomain.domainname.tld next to the “Create Distibution” button. Any idea where I could remove the www part or do you have any other idea what could be wrong? Do I need to configure this manually on the AWS Control Panel?

        1. Hmm, not sure what the issue is there I’m afraid. I’m assuming that the subdomain you’re referring to is where your site is actually installed?

          1. Sahus Pilwal says:

            Yes that is correct. I’ve also posted this error to the CloudFront forum along with the W3 Total Cache WordPress support page so I’ll see what I get back from that. Thanks for your help!!!! ;)

  28. Lee Hughes says:

    Hi,

    Thanks for this post. I just signed up for Cloudfront and I think everything is setup right but I keep getting this error

    Error: Domain name cdn.ephemeralproject.com. is not in distribution CNAME list.

    I have added it on my server, with the cloudfront domain name and status is deployed but I can’t get rid of the error. Hmm

    1. Try editing the distribution on AWS and making sure you add all of the CNAMEs into the CNAME field. Have you done that?

  29. Lee Hughes says:

    I think I’ll just leave the link as it is and forget the CNAMEs bit until I have more time.

    Thanks for your post though, helped loads :D

  30. Hi,

    I have set up everything, but my site now runs a lot slower than before with WP super cache. Besides hitting the button ‘Test Cloudfront Distribution’ How can I check if Amazon Cloudfront is working right?

    1. Load your page and check your page source. You should see images being loaded from your Cloudfront domain and not your main site domain. Also, test the load speed with Pingdom Tools, which will also show where each page element is being loaded from.

  31. Vamban says:

    is there any specific post which helps to edit DNS zone file records via cpanel? Please help me

    1. You need to log in to cPanel and then go to either Simple DNS Zone Editor, or Advanced DNS Zone Editor. No tutorial needed – just input the information as shown in this tutorial.

    2. Selvam says:

      Editing DNS zone is fairly simple via your website cpanel. Try to navigate advanced zone editor and easy to do there. Good luck.

  32. Mela says:

    Hm. I am confused. I followed this whole tutorial to a T, but I am running into some trouble… Everything seems to be working fine, but when I activate the CDN the pages on my site are completely stripped of the theme. Do you have any idea why that is? For now I’ve disabled CDN.

    Anyway, thank you for your informative articles!!!

    1. Your CDN must not be configured properly, or you might need to give it a few minutes/hours to get set up so that it can start pulling in your content. Give it another try in a while and see how it goes.

  33. djb says:

    Hi there, thank you for the article – awesome. Does this mean that the wp-admin files will also be hosted on the CDN? As I’d love to be able to access the speed of the CDN when Im developing my site :)

    1. No, all of the php files remain on your server and your server does all of the processing. The only thing that the CDN does is deliver the static files quicker, like CSS and images. Your host still hosts the database and performs all of the processing required to produce the pages (both front end and the admin). Once the pages are produced, the CDN kicks in and serves up the images and CSS that are requested on each page.

      1. djb says:

        Thank you for your response Dave. Makes sense.

        I have quite a doozy of a situation here. My WP install is located at http://www.djbdomain.com/blog

        When I click the “create distribution” button it adds a distro for djbdomain.com. Not for djbdomain.com/blog. Hence I dont believe the CDN is actually working as the cloudfront domain is pointing to djbdomain.com which is where my other website is.

        Any ideas?

        1. I would think that it should be OK if the distribution shows the domain as djbdomain.com, as that is still correct. It should add the path to your actual WordPress install automatically. Give it a try and tell me if it works.

          1. djb says:

            ok thanks… but it doesn’t seem to be working.
            To check I normally inspect a photograph and check the source to see if it’s using the cdm domain. It’s not. I dunno what else to try.

            On this setup I have 3 wordpress installs on the one domain:
            http://www.djbdomain.com
            http://www.sub.djbdomain.com
            http://www.djbdomain.com/blog

            The first two work without a hitch.

  34. jb says:

    So I’m kind of confused. I went through this whole tutorial and when I click enable CDN my website has only a few images and all the rest are broken. None of my style sheets work and my whole site is broken. Do I have to wait for a while and just kind of guess when the origin pull is done or have I missed a step here somewhere?

    1. It could be any number of things. You do indeed have to wait for Amazon to create the pull zone and DNS changes could also be at play. Also, it could be an error in the way you’ve set it up. Is it working now?

      1. jb says:

        Ok that makes sense. I gave it a couple hours and it started working. Unfortunately after doing all of this, my website loads considerably slower according to pingdom and others. Does it take a while for all of the content to propegate? Thanks for the tutorial.

  35. I’ve been running some speed tests, trying to speed things up a bit. On the google page speed report, I only get an 85. It says I need to :

    *Reduce request serialization (I’m not worry ing about that because they are things from other sites)

    *Leverage browser caching: I don’t understand this because I’m using cloudfront for my CDN. The errors say there is no expiration specified. But I set all of that up.

    *Optimize images (I’ve used smooshit, so not sure why it says this, but I’m not worrying about it for now)

    *Enable compression: it says “Compressing the following resources with gzip could reduce their transfer size by 144KiB (79% reduction)” But I do have gzip compression enabled.

    I’ve set things up according to your tutorial. When I use http://www.webpagetest.org I get a 90, but it still has the same errors. Do you know why it’s not caching my CDN images or compressing even though I’ve got the browser caching enabled for everything except caching of objects after settings change , and 404 and have compression enabled?

    1. Without looking, I couldn’t tell you for sure, but maybe some certain rules are blocking certain parts of your site from being cached and compressed properly. Optimize images might be referring to some of the image files in your theme.

  36. Eddie says:

    Hello Dave,
    Thanks,
    Great clear setup advice,
    I appear to have set every think up ok with
    Successfully setting up amazon cloudfront account,
    Setting up W3 Total Cache by W3 EDGE,
    setting CDN to amazon origin pull, adding my Access key ID: & Secret key:

    the test cloudfront distribution didn’t work so ive set up a distribution in my amazon account, and in the box in W3 Total Cache : CDN tab : Replace site’s hostname with: the xxxxxxxxxxxxxx.cloudfront.net, (distribution details)
    The cloudfront distribution is deployed and states : Enabled
    on my W3 Total Cache page at top it states :
    Content Delivery Network support via amazon cloudfront is currently enabled.
    But it doesn’t seem to work? in safari in ‘show page source’
    the html on a image still has my http://www.nutango.co.uk/wordpress/wp-content/gallery/xxxxxx.jpg not the
    img src=”http://xxxxxxx.cloudfront.net/wp-content/themes/dpc/images/ect. ect.
    ive tried adding Amazon S3 Plugin for WordPress but to no avail ???
    any thing stand out that i’m doing wrong?
    Kind Regards
    Eddie
    i could send any screen shots if required

    1. Did you give it time to create and activate the distribution? I can take an hour or so to do that, so not sure how quickly you wrote this comment. Also, be sure to clear your cache. I’d uninstall the other plugin, as it won’t help: it’s only likely to cause conflicts.

      Let me know how it goes.

    2. Eddie says:

      Hello Dave,
      problems i was having earlier are solved, i reset all the permisions on all my folders / files using filezilla,

      may i ask your advice with adding files to JS file management: & CSS file management: on the minify page of W3TC,
      many of my plug in files i had problems with so ive taken them out,
      i see some of the options to add the files to like TEMPLATE ( 404, Index, Framework, Page, Search, Single or Home)
      also their are other options like : Embed Location (Embed in , Embed after ect…)
      any recommendations for these.
      Kind Regards
      Eddie

      1. Eddie,

        It all depends on what pages you need the CSS and JS to load. For example, if you have social sharing buttons that require JS at the bottom of single pages, you don’t need to load the JS for those buttons on the home page, 404 page etc.

        Generally, loading JS can be deferred to the footer, unless something breaks, or you know of a dependency that means a particular JS file needs to be loaded earlier.

  37. Eddie says:

    Hello Dave, thanks for your reply,
    ive now tried it the other way (Origin Push), uploaded bucket and made public, but still think its not working,
    in the CDN configuration where the secret key is placed,
    the create bucket and distribution & test S3 upload and distribution buttons do nothing whether i set up in Origin Pull or Push? is this normal?

    1. I can’t think what the problem might be without taking a look, but I don’t imagine that it’s anything major. I would recommend getting someone to take a look at it. It would also be helpful if you posted here what the issue was when you get it resolved so that other people can keep an eye out for it.

  38. HariBhol says:

    Hello Dave,

    Thank for the advice. I have created a CNames [cdn, cdn1, cdn2, cdn3] however I don’t see any reduction in the CPU consumption nor Memory utilization.

    I am using Shared Hosting for WordPress and it always slogs at 20 – 100% CPU limit and 20% memomry utilization [Don't know what is causing this issue] even I have disabled comment notification for that matter and I do not have much plugins.

    Even after trying with incapusla and cloudflare [free versions] I have shifted to Cloudfront however this too isn’t doing much.

    All I see after adding additional CNames to W3Cache plugin [Test Successful] style sheets just vanish and I see only paper style and I have even disabled minify option in General page for that matter.

    Can you give a overlook on this?

    Also suggest me should I have to enable S3 bucket along with cloudfront and if I do how much it will cost me per month?

    I do not have a medium traffic site nor high traffic site and its just a normal one..

    Thank You,
    HariBhol

    1. You don’t need an S3 bucket to work with Cloudfront. S3 is for online storage and Cloudfront is the CDN. You need to make sure that your domain name records point all of your CNAMEs to your unique Cloudfront URL and that your Amazon Web Services Console accepts traffic from those CNAMEs for your distribution.

  39. Abraham Laria says:

    Hi Dave:

    I commented here a few month ago and I’m back. See I have two blogs in one of them everything works like a charm but in the other…
    I did the same step by step process but when i put my CNAMEs in W3tC everything fail, no css, no js, no images show up and I got DNS error. If I remove the CNAMES and put “whatever.cloudfront.net” in W3TC the CDN works perfectly. Every thing is good in Hostgator CNAMES and in AWS configuration so I don’t know what to do. Maybe you can help.

    Thanks.

    Abraham

  40. One thing more. The CNAMES works if you type directly for example: cdn5.tecnobuzz.com the site show up perfectly so the redirect is working. The problem is when i set them in W3TC…

    1. Without taking a look, I couldn’t offer up any suggestions I’m afraid. Seems like you’ve checked everything I would.

  41. chris leo says:

    Hi

    How do i manage the cloudfront distribution? How do i see the files and upload some files?

    The distribution does not show up in cloudberry S3?

    For example a lot of my these is still running on my server and i would like to upload to amazon cloudfront.

    Thanks for the great article.

    1. The files won’t appear in S3, because that’s a different product. Once you create your distribution and it’s set up, and your CDN is turned on, every time a page loads, it will change the URLs of your static content (images, css etc.) to that of your CDN. If the file doesn’t exist in the CDN, the CDN will take a new copy from your server, which will then be stored there to be served quickly to everyone else.

      1. chris leo says:

        thanks for the response but I have edited my css file and its not updating to the CDN? How to I delete the file from the CDN or otherwise?

        1. Ahh, I see what you mean. If you log into Amazon Web Services, and go to Cloudfront, there should be a tool to purge files from your CDN. Enter the file you want to purge (your style.css in this instance) and it will delete all copies of it. I believe this tool is also available from within W3 Total Cache on the CDN tab.

          1. chris leo says:

            Nice one Dave, thanks…. Good answer!

  42. Cemlyn says:

    Fabulous, absolutely fabulous.

    Followed all your steps, one by one and got it all set up. Very clear, very straight forward. You cleared what was otherwise a bit of a jungle. First access is now slower than previous but 2nd and subsequent access is blindingly fast. I now have a YSlow Grade of A with a score of 91!! Not bad. Smush.it is taking forever to work through the library but it will get there.

    One question. How do I handle the media that is not in the library. Stuff like header.png which is in the Theme. I have around 20 images which are in the theme and I need to get those compressed. I also use Catablog gallery plugin which uses it’s own library. How can I use Smush.it on those ??

    Very greatful

    All the best

    Cemlyn

    1. You can just manually download the images from your theme folder, run them through smush.it and upload the same files in their place. There’s no way to use this plugin to go through the images in your theme, just your media library I’m afraid :)

  43. Cemlyn says:

    Ah ok, so I can use smush just like any other compression software. That’s good to know. I might set up a dummy site to do all my ‘smushing’.

    Thanks a lot.

  44. Tim Colling says:

    Hi Dave – Thank you for writing this excellent tutorial. It’s very clear and helpful.

    I have one big question, though: my site (www.AgeAssistance.com) loads no faster after setting up the CDN with CloudFront. To be fair, I haven’t set up the extra CNAMEs yet, but before I do all that additional work I decided to do a quick sanity test: my site loads in 2.5 or so seconds both with and without the CDN. Is that fast enough that using a CDN wont help it any further?

    Thanks,
    Tim

    1. Tim Colling says:

      I forgot to mention this: I can verify that the CloudFront CDN is in fact working by checking the URLs for the images that it is serving on our website.

      Thanks, Tim

      1. Tim,

        There’s many aspects that can affect a web page’s load speed, and this is just one of them. Using the CDN should at least make some improvement, but at 2.5s, you may have a larger bottleneck somewhere else. As a guide, most web sites should aim to load in less than 1s. It could be your host, and it could be some of the plugins you use on your site. Have you tried using a caching plugin?

        1. Tim Colling says:

          Hi Dave – Thank you very much for taking time to reply to my messages. I really appreciate it!

          I am indeed using w3 total cache and have been for a long time.

          I also have realized after posting my messages that a few things weren’t apparent to me at first:

          1. It apparently can take a day or two for the full benefit of the CDN to be noticeable. After I posted my message, I noticed a big page load speed improvement 24 hours later.

          2. The page load speed test results vary widely depending upon the location of the data center that the test is running from.

          3. Now, using tools.pingdom.com, with the Dallas data center selected, my site is loading in 700-800ms. That’s pretty acceptable, but now that I have seen that the CDN (Amazon CloudFront) seems to be helping, I may try the suggestion about setting up multiple CNAMEs to see if that helps significantly.

          Thanks again for your help.

          – Tim

          1. Yes, you need to take several tests to get a good feel for how your site is performing on average, rather than on the spot. And as you rightly point out, Amsterdam is likely to load slower for US-based hosts than either Dallas or New York. I’d say that 700-800ms is pretty reasonable.

  45. John Picton says:

    Great walkthrough Dave, and a great combination of products. Am I right in thinking that with this method you no longer need your S3 buckets, as you’re effectively using your shared hosting web server as the origin server, and CloudFront pulls the content from there?

    1. Yes, CloudFront and S3 are separate products. CloudFront works independently from S3, by pulling data from your server and then storing it in its data centers around the world for distribution. You’re only charged for the bandwidth used, and not any storage cost.

  46. stevenjp says:

    Hi dave, thank you very much for your W3 TOTAL CACHE tutorial and its a success. I only have one questions.

    I got about 500 images and most of them are not progressive/optimized, i just recently learned that its important. I am using ImageOptim a superb free macosx app and i managed to optimized all of my images in a single click and drop.

    Now how do i update/upload to cloudfront so my images will be progressive/optimized?

    Does sending via ftp to /wp-content/uploads do the job and cloudfront will pickup the images from ftp –> cloudfront

    thanks again.

    1. Once you’ve optimised everything, you can replace the files in your existing wp-content/uploads folder, then purge the CDN cache from the W3TC General Settings page, and Cloudfront will pull in new versions of every file. Also, you could just install EWWW Image Optimiser instead ;) It has a bulk optimise feature which works very well.

      1. stevenjp says:

        thank you for answer my question. thanks for suggesting EWWW Image Optimizer it is one good plugin, installed and started to optimize my images. i only wish there is a button or option to select all files in the media library “optimize all media library” something similar, i have to go page by page and select bulk optimize (20 images each page)

        W3 Total Cache Pro, is it worth upgrading and paying $99 – what are the extra options that can help our site load faster. is the percent difference huge? worth upgrading?

        1. You can bulk optimize everything. Just go to Media > Bulk Optimise

          Not sure what the extras are with W3TC Pro, but I’d say they’re probably not worth it

  47. jrenzi says:

    Hey Dave, great article, followed through it and used almost all of your suggested settings.

    I’m using cloudfront to serve the images, with custom CNAME and it’s working great and fast.

    The problem is that the site is starting to get more than 100k visits a day, and thus the cost of cloudfront has increased quite a bit.

    Is there anything I could do to reduce the cost? I did optimze my images as best as possible to reduce the bandwith, but since most of my articles have several images the bandwith of cloudfrond is quite high.

    Thanks!

    1. Yeah, if you’ve optimised the images, there’s not much more that you can do. You might consider looking at the exact costs and whether an alterantive like MaxCDN might be more affordable.

  48. Robert says:

    Great article. One thing I would like to point out though. There is a significant benefit in using a dedicated domain for your CNAMEs (e.g., diwwpcdn.com) instead of your site’s primary domain.

    The reason for this is that any cookies that the visitor may have stored in their browser associated with doitwithwp.com will be sent to the CDN with every request. The subdomains may reduce the number of cookies a bit, but it’s extremely difficult to eliminate them entirely.

  49. Brilliant stuff… Am on Amazon EC2, with the DB on Amazon RDS, Route 53 handling the routing… running a WP Multi Network site and Buddypress Multi Network… Been wanting to “switch” on W3 Total Cache for quite quite quite some time now, but too bloody scared… My worries pertain very much to the Buddypress components, as that forms 80% of the site and from all i have read over last few months can be real tricky with caching… Any suggestions or thoughts on BP and caching?

  50. Just a quick note for your article – you need to create a new IAM user to access S3/cloudfront content from W3T.

    If you simply create a key after signing up you will be using the root access credentials – which is not good practice (W3TC has access to all of your AWS resources – even other buckets).

  51. Gavin says:

    Nice article. What happens if you set up the Amazon CDN (which I have done and it works) and then a couple of days later you install a new plugin? Does it copy that plugin over to the CDN automatically?

    Thanks,
    Gavin

    1. Yes. Here’s how CDNs work: WordPress changes the URLs of all files to the CDN URL. When the file is requested, if it doesn’t exist on the CDN, it will go and fetch it from the site itself, so if you ever activate a new plugin (or upload new media etc.), you don’t need to actively do anything: it will just get whatever files it needs.

Leave a Reply

7ads6x98y