When it comes to SEO and site speed, slow and steady does not win the race. Page load time is a huge factor not only in search engine rankings, but user experience as well (especially on mobile devices).
There are a lot of variables affecting how fast your blog loads, but if you’re already hosting your site with Managed WP hosting company (like my favorite, Flywheel) and doing basic things such as resizing images, the next step is to use Amazon Web Services for even further optimization.
AWS S3 is cloud storage for your site’s files (in this case, images) to a remote server. Cloudfront is their content delivery network, or CDN, which connects to your S3 cloud storage “bucket” and serves the images to visitors across a wide network of fast servers all over the globe, ensuring the quickest download times. These services are extremely beneficial and affordable. Using it on my site only costs about $2 per month.
This tutorial will walk you through setting up Amazon Web Services S3 and Cloudfront integration for your self-hosted WordPress blog to save bandwidth and speed up your site.
1) Install and activate the free Amazon Web Services plugin.
2) Install and activate the free WP Offload S3 Lite plugin.
3) Create a free Amazon Web Services account and then create a new user. Choose a user name and select “Programmatic access.”
4) Setup permissions for the user to manage files in S3, by selecting “Attach existing policies directly” and click on “Create policy.” Click on “Select” next to the create your own policy option. Give your policy a name and description. Then copy the following code into the “Policy Document” section.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:CreateBucket",
"s3:DeleteObject",
"s3:Put*",
"s3:Get*",
"s3:List*"
],
"Resource": [
"arn:aws:s3:::*"
]
}
]
}
5) Go back to the original window and add the policy to the user you are creating. Click on “Refresh” and you should see your new policy you just created at the top. Select that and click on “Next.”
6) Click on “Create user.”
7) Copy your access key ID and secret access key so you can use them in your WordPress plugin settings. In your dashboard, click on “Access Keys” under AWS and input the credentials you just created.
8) Create an S3 bucket to use. If you are not signed up yet with Amazon S3, you can signup here. Click on “S3 and CloudFront” under the AWS plugin settings and choose “Create bucket.” You can then select a region. Click on “Create New Bucket.”
9) Leave all the default settings checked (unless you use an SSL on your site and need to force https) and click “Save Changes”
Your WordPress Amazon S3 setup is now complete! Your images will now be copied to Amazon S3 storage when they are uploaded to your WordPress media library. To copy previously uploaded images, install, activate, and run the “Regenerate Thumbnails” plugin.
Now that your S3 bucket is integrated, let’s setup Amazon Cloudfront to speed up the delivery of your static images!
1) Go to the Amazon Cloudfront page and click Create Distribution followed by Get Started under the Web delivery method.
2) Click on the Origin Domain Name field and select your S3 bucket. Leave Origin Path blank and the rest of the settings in their default state.
3) Select Create Distribution. CloudFront will now migrate your files from the specified bucket to its servers. Wait until the status changes from “in progress” to “deployed” before you complete the next step.
4) After the status says deployed, copy the domain name to your clipboard (it will end in cloudfront.net) and go back to your AWS > S3 and Cloudfront WordPress settings. Turn on “Cloudfront or Custom Domain” and paste your domain path in the field. Save Changes, and you’re all set!