Step-by-step: Speeding up WordPress with Amazon Cloudfront CDN
Performance can make or break a website. Slow page loading times will not only affect the user experience but also potentially translate into missed business opportunities or reduced sales, assuming the user even stuck around long enough.
If that wasn’t enough motivation, consider that Google officially takes your page speed as a ranking factor and starting in July 2018, mobile searches will be included in their algorithm update. Loosely translated this means the faster your website, the better chance you’ll have of being discovered in search results.
Search ranking aside, if you’re reading this there’s a good chance all you want to do is get your WordPress website running faster, and this is where a CDN (Content Delivery Network) comes in. Content Delivery Networks can give the most meaningful increase in your website performance. I’ve personally built websites that have seen a 40% speed increase and page loads times of less than half a second just by serving all the assets from a CDN (your mileage may vary).
For the purposes of this tutorial we’ll need a couple of things:
- An Amazon Cloudfront account
It’s free for the first 12 months as long as you don’t exceed their free monthly quota of 50 GB data transfer out and 2,000,000 HTTP/http monthly requests.
- The WordPress plugin W3 Total Cache activated
You don’t need the pro version, although upgrading will give you a bunch of other performance benefits.
Before we get into the specifics, it’s a good idea to benchmark your website first and make note of the scores so that you’ve got something to compare with after you’ve finished this tutorial.
A few good tools:
- Google Pagespeed Insights
Arguably the most important diagnostic tool you’ll use. Your website (desktop and mobile) will be ranked for speed and optimisation, and advise on what needs to be fixed.
This is a dev tool baked in to Chrome. To access it, right-click anywhere on your page, select Inspect and click the Audits tab.
- Yellow Labs
Another tool that examines your website performance and makes suggestions for improvement.
There are several optimisation settings in W3 Total Cache but for the purposes of this article, we are strictly focusing on setting up a Cloudfront CDN because it is often the most overlooked.
Note: Google Pagespeed Insights might not give you a speed result (read their explanation if this happens to you) and so they recommend using Lighthouse when this happens.
Let’s get to work!
1) Create a bucket on Amazon Cloudfront
Click on the Services menu, and click on S3 (under the Storage heading in the sub-menu).
Click Create Bucket, enter a name for your bucket (your domain name is ideal so it’s easily recognisable later) and choose a Region that is closest to you.
Click on the main Services menu and select IAM (under the Security, Identity & Compliance heading).
Click on Groups in the left nav and then click the Create New Group button.
Enter a suitable group name (developers for example), click the Next Step button, tick the AdministratorAccess checkbox.
Click the Next Step button and finally click the Create Group button.
Click Users in the left nav, click Add User, enter a suitable User Name and tick the Programmatic access checkbox.
Click the Next Permissions button, tick the checkbox next to the group name you created (developers in this example) and click the Next: Review button.
Click the Create User button.
Important: You’ll now be presented with your Access Key ID and Secret Access Key. For convenience make a note of them somewhere. This is the one and only time you’ll be given access to your Secret Access Key, so click the Download CSV button store a local copy of it.
We are now almost finished with the Amazon interface, but we’ll come back to it soon for one final check.
2) Connect W3 Total Cache to Amazon Cloudfront
Go back to your WordPress dashboard.
In the left menu go to Performance -> General Settings and scroll down to CDN.
Check the Enable checkbox and under Origin Pull / Mirror choose Amazon Cloudfront.
Click the Save All Settings button.
In the left menu go to Performance -> CDN and scroll down to Configuration: Objects
Enter your Access Key ID and Secret Access Key. Click the Create distribution button and you should get a Created successfully response:
Now momentarily go back to Amazon, click on the main Services menu, click on Cloudfront (under the Networking & Content Delivery heading) and you will see your new distribution is in the process of being created (note the animated spinner). What’s actually happening here is all your website assets are being pushed to the Amazon servers (theme files, CSS, JS, uploads etc), and so depending on how big your website is this could take a while. For the Rocket Apps website it took around 15 minutes. When it is finished the status will change to Deployed, at which time you can move onto the next step.
Once your distribution status has changed to Deployed, go back to your WordPress Configuration: Objects screen.
If for some reason the site hostname field is empty (I’ve had this happen once) then you’ll have to manually enter it. Just go back to the Cloudfront page on Amazon that you were just on and copy the first part of the domain name (in my case it is d2r9vshc64jpcz)…
…and paste it into the Replace site’s hostname with field:
Now click the Test Cloudfront distribution button and if you did everything correctly, you should get a Test passed response.
Click the Save Settings & Purge Caches button – and you’re done!
Check that it’s working
Go to your website front-end and view the source. It’ll be very obvious that all assets are being served up by Cloudfront because all their URLs will begin with something like http://d2r9vshc64jpcz.cloudfront.net (yours will be different because your hostame is not the same as mine).
Test again to see the performance improvement
Run your website through the aforementioned testing tools (Google Pagespeed Insights, Lightbox and Yellow Labs) and you should see a considerable improvement.
W3 Total Cache has several other options to maximise the speed of your website, and even though they are outside the scope of this tutorial you should certainly make yourself acquainted with them.
wProject has launched and you can get it right now
As of today wProject is available for purchase, and there are implications for Task Rocket.Keep reading
wProject feature demonstration
Subtasks are arguably the biggest deal. As is often with any task, there can be a number of smaller tasks that need to be accomplished within it.Keep reading
Introducing wProject and what it means for Task Rocket
It’s been is a long time coming. Specifically, wProject is intended to be the successor to Task Rocket.Keep reading
Open Graphite Pro now has an enhanced Slack sharing option
With the release of 2.0.0 today, Open Graphite Pro has a new option to enable enhanced Slack sharing.Keep reading
When responsive design is not enough, wp_is_mobile() to the rescue.
While using responsive design for mobile presentation is the default philosophy for any web developer who cares about the web, it doesn’t solve some of the other problems.Keep reading
Task Rocket June Updates (v220.127.116.11)
Task Rocket has received an update to the contextual secondary navigation user interface. It’s about time.Keep reading