Jun 30

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

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

32 Responses to “How to use Amazon Cloudfront to speed up your wordpress site.”

  1. Garish Wasil says:

    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.

    • admin says:

      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.

  2. Paul says:

    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

    • wayne says:

      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.

  3. Jesse says:

    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

    • admin says:

      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.

  4. Chris says:

    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!

  5. Mrac says:

    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.

    • Wayne says:

      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.

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

  7. NearlyNubile says:

    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.

  8. Brad says:

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

  9. Tony says:

    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

  10. Gus says:

    thank you very much for this amazing and complite tutorial

  11. Giorgos says:

    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?

  12. shoppinglk says:

    I followed everything correctly. I also setup cnames for my images and media..now everything works fine…thanks

  13. Soan says:

    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?

  14. Wayne says:

    Yes but the plugin automatically changes the filenames of the images etc.

  15. TomYx says:

    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 ?

  16. Dennis says:

    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!

    • Wayne says:

      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.

  17. Linda says:

    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?

  18. Paul says:

    This might be a dumb question, but why not host the whole website in the amazon cloud?

  19. Laz says:

    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,

  20. Rishi says:

    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

  21. Satya Prakash says:

    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

Leave a Reply

    (Ads provided by Google Adsense.)

More Articles

Jan 16
Jan 05
fuji xerox docuprint c4350
Jan 03
Sep 22
Jan 09
numbers
Copyright © 2013 Wayne Connor. All rights reserved. | Hosted on bluehost.com Click here to find out why.
preload preload preload
css.php