• Skip to main content
  • Skip to primary sidebar

Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

  • About
  • Contact
MENUMENU
  • Blog Home
  • AWS, Azure, Cloud
  • Backend (Server-Side)
  • Frontend (Client-Side)
  • SharePoint
  • Tools & Resources
    • CM/IN Ruler
    • URL Decoder
    • Text Hasher
    • Word Count
    • IP Lookup
  • Linux & Servers
  • Zero Code Tech
  • WordPress
  • Musings
  • More
    Categories
    • Cloud
    • Server-Side
    • Front-End
    • SharePoint
    • Tools
    • Linux
    • Zero Code
    • WordPress
    • Musings
Home » AWS, Azure, Cloud » Speed Up WordPress With Amazon S3 And Cloudfront (Part 1)

Speed Up WordPress With Amazon S3 And Cloudfront (Part 1)

By Ehi Kioya 4 Comments

With just a bit of extra effort, you could get significant page speed improvements on your WordPress website by using Amazon’s Content Delivery Network (CDN). This is because Amazon has robust servers all over the world that can serve your content much faster than the single shared hosting server that your WordPress site is most likely installed on.

This post assumes that you have the latest version of WordPress installed (Version 3.6 as of this writing) and that you have also installed the WP Super Cache plugin.

How It Works

Amazon has fast servers around the world and for a fee, they are letting people use their infrastructure to serve up copies of their own files such as text, pictures etc. These 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 Amazon Cloudfront. This speeds up your site in two ways:

  1. Amazon delivers your content real fast.
  2. The demand on your own server is reduced making it faster as well.

There are two ways you can use Cloudfront:

  • One way is to upload your WordPress files onto Amazon S3 and then get Cloudfront to retrieve your files from Amazon S3 as it needs them. This technique is explained further below.
  • The other way to work with Cloudfront is to tell Cloudfront to get the files directly from your site as it needs them. This second method is popularly called “Origin Pull”. It is explained in my next post here.

Pros And Cons Of Both Methods

The advantage of the first method is that if you ever change your WordPress host, your entire wp-content folder is stored off-site at Amazon S3, so you won’t need to copy your wp-content folder to your new WordPress installation. You can even upload images directly to S3 and then insert them into your WordPress posts.

The advantage of the origin pull method is that it’s easier and cheaper (saves all costs associated with S3 since you won’t be using S3 at all), and you don’t need to upload (or sync) the files to Amazon each time you create a new post or each time a file changes.

Step 0:
In both cases, the first step is to register for an Amazon Web Services (AWS) account. If you already have an amazon.com account, you can link to it for payment. As of this writing, Amazon is offering a free usage tier to all first time subscribers to help new AWS customers get started in the cloud. The free usage tier can be used for anything you want to run in the cloud: launch new applications, test existing applications in the cloud, or simply gain hands-on experience with AWS. This offer has been ongoing for quite a while now and it gives you one whole year to play with AWS for free. You might want to check out the offer here.
Note: A valid credit card is required for registration.

Method 1: Sync Amazon S3 With Cloudfront

Step 1:
Go to the AWS Console and select S3. Press the “Create Bucket” button.

AWS WordPress Cloudfront S3 Image 1

Step 2:
Add an appropriate name for your bucket. Bucket names must be unique across all of Amazon S3. Buckets are similar to Internet domain names. Just as Amazon is the only owner of the domain name Amazon.com, only one person or organization can own a bucket within Amazon S3. Once you create a uniquely named bucket in Amazon S3, you can organize and name the objects within the bucket in any way you like and the bucket will remain yours for as long as you like and as long as you have the Amazon S3 account. A good idea is to name the bucket using the domain name of the site it is for.

Step 3:
If your site was a static site, at this point, you could simply upload the site files to S3 and proceed from there. But since we’re dealing with a dynamic WordPress site in this tutorial, we need a way to sync your consantly changing files with your S3 bucket. Here is where the CDN Sync Tool comes in. Install and activate it.

Step 4:
Go here and grab your Access Key ID and Secret Access Key for AWS.

Step 5:
The settings for the CDN Sync Tool are pretty self explanatory. Enter the Access Key ID and Secret Access Key obtained in Step 4 above. Also enter the name of the S3 bucket you previously created. Save all your options and press the Sync button.

Step 6:
Go to your S3 bucket and confirm that all folders have been correctly populated. Go to wp-content and right click on the uploads folder. Click “Make Public” in the pop-up menu.

Step 7:
This isn’t absolutely necessary, but it is a good idea to create a CNAME record with your DNS service to route queries from your site to your distribution. This helps to maintain cleaner links in your page source. Most people use the sub domain of “cdn”. For example, if you view the page source on any page on this site, you will see http://cdn.ehikioya.com repeatedly. This appears instead of something like http://d3nt4jmz34ymkr.cloudfront.net

In this step, you decide if you will want to create a CNAME or not.

Step 8:
Now you create a distribution for your files in Amazon CloudFront. In the AWS Console, click the CloudFront tab and then click the “Create Distribution” button.

AWS WordPress Cloudfront S3 Image 2

Delivery Method should be Download. Choose Amazon S3 Origin and choose the appropriate bucket in the dropdown. Click continue. If you plan to create a CNAME, enter the CNAME value you plan to create. Most other stuff can be left at their defaults. Click “Continue” and then “Create Distribution”.

Step 9:
Now you will need to go to your DNS service website and create the CNAME you selected in the previous step. The CNAME should point to the actual Cloudfront domain name.

