Configuring WordPress with Amazon CloudFront and LiteSpeed Cache

Introduction

A Content Delivery Network (CDN) can speed up your website by:

• delivering content from 'edge servers' which are close to your visitors e.g. if you server is in the UK and your visitor is in Australia, a CDN will likely deliver the content to your visitor from an edge server in Australia
• reducing the load on your web server. As most content will be delivered from the edge servers, your web server has to do much less work

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).

Why Choose AWS CLoudFront CDN?

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.

AWS CloudFront Configuration

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:

Creating a CloudFront Distribution

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:

• Origin Domain: Enter the URL of your WordPress site
• Protocol: I only use HTTPS so am choosing HTTPS only
• Minimum Origin SSL protocol: I leave this as the default of TLSv1

• Name: Give a meaningful name e.g. the name of your website
• Enable Origin Shield: this is optional, but I enable and choose the location closest to my host server (London)
• Additional Settings: I leave these all as the default

• Compress objects automatically: I leave the default of yes
• Viewer protocol policy: I only need HTTPS
• Allowed HTTP methods: Select the third option

• Select 'Cache policy and origina request policy'
• Cache policy: CachingOptimized
• Origin request policy: CORS-CustomOrigin
• Response headers policy: CORS-With-Preflight

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.

• I use the default settings above

• I use the default settings above
• Description: an optional setting, but I set it to the name of the website

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:

Configuring LiteSpeed Cache with CloudFront CDN

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:

• QUIC.cloud CDN: OFF
• Use CDN Mapping: ON
• CDN URL: Enter the CloudFront distribution domain name you copied from the previous step
• Leave everthing else as default settings

• Original URLs: Enter the URL to be served through the CDN, this is your website URL and needs to be entered in this format:
  • //domainname.com/
  • Note the trailing /

• Exclude Path: I have a few paths I do not want to go through the CDN, so add them in here

Hosting Google Fonts in CloudFront

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:

• Display Swap: On
• Local Google Fonts: On
• CDN URL: the Cloudfront distribution domain name

Checking CloudFront Is In Use

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.