I’ve just moved all the images from macintoshhowto.com over to Amazon Cloudfront. The bottom line is that you should notice macintoshhowto.com speed up. If you want to know how to do it, read on.
How to make your wordpress site real fast using Amazon Cloudfront.
Cloudfront is a way to speed up your web content delivery. Amazon has fast servers all round the world and they are letting people (for a price!) use their infastructure to serve up copies of their own files such as pictures, backgrounds etc. These static files are stored on the Amazon Cloudfront servers. When someone visits your website the main part of your page (the bits that need to actually run php code and so on) come from your own server, but all the images and so on come from the Amazon Cloudfront. This speeds up you site in two ways. 1. Amazon delivers your pictures real fast. 2. This reduces the demand on your own server, making it faster as well.
There are two ways for Cloudfront to work.
1. You upload all your wordpress static files (you wp-content and wp-includes folders) onto Amazon S3, then tell Cloudfront to get your files from Amazon S3 as it needs them.
OR
2. You tell Cloudfront to get the files directly from your site as it needs them. This second way is called ‘Origin Pull’.
The advantage of 1 is that if you ever change your wordpress host, your entire wp-content folder is stored off-site at Amazon S3, so you don’t need to even copy your wp-content folder to your new wordpress installation. The new S3 wp-content folder becomes your wp-content folder – you can even load images directly to S3 and then insert them into your wordpress posts.
The advantage of 2 is that it’s easier and cheaper, and you don’t need to upload the files to Amazon each time you make a new post.
Here is how to setup your wordpress site to use CloudFront via Origin Pull (the second of the above two options). You need to set up an Amazon Cloudfront account, and install one of two cache plugins, WP Super Cache or W3 Total Cache. The Cache plugins will redirect your browser to get the static content from Amazon instead of your site. It’s really quite simple, you just need to put the Cloudfront details into your Cache plugin, and then put your wordpress URL into your Cloudfront account.
STEP 1: SET UP A CLOUDFRONT ACCOUNT
1. Go to Amazon Web Services – http://aws.amazon.com and sign up for Amazon Cloudfront content delivery. If you already have an amazon.com account it can be linked to that account for payment.
2. Go to the Cloudfront Management Console – https://console.aws.amazon.com/cloudfront/home
3. Click on ‘Create Distribution’. The following window will appear.
Select Custom Origin not Amazon S3. This means it will automatically pull the content it needs from your website. Enter your website URL under Origin DNS Name: This is where it will pull the content from.
4. Press Continue and on the next page leave everything blank except fill in the comment with something meaningful then press continue.
5. Press Create Distribution.
Check the details and press ‘Create Distribution’.
6. The new distribution will appear in the console. Copy the domain name.
6. Copy the domain name. In my case the URL is d3hnrcqh47hd0x.cloudfront.net
STEP 2: PUT THE CLOUDFRONT DETAILS INTO WORDPRESS
Now you will need to go into your wordpress admin and set up the cloudfront server as the place wordpress will go for all your static content files. You do this from the Super Cache or W3 Total Cache plugin.
In WP Super Cache, go to the CDN tab and enter the URL from the cloudfront into the ‘Off-site URL field, and select the ‘Enable CDN Support’ tab. Press ‘Save Changes’
Entering the Cloudfront URL into WP Super Cache
In W3 Total Cache go to the ‘Content Delivery Network’ page, then enter the details under “Replace Site’s hostname with:”
Entering the Cloudfront URL into W3 Total Cache
Unfortunately in W3 Total Cache you will need to fill in the Access key ID and other fields even though these are not needed if you are using Origin Pull. They are only needed if you want to use Amazon S3 as a bucket to load the cloudfront files. We are using Origin Pull so these settings are not needed. Just put in anything like this:
The login details can be anything if you are using Origin Pull because it’s Amazon Cloudfront that does the work, not W3 Total Cache.
Also you can ignore any messages like this one below. They don’t apply for Origin Pull. They are telling you that you need to update the files in the S3 bucket, but you’re not using the S3 bucket.
Give it a try!
To test that it’s working, go to your webpage, then from Safari click ‘view source’. You should see the URL of the images in the HTML file are now coming from the cloud server:
img src="http://d3hnrcqh47hd0x.cloudfront.net/wp-content/themes/dpc/images/logo.png" alt="dpc.com"
That’s it. The images and other static files are now coming from the Amazon Cloudserver. It’s all automatic. If you want you can tweak the cache settings to change what files come from the Cloudserver and what come from your site.
ADVANCED: Once cloudfront is working you can also set up a c-name record so you don’t see the ugly ‘http://d26sdfsdfsdrftrgx2.cloudfront.net’ URL on every picture.
1. Go to ‘Cloudfront Distributions’ in AWS console and add ‘Alternate Domain Names’ and add the domain e.g. cache.yourdomain.com
2. Go to web server Domain Manager ZONE EDITOR (eg Bluehost), Add Record of type ‘c-Name’ e.g. cache.yourdomain.com and point it to your AWS distribution
eg HOST RECORD: cache
POINTS TO:d26sdfsdfsdrftrgx2.cloudfront.net
This looks like this:
3. Go to wordpress W3 Total cache and add the CNAME under ‘Offsite URL’ (Not under ‘Add C-NAME’!!!!) and Save settings.
NOTE: Your files on the CDN will be cached and will not update with a Supercache ‘delete cache’. This is not helpful if you are editing .css files etc.
To manually delete a file from the CDN cache go to AWS: ‘Distribution Settings’ and ‘Invalidations’ and type the path of the file you want to delete eg “http://cache.yoursite.com/mythemes/style.css”
Close
Good tutorial, I was really looking for this. But I have a few questions :
1. Which is better MaxCDN or CloudFront
2. In Step 3, in the ‘Origin DNS name’ field, should I put mysite.com or http://www.mysite.com
3. Is there any way I can map my files to a subdomain like cdn.mysite.com instead of d3hnrcqh47hd0x.cloudfront.net/wp-……… I found many sites have this implemented.
4. Which one is more preferable cloudfront with origin pull or cloudfront with S# and which one will sppedup my blog more.
Thanks for providing such good post. Hope you will answer my doubts.
Thanks.
1. Which is better MaxCDN or CloudFront
I don’t know
2. In Step 3, in the ‘Origin DNS name’ field, should I put mysite.com or http://www.mysite.com
Just mysite.com will do
3. Is there any way I can map my files to a subdomain like cdn.mysite.com instead of d3hnrcqh47hd0x.cloudfront.net/wp-……… I found many sites have this implemented.
Yes you create a cname entry for cdn.mysite.com with your ISP and then enter the cname into Cloudfront.
4. Which one is more preferable cloudfront with origin pull or cloudfront with S# and which one will sppedup my blog more.
Both will be exactly the same speed as it’s Cloudfront that serves the pages. Origin Pull means it gets the content from your site automatically. Otherwise you can set it to get the content from S3 and you upload it there manually.
Thanks a lot for helping. I was really confused with this, but you made me on the right way. Thanks again.
Thanks for the tutorial. I believe I’m doing everything correctly, but when i reload the page it looks completely bunk. There’s no style sheets, there’s no images, there IS text. Every file that I’ve checked as existing at the csn server is in fact there, but for some reason these things aren’t syncing up.
Can you help me straighten this out?
Thanks,
Paul
Have a look at the html source and check out a URL that’s pointing to a file on the the cloudfront server. Copy the URL from the html source into a web browser and make sure the URL is working. My guess is the URL is wrong in Supercache or Total Cache. Make sure you empty browser caches and reset supercache etc.
this is such a great article. Thanks for sharing. I just had one question though. After everything is set up do using method #2 the orgin pull, when I make new posts with images do i just upload it to the wordpress site?
Also what if i want to host videos with s3/cloudfront..Would i just upload directly to s3 and get the distribution url, and post that into wordpress?
Thanks for the help
With Origin Pull, when you make new posts you just upload to your normal site and they will get pulled across when someone surfs your site.
Second question – you that’s right. Make a bucket, put your videos in.
Awesome. Thanks for the help
Thank you! I must have looked at 20 different tutorials for configuring Cloudfront today and yours was by far the most straightforward and helpful. I am up and running now, and added this article to StumbleUpon!
Hi, thanks a lot for this tutorial, I wish I could get it to work though. Everytime I activate amazon cloud front via origin pull my image urls are wrong. I added a cname to an existing subdomain that i used before already to save my images.
In wp’s media settings I have this subdomain specified as upload folder
Now I added a cname entry to this subdomain to resolve to my cloudfront url… But the image urls on my website turn to: http://subdomain.domain.com/
instead of http://subdomain.domain.com/uploads/2011/image.jpg
any idea why that happens? I go nuts here :) already on that the whole day.
Well, you’d need to go to your domain name DNS entry and change the c-name to point to the AWS location rather than your current sub-domain. So it might the easier to just use a different subdomain, e.g. change it from image to images or something.
We’ve switched from Cloudflare to Cloudfront with W3T plugin and have had great results. This has eliminated all the strange issues that can be associated with cloudflare and it’s general DNS-hijacking, and still improved speed hugely.
Thanks for the great article!
Hi. Is there a way to associate cloudfront with a FOLDER on my server, not just my site?
I’d like to hide the ugly “/wp-contemt/themes” etc.
I have setup Cloudfront Origin Pull with W3, but it doesn’t seem as though my site is being redirected at all. I can go directly to the cloudfront url: d2dejb1amrnle0.cloudfront.net and it loads super quick…like I want my real page to do, but instead it seems as though my page loads exactly the same. Do you have any idea what I’m doing wrong? I think I followed everything correctly. I also setup cnames for my images and media, but once this is working would love to setup a cname for the homepage to have it’s actual domain name (which could also use a tutorial ;) THANKS!!
The wordpress page content won’t load faster, just the images.
I have been searching for information about amazon cloud for some hours and i came here. I have a question. can I host my entire website on amazon cloud and cut off my traditional web hosting company.? I have heard of clouding web hosting and is it possible with Amazon?
I havent seen a tutorial on the web that described how one can host his/her entire webiste on amazon and I am presuming this may not be possible. please correct me
take a look of this http://wp.tutsplus.com/tutorials/scaling-caching/deploy-your-wordpress-blog-to-the-cloud/ and this one http://youtu.be/GPc65_2WZ2U
thank you very much for this amazing and complite tutorial
Thanks for this valuable guide. I follow up the steps and my urls are changed to the cloudfront urls. Unfortunately cloudfront it redirects back to my site urls??
Any idea why this is happening?
I followed everything correctly. I also setup cnames for my images and media..now everything works fine…thanks
Is it not possible to use cloudfront without the super cache plugins?
I was thinking that we can simply use CNAME to redirect the URL’s. Am i correct?
Yes but the plugin automatically changes the filenames of the images etc.
Sory if it sound stupid but
What to do if I have extra wordpress installation in SUB FOLDER or SUB DOMAIN should I repeat the same steps for them to speed up to or it is not necessary ?
Thanks much for this article. I think I have it up and running!
Q: when I vist the cloudfront url, I see my full site, correct?
Won’t Google see this as duplicate content or is Amazon taking care of this?
Cheers!
It’s not duplicate as all the content is not coming from cloudfront. Anyway Google is clever enough with duplicate content to work out which is the main page nowadays and according to Google you don’t get penalised for duplicate content despite what some SEO sites say.
Hi,
Is it also possible to route the hole webseite to the CND.
For example my domain “my-domain.com” i create a CND and than i have this: d30qc2fl13p8n6.cloudfront.net
so now i can create a CNAME on the DNS
http://www.my-domain.com > d30qc2fl13p8n6.cloudfront.net
my-domain.com > d30qc2fl13p8n6.cloudfront.net
it works, and now my website is never down!
but is it a good idea to do this?
This only works if your site is a static site.
This might be a dumb question, but why not host the whole website in the amazon cloud?
ADVANCED: Once cloudfront is working you can also set up a c-name record so you don’t see the ugly ‘http://d26sdfsdfsdrftrgx2.cloudfront.net’ URL on every picture.
and step 3 refers to
3. Go to wordpress W3 Total cache and add the CNAME under ‘Offsite URL’ (Not under ‘Add C-NAME’!!!!) and Save settings.
Is there a way to achieve this with supercache plugin?
thanks,
Hi – I am using cloudfront along with CNAME & w3 total cache and everything is working fine –
mydomain.com (Main Site)
cdn.mydomain.com (CloudFront)
Both the versions are fully functional. Since it might create duplicate content issue on google search i just want to load image/js files from the cdn.mydomain.com and not the entire site from cdn.mydomain.com.
Is there a way to handle this? Temporarily i have used rel=canonical which will prevent duplicate issue.
Please let me know
How does it only pull /wp-content/ folder when I just mention mysite.com ?
I only want it to give /wp-content/ folder for cloudfront.
Thanks
THANKS!
I have followed your instructions closely but my url’s are not being rewritten to Cloudfront URL’s. However I pass the compatibility check on w3-cache and it says everything is okay, Any ideas? My url’s remain my domain name.
I think so…
http://www.binarymoon.co.uk/2010/11/timthumb-cdn-amazon-s3-good/
A quick and easy way to setup AWS CDN is by using https://wordpress.org/plugins/aws-cdn-by-wpadmin/
Yes, its free too :)
thanks a lot for sharing a nice information about how to use amazon to serve your WordPress Site.
I followed all of the steps successfully on Feb. 16. I recently looked at my Google Analytics and see that they flat-lined beginning from that date. Also, if I look at my website through Google Mobile testing, I see I have some javascript issues with blocking Google ads and a robots no follow that I did not put in place. I know I turned off some parts of Google auto-ads for the home page, but it is also showing issues with an opt-in script. I have no idea what to do next, is it a permissions setting in Amazon AWS for running scripts?
Cloudfront only cashes static elements (eg images, css) – all the scripts are still run from your own server as far as I understand. So I’m not sure what’s happening there?
Thanks for your fast reply. I will poke around, maybe I accidentally shut something off. It was just such a coincidence that it aligned with the time I set up AWS. If I uncover something productive, I will be sure to reply back!
I think the problem was with filters. I removed everything and it seems to be back online now. I am not so familiar with Google Analytics and have been spending time getting to know it better. It was just coincidence that I had setup Amazon Cloudfront on the same weekend I was working with Google Analytics. Thank you!