Step 10:
The last step is to enable CDN Support in WP Super Cache. Go to the settings for WP Super Cache and click the CDN tab. Check the “Enable CDN Support” box. Enter the full URL of the CNAME you just created (like this: http://cdn.ehikioya.com). If you did not create a CNAME, then enter the ugly Cloudfront domain name (like this http://d3nt4jmz34ymkr.cloudfront.net).

If you synced some directories to your S3 bucket that are outside of wp-includes or wp-content, you should enter them in the “Include directories” field. Save the changes and you’re in business!

To test that everything works, view the page source of your website. You should see that your static resources like images are now being pulled from the Cloudfront server. The URL of these resources will now contain your Cloudfront domain name or your CNAME as the case may be.

Note: DNS resolution may take a few hours. So your new CNAME may not become active immediately.

To read about the “Origin Pull” method that uses Cloudfront only (no Amazon S3), view my next post: Speed Up WordPress With Amazon S3 And Cloudfront (Part 2).

Found this article valuable? Want to show your appreciation? Here are some options:

  1. Spread the word! Use these buttons to share this link on your favorite social media sites.
  2. Help me share this on . . .

    • Facebook
    • Twitter
    • LinkedIn
    • Reddit
    • Tumblr
    • Pinterest
    • Pocket
    • Telegram
    • WhatsApp
    • Skype
  3. Sign up to join my audience and receive email notifications when I publish new content.
  4. Contribute by adding a comment using the comments section below.
  5. Follow me on Twitter, LinkedIn, and Facebook.

Related

Filed Under: AWS, Azure, Cloud, WordPress Tagged With: AWS, WordPress

About Ehi Kioya

I am a Toronto-based Software Engineer. I run this website as part hobby and part business.

To share your thoughts or get help with any of my posts, please drop a comment at the appropriate link.

You can contact me using the form on this page. I'm also on Twitter, LinkedIn, and Facebook.

Reader Interactions

Comments

  1. Jason Weber says

    September 27, 2013 at 4:57 am

    Hello. Thanks for publishing this article. As a cloudfront newbie (that’s how I found this … google search), I just had a couple of questions regarding your article.

    1- Do you recommend either WP Super Cache or W3 Total Cache as a WordPress plugin, or does that depend on your particular host? I’m with hostgator and just set up my CNAME records to cdn.occupyhln.org …

    2- Is creating a bucket necessary? All of the literature I’ve read says to create the distribution and then hook up your caching plugin to Cloudfront. But you mention buckets. When I create a bucket, all I can do is upload files from my hard drive; I don’t see how W3 Total Cache connects … the only instruction in W3 Total Cache is to set up a distribution.

    Thanks!

    Reply
    • Ehi Kioya says

      September 27, 2013 at 8:29 am

      Hi Jason,

      Thanks for finding my article 🙂

      With regard to your questions:

      1. I have a bias towards WP Super Cache (that’s what I use). But I can confirm that W3 Total Cache will also work here. So if you already have it installed, no need grabbing WP Super Cache.

      2. This is a matter of terminology. Whether you are creating a “bucket” or a “distribution” depends on what AWS technologies you are using. If you are working with the “S3 plus cloudfront” method (Method 1 as discussed in this article), you will need to create both a bucket and a distribution. But if you are working with the “cloudfront only” option (Method 2 discussed in the second part of this article here: Speed Up WordPress With Amazon S3 And Cloudfront (Part 2)) you only need to create a distribution.
      Buckets = Amazon S3
      Distributions = Amazon Cloudfront
      The reason why most of the articles you find only speak of creating a distribution is because, most people use the “cloudfront only” (also called “Origin Pull”) method.

      Recommendation:
      If you already have hosting like you do, and if your site is a dynamic site (with frequently changing content and/or database queries), use the “cloudfront only” method. It will save you cost and effort.
      You can read about the pros and cons of both methods in this article (just before the discussion of the first method).

      Reply
      • Jason Weber says

        September 27, 2013 at 8:33 am

        Wow, that really clears things up. My site is down at the moment (so much for Hostgator 99% uptime), but I was going to switch to WP Super Cache.

        I don’t really care which plugin it is — I just want whichever one gives me faster page load times.

        But thank you for explaining the difference etween buckets and distributions / Amazon S3 and Amazon Cloudfront, as well as the “origin pull” method … that’s what W3 Total Cache was asking for, and I didn’t know what that meant.

        Thanks again!

        Reply
  2. Boaz Ziniman says

    August 14, 2015 at 1:28 pm

    This is a good direction that can been improved even more.

    1. There is a plugin for WP that stores all your content in S3 natively from WP with no additional tools. I think it even has CloudFtont support built in. Look for S3 related plugins in the codex.

    2. You should try this with Zend Server AMI on AWS Marketplace. You will get so many features , including performance improvement using caching and better development using Z-Ray that you won’t understand how did you work before that.

    3. If you really need WP at scale, check my webinar at http://www.zend.com/en/webinars/recorded/show/2978_from+zero+to+cluster+in+15+minutes+building+scalable+php+apps+with+zend+and+amazon+web+services

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

23,733
Followers
Follow
30,000
Connections
Connect
14,568
Page Fans
Like
  • Recently   Popular   Posts   &   Pages
  • Actual Size Online Ruler Actual Size Online Ruler
    I created this page to measure your screen resolution and produce an online ruler of actual size. It's powered with JavaScript and HTML5.
  • How To Change A SharePoint List Or Library URL How To Change A SharePoint List Or Library URL
    All versions of the SharePoint user interface provide an option to change the title (or display name) of a list or library. Changing SharePoint library URL (or internal name), however, is not exactly very intuitive. We will discuss the process in this article.
  • WordPress Password Hash Generator WordPress Password Hash Generator
    With this WordPress Password Hash Generator, you can convert a password to its hash, and then set a new password directly in the database.
  • About
  • Contact

© 2022   ·   Ehi Kioya   ·   All Rights Reserved
Privacy Policy