Serve WP Images from Amazon S3 and Boost Performance

Serving WordPress images from Amazon S3 can be a game-changer for your website's performance.

By offloading your images to Amazon S3, you can significantly reduce the load on your server and improve page load times. This is especially important for websites with a large number of high-resolution images.

Amazon S3 is a highly scalable and durable object storage service that can handle large amounts of data, making it an ideal solution for storing and serving images.

To serve your WordPress images from Amazon S3, you'll need to set up and configure the necessary tools. You can use the WP Offload S3 Lite plugin, which is free and has over 30,000 active installs with a 4 out of 5-star rating.

The plugin is lightweight, weighing in at just 204 KB. It automatically copies files from your WordPress site to Amazon S3 as they're uploaded to the media library. You can then configure settings to control how files are handled.

First, you'll need to configure the plugin settings. The Enable/Disable the Plugin section is where you'll find the settings. The first setting, Copy Files to S3, is toggled on by default, which means all media items will be copied over to your Amazon S3 bucket when you upload them.

The Rewrite File URLs setting controls whether media files are served from your web server or Amazon S3. This setting is also toggled on by default, and you can preview the new URL your media items will have in the next section.

Here's a list of key settings to consider:

You'll also need to configure AWS settings in WordPress and activate the plugin. This involves setting the access key and secret key in the wp-config.php file and installing the plugin.

To set up AWS for serving WP images from Amazon S3, you'll need to create an S3 bucket. Set up an S3 bucket where the image can be stored by following the steps in the AWS Console. Choose “Create template in Designer” and click on the “Create template in Designer” button.

You'll need to create an IAM user account, establish a policy that grants access to the S3 bucket, and attach the policy to the user. Utilizing CloudFormation is quite straightforward. Simply go to the AWS Console and navigate to the CloudFormation section.

A JSON template is provided to create the necessary resources. Copy the given JSON template into the “Template window,” and a visual representation of the resource diagram based on the template will appear. Next, click on the “Create stack” button located in the upper right corner.

To explore all the available options for image requests, go to the `DemoUrl` value found in the CloudFormation output tab. To create a new stack using the uploaded template, follow these steps:

Once the stack is successfully created, go to the “Output” tab, where you’ll discover several variables generated from the created resources.

You can enable a CDN to speed up delivery of your assets by checking the CloudFront or Custom Domain section.

To get started, you'll need to setup a CDN, such as CloudFront, KeyCDN, or MaxCDN, for your Amazon S3 bucket.

Here are some tutorials to help you get up and running: Setup CloudFront for Amazon S3Setup KeyCDN for Amazon S3Setup MaxCDN for Amazon S3

Once you've set up your CDN and obtained the CDN URL, you can input it into the custom domain field.

Serving images through a CDN, such as AWS Serverless Image Handler, can reduce latency and lower data transfer costs.

To do this, you'll need to copy the ApiEndpoint value from the CloudFormation output and paste it into your plugin code.

This will enable dynamic size requests for each image, resulting in improved flexibility and efficiency.

To configure the plugin, you'll want to start by enabling the Copy Files to S3 setting, which is toggled ON by default. This will ensure that all media items are copied over to your Amazon S3 bucket when you upload them to the WordPress Media Library.

The Rewrite File URLs setting is also important, as it controls whether or not media files are served from your web server or Amazon S3. This setting is toggled ON by default, which means your media items' URLs will now be served from Amazon S3 instead of your web server.

You can also integrate a CDN with your Amazon S3 bucket using the CloudFront or Custom Domain setting, which is toggled OFF by default. This will allow you to use a CDN to serve your media files, which can improve performance and reduce latency.

Here are the key settings to keep in mind:

By configuring these settings correctly, you can ensure that your WordPress media files are being served efficiently and effectively from Amazon S3.

To configure your plugins, start by installing the WordPress plugins that will enable integration with Amazon Web Services.

The first plugin to install is the one by Delicious Brains, which can be found by searching for "amazon web services" in the WordPress plugin repository.

Activate the plugin after it installs.

Next, install the WP Offload Media Lite plugin by searching for "wp offload media" in the plugin repository.

Activate the WP Offload Media Lite plugin after you install it.

To integrate WP Offload Media with Amazon S3, create an Amazon S3 account and name your bucket something descriptive. Choose a region for your bucket that matches the region your website's data is stored in, and consult your hosting company if you're unsure.

You'll need to install the WP Offload Media Lite plugin and activate it, as well as install the Amazon Web Services plugin from Delicious Brains. The WP Offload Media Lite plugin will then allow you to configure settings for your S3 media items.

In the WP Offload Media settings, you can toggle settings such as Copy Files to S3, Rewrite File URLs, and CloudFront or Custom Domain. The Copy Files to S3 setting is toggled ON by default, which means all media items will be copied over to your Amazon S3 bucket when you upload them to the WordPress Media Library.

You can also configure settings such as Path, which is toggled ON and already filled in for you, and Year/Month, which is toggled ON by default and organizes your S3 media items by year and month. The Force HTTPS setting is toggled OFF by default, but you can toggle it ON if you want to force S3 media items to use HTTPS no matter what format the request is using.

To declare your custom domain, type it in via your WordPress admin in the WP Offload Media plugin settings. This will make your new images accessible via your custom domain URL.

The Remove Files from Server setting is toggled OFF by default, but toggling it ON can reduce the amount of space media items take up on your server's storage drive. However, this setting may have compatibility issues with other plugins you use on your site.

Finally, be sure to click Save Changes to save the changes you made to the settings page. This will ensure that S3 media items have unique file paths, especially if you use a CDN.

To serve WP images from Amazon S3, you need to generate user credentials. You can do this by creating a policy granting access to a specific bucket, then creating a user group and a user with access to the bucket.

To avoid giving access to the whole S3 instance, follow the instructions on a specific page. This will help you set up the plugin on WordPress.

You'll need to generate an ACCESS KEY ID and SECRET ACCESS KEYS, which you can find in the user's profile on Amazon via SECURITY CREDENTIALS.

You can generate a free SSL certificate using AWS Certificate Manager, which is a great way to serve your images via https. Ideally, create the certificate before creating your Cloudfront distribution to avoid another deployment.

AWS Certificate Manager used to require a bucket in USA East / N. Virginia, but this is no longer the case. I've successfully created SSL certificates for buckets hosted in the EU.

It will take a while to complete the deployment of the Cloudfront distribution, but you don't have to wait for the end of the procedure to connect the Cloudfront URL via a CNAME to your custom domain. Don't forget to add the DOT at the end of the Cloudfront URL when declaring your CNAME.

You can check the propagation of the CNAME using WhatsmyDNS.net. This is a useful tool to verify that your CNAME is working correctly.

To generate user credentials, you'll need to create a policy granting access to a specific bucket, which you can do by following the instructions on a certain page.

This will help avoid giving access to the whole S3 instance. You'll need to create a user group and a user enjoying access to the bucket for the setup of the plugin on WordPress.

To get started, you'll need to open the user's profile on Amazon via SECURITY CREDENTIALS to generate the ACCESS KEY ID and SECRET ACCESS KEYS.

You'll need to type in these credentials in the plugin settings in your WordPress admin or add a piece of code including these credentials to your wp-config file using ftp.