aws-templateswordpress-production-ready

Configure WordPress to use a Content Delivery Network (CDN)

Using a Content Delivery Network (CDN) can speed up the end-user experience and, at the same time, reduce the load on your WordPress instances.

The easiest way to use a CDN with your site is with the Jetpack plugin, which is included and activated by default. As an alternative, use the W3TC plugin with the AWS CloudFront service as your CDN.

The following sections discuss both these alternatives.

Configure WordPress to use the Jetpack Site Accelerator

This guide assumes that you have already set up the Jetpack plugin. Refer to the Jetpack plugin instructions for more information.

The Jetpack plugin implements functionality for improving website performance via Site Accelerator, an image acceleration and editing service designed and built by Automattic. This platform offers the following services:

  • Static file hosting
  • Image hosting
  • Video hosting (only available on Jetpack commercial plans)
  • Lazy Loading for images
  • Enhanced Search (only available on Jetpack commercial plans)

Enable Site Accelerator

You can enable the Site Accelerator service from the WordPress administration panel, as follows:

  • Log in to the WordPress administration panel.
  • Select the “Jetpack -> Settings” menu item.
  • In the “Performance” section, click “Enable site accelerator” and “Enable Lazy Loading for images”.

    Configure Site Accelerator

Confirm that Site Accelerator is hosting your static files and images by browsing to your WordPress site and inspecting the CSS and image URLs in your browser console. If Site Accelerator is working, you will see the CDN URL for each resource instead of your domain’s URL or IP address.

Site Accelerator CDN in action

Configure WordPress to use AWS CloudFront

You can configure your WordPress site to upload static files and images to Amazon Simple Cloud Storage Service (S3) and use AWS CloudFront as your CDN.

Here are the steps you’ll follow in this tutorial:

  • Create an S3 bucket
  • Create an IAM user
  • Create a CloudFront distribution
  • Configure WordPress to use CloudFront as its CDN

The next sections will walk you through these steps in detail.

Step 1: Create an S3 bucket

  • Browse to the Amazon S3 console.
  • Click the “Create bucket” button.

    Create an S3 bucket

  • In the “Create bucket” dialog, enter a name for the bucket in the “Bucket Name” field, and select the region where your WordPress stack is running. Click the “Next” button to proceed.

    Configure bucket

  • On the “Configure Options” page, tag your bucket so you can easily identify its resources in the future. Click the “Next” button to proceed.

    Tag bucket

  • On the “Set permissions” page, set the permissions as shown below. Click the “Next” button to proceed.

    Define bucket permissions

  • On the “Review” page, review the details of the S3 bucket and click “Create bucket”.

    Review and create bucket

Step 2: Create an IAM user

  • Browse to the Amazon IAM console.
  • Click the “Add user” button.

    Add IAM user

  • On the “Set user details” page, enter a name for the user in the “User name”, and select “Programmatic Access” as the “Access Type”. Click the “Next” button to proceed.

    Configure IAM user

  • On the “Set permissions” page, click the “Attach existing policies directly” link and add the policies “AmazonS3FullAccess” and “CloudFrontReadOnlyAccess”. Click the “Next” button to proceed.

    Define IAM user permissions Define IAM user permissions

  • On the “Add tags” page, tag your IAM user so you can easily identify it in the future. Click the “Next” button to proceed.

  • On the “Review” page, review the details of the IAM user and click “Create user”.

    Review IAM user details

  • On the resulting page, note the user “Access key ID” and “Secret access key”:

    Obtain IAM user keys

Step 3: Create a CloudFront distribution

  • Browse to the Amazon CloudFront console.
  • Click the “Create distribution” button.

    Create CloudFront distribution

  • On the “Select a delivery method for your content” page, select “Web” as delivery method and click the “Get Started” button.

    Define delivery for CloudFront distribution

  • On the “Create Distribution” page, select the S3 bucket created in Step 1 as the “Origin Domain Name”,

    • Set the “Viewer Protocol Policy” option to “Redirect HTTP to HTTPS”.
    • Set the “Compress Objects Automatically” option to “yes”.
    • Click the “Create Distribution” button at the bottom of the page.

    Configure CloudFront distribution Configure CloudFront distribution

  • Note the CDN “Domain Name” once the distribution state changes to “Enabled”, as shown below:

    Obtain CloudFront domain name

Step 4: Configure WordPress to use CloudFront as its CDN

  • Log in to the WordPress administration panel.
  • Browse to the “Plugins” menu page and ensure that the “W3 Total Cache” plugin is activated.
  • Activate the plugin by clicking the “Activate” link.
  • Browse to the “Performance -> General Settings” page.
  • In the “CDN” section, enable “CDN” and set the “CDN Type” field to “Amazon CloudFront”. Click the “Save Settings and Purge Caches” button.

    Define CDN details

  • Browse to the “Performance -> CDN” page.

  • In the “Configuration: Objects” section,

    • Set the “Bucket” option with the name of the S3 bucket created in Step 1 and the corresponding AWS region.
    • Set the “Access key ID” and the “Secret key set” options with the values noted in Step 2.
    • Set the “Replace site’s hostname with” option with the CDN domain name noted in Step 3.
    • Click “Test S3 upload & CloudFront distribution” to ensure everything works as expected.
    • Click “Save Settings and Purge Caches” button.

    Configure CDN access

  • Once the CDN is configured, a message like the one below will appear at the top of the page. Click on each of the suggested links to upload the static files and images to the CDN.

    Upload content to CDN

  • A dialog like the one below will appear for each kind of content. Click “Start” to upload the content (this may take some time).

    Upload content to CDN

Confirm that CloudFront is hosting your static files and images by browsing to your WordPress site and inspecting the CSS and image URLs in your browser console. You should see the CloudFront URL for each resource instead of your domain’s URL or IP address.

CloudFront CDN in action

Last modification February 8, 2019