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/HTTPS 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.
Stripe for Invoice Rocket has been updated to 1.2
The new update to the Stripe extension adds an improved user experience for your customers and also some nice workflow enhancements.Keep reading
Invoice Rocket goes dark
If you’re the type who likes to work in the dark, or you just prefer dark themes in general, then the new Dark Theme option should be a welcome addition.Keep reading
How to make a living from WordPress development without violating the GPL
The General Public License allows users the freedom to run, study, share, modify or even sell the software. This extends to any software that uses the WordPress framework and APIs.Keep reading
The Invoice Rocket sidebar UX has been improved
This new interface tweak solves that problem by breaking the invoice sidebar up into three sections: Invoice Details, Chart and Tools, allowing you to tab between them.Keep reading
Invoice Rocket 1.2.9 update
Thanks to a nudge in the right direction from a new user, Invoice Rocket now complies with European tax regulations.Keep reading
Another preview of the new Task Rocket 5 interface
Although it may not look like much has changed since the last preview, a lot of work has been happening under the hood to make it this seamless.Keep reading
An early preview of the Task Rocket 5 interface
It’s still got a long way to go, but I thought it would share a little progress with the Task Rocket 5 interface update.Keep reading
Task Rocket 5 is in development. Here’s what you need to know.
I think it’s well worth investing time and resources into a re-build of Task Rocket instead, which will eventually be Task Rocket 5.Keep reading