A Content Delivery Network (CDN) can speed up your website by:
There are many CDN vendors for you to choose from including the likes of Cloudfare and Bunny. This guide will show you how to configure your WordPress site to use the CloudFront CDN from Amazon Web Services (AWS).
CloudFront is a great choice as it has over 300 edge server locations, which means that no matter where in the world your visitors are coming from, there will be an edge server close to them.
CloudFront also makes it economical to get going, and for low usage sites, it could be totally free for you. Each month the first 1TB of outbound traffic is free. Traffic over 1TB is then charged per TB.
Being built within the overall Amazon Web Services network, you can also be sure that this is going to be a reliable, available and well-supported service.
This guide will document what you need to configure in CloudFront to use with your WordPress site that is not hosted at AWS itself. If you are hosting your WordPress site in AWS, you will likely need a slightly different configuration.
Once you have created or logged in to your AWS account, search for CloudFront and go to the CloudFront service:
You'll need to create a CloudFront Distribution. Go to 'Distributions' and click on 'Create distribution':
The following settings work well for me, depending on your configuration, you may need to change these. Give these a go first of all:
If you do not make these selections you may end up with errors stating that content has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Click on 'Create Distribution and the distribution will be created. It can take a few minutes. Copy the 'Distribution domain name' as that's what you'll need to enter in to LiteSpeed or other WordPress caching plugins:
If you have not done so already, install the LiteSpeed Cache WordPress plugin. There are many optimisation settings within LiteSpeed, but this guide will just focus on the CDN. Goto the LiteSpeed CDN page:
If you are using Google Fonts, it makes sense to host them in CloudFront along with your other files. I use Perfmatters alongside LiteSpeed:
On the Fonts tab:
The first thing to do is to purge the LiteSpeed cache. This is particularly important if are reconfiguring LiteSpeed. Once purged, go to your website, and open up your browsers developer tools:
Select 'sources' and if necessary refresh the page. Looking in the sources you should see the CloudFront distribution domain name and if you expand it out, you will see the content being served through CloudFront.