How to setup Amazon CloudFront with WordPress (step by step guide)

Faster site, is the key to success on the web, and it greatly improves the overall experience on your site, be it snappy browsing feel for your visitors, ability to serve more ads, higher Google search rankings and if you’re running a WordPress based store or selling something online then it genuinely boosts your conversions. Overall it totally does everything good to your site.

CDNs – Content delivery networks are considered to be the “one-shot solution” to instantly turbocharge your website for speed. Typically, when it comes to WordPress people without a doubt recommends MaxCDN, and yes it’s one of the best and easy to use CDN to charge your WordPress blog. But, there are also some other wonderful CDNs to arm your WordPress for speed, such as Amazon CDN CloudFront, it’s the World’s second most popular CDN network, after Akamai (Earlier, Amazon was used to use Akamai, for their e-Commerce site when CloudFront was launched in 2008.)

Why consider Amazon CloudFront for WordPress?

  • Second most popular CDN network after Akamai with a total 42 location of POPs (Points of Presence.)
  • POPs location in the US, Europe, Asia, Australia and South-America.
  • Great for Indian traffic with two new POPs in India, at Chennai and Mumbai to lower down the response time for your site’s traffic originating from India/Asia.
  • Support for both Pull and Push type content distribution to the CDN.
  • Custom CNAME branding, instead of a randomly generated CDN name.
  • Support for Access Logs (Charges extra.)
  • Pay per usage plans ( No fixed monthly rentals or any type of packages, you’ll be billed according to your consumed bandwidth.)
  • Affordable, if used wisely.

Drawbacks

No free support, you’ve to pay to get support from their support panel. However, there are forums to enable community support

Configuring Amazon CloudFront with WordPress (Step by Step)

What you would require.

1. A WordPress blog: www.yourblog.com

2. An Amazon web service account

3. Third-party plugin: W3 Total Cache

Amazon Cloudfront home panel

Log in to your Amazon Cloudfront web console at https://console.aws.amazon.com/cloudfront/home and click on the “Create Distribution” button. After clicking on, it’ll lead you to a first step (shown in the image below.)

Cloudfront 2 step

Here at first step you’ve to just select the delivery method for your site content, download or streaming. So, all you have to do is just select the download option and click to continue.

Blogosense ditribution

Now in this second step, you’ve to fill your “Origin Domain Name” here we had filled mine with Blogosense.com, and you’ve to fill it with yours for example yourblog.com. While in that second “Origin ID” field you’ve to define the value in order to distinguish multiple origins in the same distribution from one another.

For example, I’ve set it with CDN-Blogosense.com while, you can define it with anything you would like, such as AWS-yourblog.com or whatever you may like, but it should be unique.

Scrolling down further will lead you to “Default Cache Behavior settings,” here I recommend you don’t have to touch with any of the settings, as the default settings are optimized for higher performance. So just skip to next set of settings “Distribution Settings”

Distribution settings

(Click on the image for larger version)

Here you’ve to choose price class since Amazon Cloudfront has varied price class according to different regions so they charged according to the price class of an individual edge location, wherever it’s located. For detailed pricing table head over to this page at Amazon website.

You are free to choose “Only US and Europe Pops” or “Only US, Europe and Asia Pops” or simply the default “Use all Edge location.” I had chosen the default price class for the best performance.

Next comes the Alternate CNAME, if you don’t want your CDN domain to be a randomly generated “d27niupszbw.cloudfront.net” then you can define your own custom branded domain name.

Alike of mine, “cdn.blogosense.com, cdn1.blogosense.com and so on…” but why multiple subdomain CDN here? it’s because the initial goal here is to increase the pipeline performance in the browser by serving to parallelize downloads across hostnames.

And furthermore, leave every next setting to be the default, though if you want to view access logs then you can definitely turn on the “Logging” field but, make sure access to logs are charged and billed separately in the CloudFront, so use it accordingly.

distribution in progress

Now, after configuring every setting you may now click on the “Create Distribution” button and meanwhile, the CloudFront gets busy in distributing your distribution zone to its network you may head over to the next part of this tutorial.

Configuring CNAME for custom CDN branding

At this step, you’ve to click on that “i” button (Yellow highlighted) in order to get into the distribution settings of your newly created distribution zone.

Amazon Cname CDN

Once, you get in the distribution settings, select the highlighted Custom CDN name, which is automatically generated by Amazon and head over to your Cpanel account provided by your respective hosting company.

highlighted domain name

That’s it from the CloudFront end, and we’re now moving to the defining CNAME entries for your fancy brandable custom CDN subdomains from your CPanel.

dns editor

In my case, it was Hostgator and look for “Simple DNS editor” in your Cpanel and click on it.

New DNS editor

This is a fairly simple step, just select the domain you’re configuring the CDN for and make sure to fill the entries only under “CNAME record.” You’ve to fill two entries here:

  • Name: This is just the name of your Custom CDN. For instance, my custom CDN domain is cdn.blogosense.com, so I’ll enter just the “CDN” in my name field.
  • CNAME: Now under this field, we have to enter the Domain Name URL which we’ve copied from under the Amazon CloudFront Distribution settings. For example “dx1uibv0t6uov.cloudfront.net”.

Since we had created multiple custom CDN subdomain here, therefore we have to create CNAME entries for each so just repeat the process for all of them.

For example: cdn.blogosense.com, cdn1.blogosense.com, cdn2.blogosense.com, cdn3.blogosense.com. Make sure the CNAME values for each CNAME record will be the same.

Alright, after this step we’re done with configuring from the CPanel part and now we’re heading to the WordPress dashboard to the final step of setting up CloudFront using W3 Total Cache plugin.

Install W3 total cache

Well, we all know how popular W3 Total Cache is, amongst WordPress community and I guess it’s already installed on your blog alike of mine. In case, if it’s not installed then you’ve to search from the Install plugin menu from your WordPress Dashboard.

W3 total cache generic mirror

Now, under the “General settings” of W3 Total cache look for CDN tab, check the CDN feature enable and select “Generic Mirror” as your CDN type, then save the settings.

I know a lot of users will ask me why you’re not opting for the predefined “Amazon Cloudfront” type but, believe me, “Generic Mirror” type works without a single glitch and also enabling “Amazon CloudFront” as your CDN type will enable auto-purge cache feature automatically, which is not a good thing to set it on an auto-purge mode because under Amazon CloudFront, as the purge cache is not a free feature and you’ll be charged each time you purge the cache from the WordPress dashboard.

CDN settings WordPress Amazon

Finally, you’ve to get inside the CDN settings page from W3 Total cache tab, and replace the site’s hostname with the custom CNAME records that’s we’re created earlier. Just enter your custom domain names here and push the test mirror button, if you got green “Test Passed” message then, just go ahead and save all settings, and lastly, clear all the caches using “Empty all cache” feature from the W3 Total cache dashboard.

This is it, and your WordPress blog is now empowered with Amazon CloudFront CDN!

Before Cloudfront

Before Amazon Cloudfront

After Cloudfront

After implementing Amazon Cloudfront

If you’re stuck on to any of the steps under this step-by-step guide to configuring Amazon CloudFront for WordPress, then do let me know in the comments below.

P.S. I had not used minify feature of W3 Total cache to reduce the request count yet, but if implemented then I am sure the load time of my blog is going to be reduced even more.

2 thoughts on “How to setup Amazon CloudFront with WordPress (step by step guide)”

  1. I appreciate your detailed information.

    However, it would be much more helpful if you dated your posts so readers can tell how current the information is. This is especially important for blogs that offer technical information, which is always changing.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top