How to Configure CDN with WordPress using Amazon Web Services (AWS) (with Video)

Configure CDN

Last updated - July 8, 2021

If you have a WordPress site, you know the importance of site performance in search engine ranking as well as in customer experience. There are several strategies to optimize the performance of your site and ensure good page load speed. As you know, using a content delivery network is one of the important strategies you can adopt to speed up loading of your pages. A content delivery network (CDN) will ensure that your web content is served from a location closer to the user. In this article, we will provide an overview on how you can configure CDN using Amazon Web Services (Cloudfront) for your WordPress site.

What is Amazon Cloudfront?

Amazon Cloudfront is a service part of Amazon Web Services that helps with your site performance. It makes use of a global network of data centers that will speed up the distribution of content to your users. Basically it will serve dynamic and static content including image files, html, CSS, JavaScript, etc., from a location closer to the user. This will ensure minimum latency in content delivery, and makes sure that your site has good page load speed.

Configure CDN
Amazon Web Services offers a range of services that you can use to manage your website more effectively.

Features

  • Globally distributed through a wide network of data centers to ensure the superior performance of your website.
  • Highly secure with built-in security features such as AWS Shield Standard, AWS Certificate Manager (ACM), etc. It also helps you manage custom SSL certificates without additional costs.
  • Customize the features of the CDN easily with the developer friendly interface of Cloudfront It also offers integrations with other tools and automation interfaces.
  • Access from a single console along with other popular services such as Amazon S3, Amazon Route 53, Amazon EC2, Elastic Load Balancing, and AWS Elemental Media Services.

Advantages of using Amazon Cloudfront

  • It will help you serve static content such as image files, JavaScript, CSS, etc., through the global delivery network and as a result reduces the load on your origin server. This means your users will have a superior experience while accessing your website.
  • Also, it can serve dynamic content faster with features like API Acceleration.
  • You will find different options to stream your video content smoothly. The CDN will cache the media fragments and reduces the load of the server.
  • With superior security features data throughout your network will be encrypted and
  • Data security will be ensured with advanced encryption and by providing access only selected components and services in your technology stack.
  • You will be able to customize the content delivery pattern based on your user behavior, and also can conduct A/B Testing.
  • Software updates will be cost effective and faster, ensuring a better customer experience on your website.
  • Cloudfront is effectively integrated with AWS infrastructure and helps you to use it easily with other services from a single dashboard. You can use Amazon S3, AWS Shield for DDoS mitigation, Elastic Load Balancing, etc. along with it easily.
  • For a WordPress site owner who is using Amazon Services, it is important to understand the process of integrating Cloudfront to WordPress site.

How to integrate Amazon Cloudfront CDN on your WordPress site?

Here is a look at the basic steps to configure CDN using Amazon Cloudfront on your WordPress site.

Step 1

You need to create an account with Amazon Web Services to integrate Cloudfront CDN on your WordPress site. You can create an AWS account for free and use a range of services that are part of it with certain limits.

Here are the steps:

  1. Provide your email and password, along with an AWS account name.
  2. Next, provide some personal information like your full name, phone number, country, and address.
  3. You need to provide your credit card information for billing. You won’t be charged for usage below AWS Free Tier limits. The free tier gets you 50GB of data transfer out and 2 million viewer requests each month for the first 12 months for Cloudfront.
  4. On the next step, you need to confirm your identity via a code sent through text or voice call.
  5. Finally, select a support plan for your account. You can choose between free Basic support, $29/month Developer support, and $100/month Business support.

 

Configure CDN
You can sign in to Amazon Web Services for free by entering your credit card information, and can use a range of Free tier services for 12 months.

Step 2

We’ll be using the Amazon AWS CDN plugin to integrate Cloudfront CDN with our WordPress website. The plugin works through access keys generated from your AWS account.

However, root user access keys provide unrestricted access to your entire AWS account. Therefore, AWS recommends creating a new IAM user with limited permissions and generating access for that user instead.

To create an IAM user, click on the account name in the top right of your AWS dashboard. Select the “My security credentials” option from the dropdown.

From here, head to the Users section in the sidebar and click “Add user”. Set an appropriate username to the user and only allow “Programmatic access” in the access type. Click Next when you’re done.

The next page will provide you three options for setting permissions. Select the third one, named “Attack existing policies directly”. Below, use the search bar to filter the options for the phrase “cloudfront”.

Setting permissions for the IAM user.

From the results that pop up, enable the “CloudFrontFullAccess” option and click Next. You can ignore the tags section and head to the next page immediately.

Finally, review the details and click “Create user”. The next page will provide the access key ID and the secret access key assigned to the user. Copy them down and save them securely. You can also download the CSV file containing the access keys using the link provided.

The access keys generated for the IAM user.

Step 3

We’ll be using the Amazon AWS CDN plugin to simplify the process of integrating CloudFront CDN with our WordPress website.

After installing the plugin, head to the WPAdmin AWS CDN tab. Here, provide the access key ID and the secret key you received in the previous step. Also, select a price class that’s applicable to you and click the “Create distribution” button.

The Amazon AWS CDN plugin simplifies the CloudFront+WordPress integration process.

You can check the progress by clicking the “List AWS distribution” button. And finish the process by entering the AWS assigned sub domain in the CNAME box.

Later on, you can also disable the CDN or reset the whole configuration if you need to.

Step 4

As a final step, you can verify if the content is served from Cloudfront’s cache. Use the incognito mode of your browser, or open the site using an alternate browser to verify this. Also, you can click the inspect mode of your browser to make sure that the alternate Cloudfront domain name is serving the resources.

configure CDN
You can use the Inspect option of the browser to see if the alternate domain name is serving resources like images to your users.

Hopefully, this article has provided an overview on CloudFront and how to configure CDN on your WordPress site. If you have a query regarding this, please leave us a comment below.

If you prefer a video version, please check the video below:

Further reading

LEAVE A REPLY

Please enter your comment!
Please enter your name here