Fast loading of website is very important because no one likes to wait, and also because it is one of the ranking factor for search engines. So if you are thinking to boost the page loading time of your WordPress site then one solution is to use a CDN like Amazon CloudFront. Amazon CloudFront is a superb way to speed up your content delivery as Amazon has servers all over the world that distributes copies of files such as images, css, html, PHP, etc. All these static files can be stored and served from Amazon CloudFront servers. In this tutorial, you will learn how to set-up and install Amazon CloudFront with WordPress.
Amazon CloudFront can be used to deliver your entire website, including dynamic, static and streaming content using a global network of edge locations. Requests for your content are automatically routed to the nearest edge location, so content is delivered with the best possible performance.
Talking about the pricing, then Amazon CloudFront charges around $0.190 – $0.250 for first 10TB, per month. The costs depend on the traffic that your website receives and in most cases, you will be paying around $1-$4 per month, approximately. Do check out the pricing page to know about the costs in detail.
In a simple language, Amazon CloudFront CDN will serve content to the user from the nearest location. For example, a visitor from Singapore will be served static files from his nearest location which can be located anywhere in Asia. A visitor from United States will be served files from the U.S. server. No doubt, a CDN definitely speeds up website’s loading time.
Signing-up and Configuring Amazon CloudFront
Visit Amazon CloudFront and then sign-up for a new account. If you already have Amazon account, then sign-in.
After signing-in, click on Create Distribution button. In the select a delivery method for your content, click on Download and then on Continue.
Next, you’ll get a very confusing screen but don’t worry, you only need to make changes in two options.
- Origin Domain name: Enter your website’s URL.
- Origin ID: Enter a description for the origin. This description must be unique so that you can identify it.
Also notice the Alternate Domain Names (CNAMEs). We’ll get back to this option later.
Click on Create Distribution button.
Next, you’ll see the CloudFront Distributions screen. Note down the domain name URL from here. It will look something like this: dpjjmm28mn.cloudfront.net. This URL will be required when we’ll configure CDN in WordPress.
Configuring W3 Total Cache Plugin for Amazon CloudFront
Once you are done configuring Amazon CloudFront, it’s time to install the W3 Total Cache plugin. Install and Activate this plugin.
Go to Performance > CDN and scroll down to Configuration section. From here, you’ll need to fill out some fields. Keep this page open.
Go to Amazon’s Security Credentials page and then copy the Access key ID and paste it in your CDN configuration page. From Secret Access Key, click on Show and then copy that information and enter it in your CDN configuration page. You can also create a new access key by clicking on Create a new Access Key link.
Enter the first part of your CloudFront URL in the Replace site’s hostname with field (Refer below screenshot).
.
Click on Test CloudFront distribution to make sure that you have entered correct settings. If your settings are correct, you will get a message that says Test passed. Click on Save all settings.
Now, go to Performance > General Settings. Scroll down to CDN section and enable it. From the CDN Type, select Amazon CloudFront (from Origin Pull section as you can see in below screenshot).
To confirm if CDN is setup properly, check the URL of any image. It should be something like: http://dpijnsd34.cloudfront.net. This means that all of your static content is served from CloudFront and you are successful in implementing CDN to your site.
Setting up a CNAME for CloudFront (Optional step)
The URL definitely doesn’t look very good and it also has a negative effect from SEO’s point of view. You will want the image URLs to your own custom URL and not someone else’s. One more reason to change the URL structure is if in future you change your CDN provider, the URL remains the same.
So let’s create a CNAME so that instead of Amazon’s URL, you have the URL of your site.
In short, we are going to change this address: http://dpijnsd34.cloudfront.net to cdn.yoursite.com.
To do this, login to your cPanel (also known as web-hosting control panel). Find the section for Domains and click on Simple DNS Zone Editor.
In the Add a CNAME record:
- Name: Enter your desired address to serve CDN content from. This will be something like: cdn.yoursite.com, files.yoursite.com, images.yoursite.com, or any other URL.
- CNAME: Enter your cloudfront.net (full domain URL) here.
Finally, click on Add CNAME Record.
Now, go back to your CloudFront distributions page. Select a distribution and then click on Distribution Settings. From Generals tab, click on Edit. In the Alternate Domain Names (CNAMEs), add the CDN Name that you just created in the above step.
Go back to your WordPress site > Performance > CDN. In the number 1 field, enter the CDN name which would be something like cdn.yoursite.com. Once you do this, click on Save all settings button. Check out the image URLs on your site and they should now be changed to cdn.yoursite.com.
This tutorial may seem confusing at first, but once you understand all the steps clearly, it can be done under 15-20 minutes. If you are facing any trouble in following the above steps, simply comment below and I’ll try to help you.
Note: You can also use WP Super Cache plugin to configure Amazon CloudFront CDN in WordPress.
Just followed your tutorial, worked perfectly!
In the DNS panel of my host I was asked for the type of DNS record I wanted to add as well, which was obviously CNAME, but it’s something to pay attention to.
OK I just followed everything here. it was a bit tricky but I got it all done. How long does this stuff take to get all setup? My site looks like it lost all formatting and the like right now as I write this.
That shouldn’t take much time; try clearing the cache and then try to visit the site using some other browser. Some times it happens because of browser cache also, so try clearing that too.
I have done that and nothing is helping. Please let me know what the deal is.
I am not sure why this is happening. Contact your web host and explain them the problem. Even if that does not help, then you’ll need to contact the developer of the plugin.
Thanks for this tutorial. I’m using WP-Super Cache and all went good until I added the Cname records. Now the site is not properly being displayed.
Just went back through it and needed to add http: prefix to Wp-Super Cache Cname record. All good now. Hopefully I’ll get better performance metrics. I’m going to wait until wp-super cache generates a full set of cached files.