If you want to find out how to setup a CDN in WordPress, you’re at the right place!
I’ve been experimenting with CDNs (Content Delivery Networks) in WordPress over the last couple of months on a few different WordPress powered blogs and websites to test the increase in page speed and site load times for website optimisation purposes.
There has been news circulating around the social networks that indicates that there has been a large increase in active sites using CloudFront, which according to this blog post is now in excess of 20,000 active CloudFront customers.
I recently wrote a blog post on how to setup Cloudflare in WordPress to speed up your website, so I created this guide on setting up a CDN in WordPress using Amazon CloudFront and the W3 Total Cache plugin for anyone that is interested in finding out how.
How to setup a CDN in WordPress using Amazon CloudFront and W3 Total Cache
Step 1: Register for CloudFront via Amazon Web Services (AWS)
Go to the Amazon Web Services website.
If you don’t have an Amazon.com account, you’ll have to sign up for one first. If you already have an account, use your Amazon.com credentials to create an Amazon Web Services (AWS) account.
In order to use AWS, you will have to provide valid credit card details when creating your account. Pay only for the data transfer and requests that you actually use. Amazon CloudFront passes on the benefits of Amazon’s scale to you. You pay only for the content that you deliver through the network, without minimum commitments or up-front fees.
Pay only for what you use! There is no minimum fee. Estimate your monthly bill using the AWS Simple Monthly Calculator. For a rough idea as to pricing, see the table below:
In order to complete the Amazon Web Services sign up process, you’ll have to verify your identity with a telephone number.
It’s 3 easy steps: provide a telephone number, you’ll be called back (and asked for a code that has been sent to you) and then – once verified – you can review your account details to proceed.
Your account activation process will then begin activating your settings so that you can begin using Amazon CloudFront.
You’ll be notified via email once the verification is complete, and then once verified, you’ll have access to your Amazon Web Services account’s dashboard. Click on “Amazon CloudFront”.
You’ll be taken to your AWS Management Console for Amazon CloudFront fro which you can manage your distributions.
NOTE: Before you go any further in Amazon CloudFront, you’ll need a CNAME record setup on your domain hosting account. I recommend that you you set this up prior to creating your CDN distribution in Amazon CloudFront, as you’re going to need your CNAME record details to setup the service. Some of my domains run on a cPanel based admin interface so if you need to learn how to, read my short blog post on how to setup a CNAME record in cPanel.
Click on “Create distribution”.
You will be asked what type of delivery method you’ll be using (e.g. Download) as well as the origin domain name (i.e. yourdomainname.com) and the sub-domain you’ll have your CDN running on, etc.
Once you’ve done that, you’ll be taken back to the dashboard and you will notice a new domain name created for your distribution – it will look like xxxxxxxxxxxxxx.cloudfront.net – which is the address you’ll be using when creating your CNAME record in cPanel.
Your dashboard will then display your distribution ID, status, domain name and other information you’ll require when setting up Amazon Cloudfront as a CDN in WordPress.
Step 2: Configure W3 Total Cache to use Amazon CloudFront as a CDN
Go to the “Performance” menu item – only displayed if you have installed the W3 Total Cache plugin and are running version 3.3 – in your WordPress installation to expand the visible options.
From here you’ll be able to setup and configure your new Amazon CloudFront distribution’s details.
In the “Configuration” section, input details of Amazon CloudFront distributions access key ID, secret key, cloudfront.net domain name, CDN and origin server.
Other optional settings include not replacing URL’s for logged in administrators, setting he cookie domain to your origin domain as well as a section where you can specify which file types to import.
Once you’re done, click on the “Save all settings” button and then purge the W3TC plugin cache. If you have successfully configured your Amazon CloudFront CDN, you’ll be able to see so at the top of your CDN settings page in W3 Total Cache.
That’s it! You’ve now successfully setup a CDN in WordPress using Amazon CloudFront and the W3 Total Cache plugin.
Has setting up your CDN improved your WordPress powered websites page speed?
You can find this out by enabling the Google Page Speed API in the “General Settings” of W3 Total Cache.
NOTE: If you don’t have a Google Page Speed API key, you can get on on the API’s console.
If you have specified and enabled W3 Total Cache to use the Google Page Speed API, you’ll be able to measure your page speed rating which can be displayed on your WordPress dashboard.
For this specific site installing Amazon CloudFront as a CDN boosted the test domains page speed report score by 4 points – from 88 to 92 points. A 4 point increase is not bad as far as I’m concerned
NOTE: By no means will CloudFront exclusively be able to improve your page speed report as the results will depend on what theme you’re using, your hosting provider, hosting setup, resources you use on your domain and several other factors. The Google Page Speed report in WordPress will allow you to identify and fix the elements which slow your site down.
Latest posts by Pedro Da Silva (see all)
- Google Analytics Advanced Segments: 96 Useful Organic Search Segments for European Markets - 7 December 2014
- Conversion Rate Optimisation Wrap-Up – October 2012 - 31 October 2012
- Google Search Algorithm: 4 Updates In 2 Weeks - 10 October 2012
- SEO “How To”: Useful Posts Published In September 2012 - 3 October 2012
- Streamzoo Is Better Than Instagram - 14 September 2012