Best Way to Setup AWS CloudFront With WordPress

AWS CloudFront is an Amazon Web Service that supercharges your website speed by speeding up the static contents. Your WordPress website becomes super fast with AWS CloudFront. In this article, we will learn what is the best way to setup AWS CloudFront with WordPress.

I use a Free WordPress Plugin (WP Fastest Cache) to setup CloudFront. If you use any other plugin, you can follow the same steps for that too.

Note: I will not use AWS S3 in this tutorial because that is not required. I will setup CloudFront to serve files directly from WordPress to users.

Integrating CloudFront in WordPress will not only supercharge your website speed but also help in Search Engine Ranking. Search Engines will crawl pages faster than previously. Search Engine visibility will be increased. Users can access the web page on slow internet with low latency.


Before starting the tutorial, let’s understand some basic questions about CloudFront with WordPress.

What is AWS CloudFront

AWS CloudFront is an Amazon Web Service that handles static contents delivery. It distributes the static contents to all the edge locations (where AWS servers are located) around the world. Users from different locations get access to website static contents from nearest edge locations (servers).

Key Features of using AWS CloudFront

There are many advantages of using Amazon CloudFront. Here are a few of them:

  • Performance – Faster loading of static contents from anywhere in the world
  • Search Engine Visibility – Improved search engine visibility
  • Search Engine Ranking and Indexing – Faster Indexing in Search Engines
  • Security – Protection against various network attacks
  • Content Delivery Network – Access contents from the nearest server available
  • Low Latency – Access contents on slow speed internet
  • Cost-Effective – Pay for what you use

Speed up any website with AWS S3 and CloudFront.

Setup AWS CloudFront with WordPress

Let’s start with the tutorial and proceed to step by step setup of CloudFront in WordPress.

Setup AWS Account

Skip the step if you already have an Amazon Web Services account.

The very first step is to create an account at Amazon Web Services. Follow the steps and create account.

Create AWS CloudFront Distribution

Once the account is ready, head out to CloudFront service and click “Create Distribution” button.

Create CloudFront Distribution
Create CloudFront Distribution

Put your domain name in the “Origin domain” field. Choose Protocol as per your website protocol. If your website always runs on HTTPS then choose HTTPS only, if it can open on both- HTTP and HTTPS then choose Match Viewer and if it only works on HTTP then choose HTTP only.

Scroll down on the same page and go to “Cache key and origin requests” box. Choose “CORS-S3Origin” in Origin request policy field and CORS-With-Preflight in Response headers policy field (refer below screenshot).

CloudFront Distribution CORS Setup
CloudFront Distribution CORS Setup

Click “Create distribution” button at the bottom.

CloudFront Distribution Domain name
CloudFront Distribution Domain name

You get a CloudFront Distribution domain name upon successful distribution create. Copy the domain name. All your static files will be served from the same domain name.

Attach AWS CloudFront domain name with WordPress

We have completed more than half of the part. We just need to attach the AWS CloudFront domain name with WordPress and we are ready to go!

Login to WordPress Dashboard. Go to WP Fastest Cache plugin (if you use any other plugin then you can go to settings of that plugin).

Click “Other CDN Providers” button.

CloudFront Domain Setup in WP Fastest Cache inside WordPress
CloudFront Domain Setup in WP Fastest Cache inside WordPress

Paste the CloudFront Distribution domain name in the “CDN Url” field. Put your website domain in “Origin Url” field.

Note: Do not forget to put slash (/) in the last of both urls.

Click “Next” button while skipping everything as it is and choose “Finish” in last.

That’s it! You have successfully integrated AWS CloudFront into your WordPress website.

Conclusion

We learnt how to setup AWS CloudFront with a WordPress website which improves the website speed, improves search engine visibility and prevents the website from various network attacks.

With AWS CloudFront, you pay for what you use and the cost is very low so you do not need to worry about the pricing.

If you have any other website (except wordpress) and want to setup AWS CloudFront in that then follow my other article here.

If you are an Angular developer then you must read my articles on Angular.

Make sure to subscribe to my newsletter so you don’t miss any exciting articles on programming.

Leave a Reply

Your email address will not be published. Required fields are marked *