Set up W3 Total Cache with Amazon CloudFront CDN

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.

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

Go 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.

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

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.

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.

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.

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.

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?

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.

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…

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.

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.

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.

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?

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.

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.

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?

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.

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

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.

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!

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.

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.

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.

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).

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.

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’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.

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.

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.

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

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.

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.

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.

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.

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 ?

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.

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?

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.

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.

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

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.

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_lookupshttp://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/

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.

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.

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.

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.

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

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.

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).

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?

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?

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?

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.

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.

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.

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 :)

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.

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.

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.

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?

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?

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.

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?

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.

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

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.

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

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.

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?

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.

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..

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.

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.

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.

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.

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 ??

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 :)

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?

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?

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.

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.

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?

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.

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

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.

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?

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.

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.

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?

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?

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.

2. After I setup the CDN, the image is available at http://cdn3.example.com/wp-content/uploads/2015/03/leap-of-faith.jpg and the good part is the URLs in the blog posts where this image was attached is updated to reflect the above mentioned URL. But the problem is that when visit the older URL of the image (which is what Google has crawled earlier, I get a 404 error).

Hi dave I recently read something to the effect of, if you’ve set up a CDN then you should set up a redirect for images on the origin domain to get them from the CDN domain, to avoid SEO penalties of duplicate content from Google. Is this worth it?

Hmm, I don’t know really – I’m not an SEO expert, but I do know that most of it is hype. If you’re generally doing the right thing and not manipulating the system, I don’t see that Google is going to be heavy-handed with you. I would imagine that CDNs would noindex their content, but I can’t say for sure.

All that is to say that I wouldn’t bother with a redirect like you mention.

Hi Dave,
I set up my CDN about a year ago and it has been running smoothly. Recently I have been trying to speed up my site even more. I found out I should have been more diligent in reducing the image sizes. I have gone through and “smushed” all my images, but am guessing that this doesn’t adjust the CDN images (or does it?) How do I get the new, smaller images to replace the bigger ones on the CDN?

Wish your site was as fast as this?

Do It With WordPress is proudly hosted by WP Engine, the very best WordPress hosting that money can buy.

Aside from being blazing fast, it's very secure, has a staging area to test changes before making them live, automated daily backups, malware scanning, stellar support from WordPress experts... It's just everything that you would want from your host, and more.