Ultimate Guide To Speed Up WordPress With Digital Ocean, Amazon S3 and Cloudflare

Monster Guide

Our MONSTER Guide on How We Increase Website Speed With Wordpress, Cloud Hosting, Cloudflare and Amazon S3

In the never ending search to find a solution to provide a faster, secure, and funner experience for our website and our clients we've bounced from web host to web host. After a rough battle with multiple hosts we've finally found a solution that provides the speeds we look for while keeping costs down and websites secure.

Want to learn how we do it? Then click below to get started!

Get Started

Wordpress Speed Guide

But first....A Disclaimer

We don't claim this guide is perfect, in fact most of you can probably guess that there are a million ways to do this and achieve the same (or better) results. Our goal when we set out to write this was to create a solution that was fast, reliable and cost effective which we feel we've accomplished thanks to the choices and providers we've chosen.

While this probably isn't for the non-tech it can easily be accomplished if you can follow directions (or at least follow our directions). If you still wanna dive in then click below to get started setting up your Amazon S3.

Lets ROLL!

Amazon S3 Setup

Things You'll Need:

Helpful LInks

The first part of the process is setting up an account with Amazon Web Services. Amazon AWS takes a little while to get used to but we've found the prices and speeds to be top notch. While you can use the CDN associated with the AWS we are simply using Amazon S3 to host and serve all of our images instead of saving them on Digital Ocean (our cloud web host) to keep storage space their at a minimum. If you showcase a lot of images on your website it's probably a good idea not only to free up some storage space but also use the power of Amazon for better speeds to display your images. Because we're looking to provide affordable web design and hosting we should follow our easy steps below to get started:

Once you've registered for your Amazon AWS account you'll want to visit the S3 section of it under the services tab.

Once logged in and on the Amazon S3 section of AWS you should be greeted with a button that provides you to "Create Bucket". Simply click the blue button to get started. What we typically do is keep the same naming conventions for all our buckets, which as you can see in the image our bucket name is "files.yourdomainname.com", where yourdomainname.com is the domain you're setting this up for (this doesn't have to be the same as what we use, for example you can use images.yourdomainname.com but if you do change this please remember so as the rest of the guide is tailored to this naming convention). In the popup box we enter our bucket name and inside of Region we typically choose a location of where our website is. For example, we primarily develop sites for companies in Canada so our bucket region will be Canada.

After you've entered in your data like below click Next.

In the properties screen of bucket creation we simply click Next

In the set permissions screen we simply click next as well (we'll add to this).

Finally review your settings and simply click "Create bucket".

Congratulations, we've created our first bucket on Amazon S3. From here we want to configure a few things and create a bucket policy for usability and security. This is incredibly easy. First click on the bucket you just created inside Amazon S3. You should be greeted with a screen similar to the image below.

From here we want to do two things. The first is to setup a bucket policy, to do so click the "Permissions" tab followed by the "Bucket Policy" button. You should see an empty text area box which we will fill by using the Amazon Bucket Policy Generator which you can use by clicking here.

Listed below are the settings for our bucket policy.

  • Type of Policy: S3 Bucket Policy
  • Effect: Allow
  • Principal: * (enter in an asterisk)
  • AWS Service: Choose Amazon S3 from the dropdown.
  • Actions: From the dropdown list select "GetObject"
  • Amazon Resource Name (ARN): Enter in the text box "arn:aws:s3:::files.yourdomainname.com/*" (without quotes). The files.yourdomainname.com should be your bucket name we created earlier in this section. If you changed it make sure to match it.
  • Now just click Add Statement
  • Finally you should see a "Generate Policy Button".
  • Click it and you'll be greeted with some JSON code which you can simply just copy.

From here we simply copy the JSON code and go back to our bucket policy screen within Amazon S3. Copy and paste the code into the empty textarea.

The final step can be optional but we typically change some settings within the "CORS Configuration". To access it simply click the button right next to Bucket Policy. The only thing we change is changing the asterisk (*) inside of it to match our domain(s).

Congratulations we've completed the Amazon S3 setup, we will have to pop back in when we install our Wordpress plugins to create an IAM username and password so feel free to keep Amazon AWS open if you're continuing on with this guide.

Back to Contents Next section

Web Hosting Setup

Things You'll Need:

Now that we've got Amazon S3 setup we want to take some steps to setup our web hosting account and get Wordpress installed on it. Don't worry to much about configuring your website we just want to have our Digital Ocean droplet created and Wordpress installed. Again you don't have to choose our choices but Digital Ocean and Serverpilot provide a beautiful combination. If you're building websites for small local businesses you won't need much more then the $5 a month droplet (we're running everything through Amazon S3 and Cloudflare). The nice thing about Digital Ocean is if you do see an increase in web traffic and the $5 droplet can't handle it we can do a simple upgrade to the next level and so on and so on. You could certainly use one droplet for multiple sites but we prefer to have them all on a separate IP for maintenance and SEO reasons.

This step is to simply setup and install Wordpress on Digital Ocean, don't worry to much about configuring your website at this point, we'll do that later on below.

If you're looking to integrate this into your exisiting website setup before you do anything be sure to backup your Wordpress website. We're big fans of using the All in one WP Migration tool. It's free (up to a certain website size) and works beautifully when transferring websites to a new host or reinstalling.

Ready to get started? Let's continue!

The first step you'll want to do is create both a Digital Ocean and ServerPilot account. Once you've set that up the next step is to create our Droplet inside of Digital Ocean. To do so you'll click the green "Create" button in the upper right corner and select "Droplets".

To use Digital Ocean with Server Pilot we'll create a droplet with these settings:

  • In order for Digital Ocean to work with Server Pilot we want to use an Ubuntu server (version 16.04.2 x64).
  • The size we will choose is the $5 dollar a month option (if you're creating bigger sites you may want to bump this up to $10. You can always increase the droplet size with Digital Ocean, but you can't decrease).
  • We don't need to add any block storage.
  • The datacenter region is unique to where you would be creating the website. Because we're creating websites for Canadian businesses most of the time we use the Canadian datacenter. While this isn't necessary it's been long stated that having an IP in your countries range is a benefit for SEO.
  • We won't add any additional options. If you're a little more tech savvy feel free to add extras.
  • We highly recommend adding a new SSH key for security purposes. We want to keep this guide as simple as possible so we will skip this part, you can use the root and root password but it's advised not to. You can follow multiple guides on Digital Ocean to set this up, for now let's skip this.
  • To finalize and create, we want 1 Droplet and we'll choose a hostname we can remember. In following the guides naming convention we will choose our domain name as the hostname "yourdomainname.com".
  • Click Create.

After clicking create you'll be taken to your Droplets in which Digital Ocean will configure and setup. You should also receive an email from them with the root information for your Droplet. We will need this for the next part of the setup now that we make the transition to serverpilot.

Move onto the Server Pilot website and login. Once inside you'll notice a large green "+ Connect Server" button. Let's click it to get started.

After you've gotten the email from Digital Ocean we can proceed to the next step. From here we'll be greeted with the screen below in which we want to copy and paste the options given to us in that email. Simply enter the server IP address, the Root Password, and then choose a password you'll remember and enter it in the SFTP password. Once complete click "Connect to ServerPilot"

After you click connect to ServerPilot you'll see it doing it's thing, sit back for a few moments and let it complete. When everything has been finished the last step of the process is to install our Wordpress application. Server Pilot makes this an absolute breeze. To get started all you have to do is click the "Create App" button.

The final step is to customize the information you want for your website. This is straight forward and used as a reference within ServerPilot. I tend to use the domain name as the name (must be all lowercase and one word), then just enter in the domain name you want to associate it with. Last but not least we need to select and check the Wordpress checkbox (and enter in your administrative name, password and email), choose PHP 7.1 (latest version) and make sure the server we just created on Digital Ocean is the one we've associated this install with. Finally you can leave the system user as serverpilot or choose to create a new one. We'll leave everything as is for now.

Simply click Create App and you should now have a fully functioning Wordpress install up and running on your new Digital Ocean Droplet. To test this all you need to do is visit the IP address that Digital Ocean emailed you earlier and enter it into your browser. You should see a website with the default Wordpress theme installed.

Back to Contents Next section

Cloudflare and Domain Setup

Things You'll Need:

  • A Cloudflare Account (Register here)
  • A Domain Name or Provider (we use Namecheap)
  • Your Digital Ocean (or webhost) IP address to connect with Cloudflare.

The next part of our equation is to setup our domain to use Cloudflare and to ensure that our images from Amazon S3 can be cached and used by the Cloudflare system. Using strictly S3 for images will provide a nice speed increase but leveraging the Cloudflare system will give it an even nicer speed boost thanks to the caches we setup. In an optional step below we'll set some options to help harden Wordpress. As Wordpress is one of the most widely used platforms on the web it's also a large target for spammers and malware injections so we want to make sure we try to secure our site as much as possible.

We're going to assume you already have a domain name setup through a provider (Namecheap, GoDaddy etc). If you have a live website be sure to note that we will be making some changes to the DNS and it's highly advised that you make a backup of your Wordpress website. One of our favorite plugins to do so is The Wordpress All In One Migration plugin.

After you've registered for your Cloudflare account we simply need to add our domain. To do so, in the top right click on "Add Site" which will take you to the Add Website Screen.

Simply enter in your domain name in the empty text box and click "Begin Scan". Cloudflare will then scan your domain name looking for it's DNS records, once complete you will see a "Continue Setup" button to click and proceed to the next step.

On the next screen we are greeted with the DNS records currently associated with our domain name. You most likely will see a handful of "A" records as well as some other records that might be associated with mail servers and such. There's two things we have to do on this screen before we continue.

First:

In order for Cloudflare to use our setup from Amazon S3 we will need to create a CNAME record and point to it. Remember when we created our bucket back in step 1 and we named it "files.yourdomainname.com" (where your domain name is your actual domain name)? If you haven't changed anything from this tutorial this is straight forward but if you changed the bucket name you'll have to use some common sense here with what you changed.

To add a CNAME record to Cloudflare for use with Amazon S3 we'll change the dropdown to CNAME, in the "Name" box we enter in "files", in the domain name box we enter in "files.yourdomainname.com.s3.amazonaws.com" and then simply click add record.

Second:

The second step of the process is to ensure that Cloudflare is pointing to our Digital Ocean droplet. In order for this to be correct we want to have the A records point to the IP address of the Digital Ocean server. Chances are you'll have to simply just copy and paste the IP address into Cloudflare. Please note that the DNS may be different from domain to domain. Ideally what we prefer to see is one "A" record followed by a couple CNAME records for the others. We want primary domain (yourdomainname.com) as the main "A" record and have the others like www.yourdomainname redirect to yourdomainname.com. It's bad practice to have both a www version and non www version, we will ensure this doesn't happen when we configure Wordpress.

Once you've pasted in the IP address into the "Value" field hit Continue to move on

After you click continue you'll be asked which Cloudflare plan you would like to use, if you want to spend by all means support a great service but it's not needed in this case. Simply select "Free Website" and continue.

The following screen will tell you you need to change the name servers of your domain to point to the ones Cloudflare has provided. Everything else is setup to go meaning once you change them it will begin using the Cloudflare service and pointing to your Digital Ocean Droplet.

In order to do this we'll need to login to the account where our domain name is registered. In our case it's Namecheap. Inside of Namecheap (or whomever) go to your domain list and you'll need to find where you manage the DNS records. Inside of Namecheap it's easy, just click the big "Manage" button on the right.

From "Domain" tab on the manage screen you should see an option that says "nameservers". If you're setting up a new domain it will be pointing to use Namecheaps default DNS. In order to change this we simply need to change the dropdown and select "Custom DNS". Inside of Custom DNS we need to enter in the Cloudflare DNS names that were provided to us.

After you've entered in the Cloudflare DNS settings into Namecheap simply hit the checkbox that appears in the Nameservers section to save. From here it's just a matter of waiting for Cloudflare and Namecheap to make the DNS change. Once complete though (and it shouldn't take long) you'll get a notification stating the DNS has been updated.

Congrats, you've now got your domain name using Cloudflare and Digital Ocean. The next step is optional in this process but we highly recommend it for security purposes as it will help harden your Wordpress installation a little more.

Back to Contents Next section

Optional Cloudflare Setup

Things You'll Need:

  • To have completed the previous three steps and setup your Cloudflare account.

This part of the process is optional but we recommend it. Not only will it help slow down some attempts on hacking your Wordpress admin but it will also enable a free Cloudflare https certificate which Google recommends.

This step is straight forward, simply copy the page rules we've created below. The first thing we'll want to do is protect the Wordpress login section. To do so click the "Create Page Rule" button

  • In the URL box enter the following: *yourdomainname.com/wp-login* (the asterisk is a wildcard which protects everything before and after)
  • Browser Integrity Check: On
  • Browser Cache TTL: 4 Hours
  • Always Online: Off
  • Security Level: I'm under attack
  • Cache level: Bypass
  • Disable Apps
  • Disable Performance

Click Save And Deploy.

The second step is to follow essentiall the same process but this time change it from the login to admin area of Wordpress.

  • In the URL box enter the following: *yourdomainname.com/wp-admin* (the asterisk is a wildcard which protects everything before and after)
  • Browser Integrity Check: On
  • Browser Cache TTL: 4 Hours
  • Always Online: Off
  • Security Level: I'm under attack
  • Cache level: Bypass
  • Disable Apps
  • Disable Performance

Click Save And Deploy once more and proceed to the final step of the process.

Last part here is we're going to ensure our website is using the https protocol. Once again in page rules click the "Create Page Rule" button. This will be the last rule you'll be allowed to create as the free Cloudflare plan will only allow a maximum of three. You can buy more should you choose on a month to month basis.

  • In the URL box enter the following: http://yourdomainname.com/* (the asterisk is a wildcard which enforces https on everything after)
  • Choose Always Use HTTPS

Click Save and Deploy and you're now finished with using Cloudflare

Back to Contents Next section

Wordpress Customization and Plugin Installation

Things You'll Need:

The last part of the process is setting up our Wordpress installation to work with Amazon S3 and Cloudflare. Most of the heavy lifting is done, one last difficult thing to do will be to obtain an Amazon IAM username and password for use with S3. Once we gain this we will need to copy and paste these keys into our wp-config.php file. Before we do that go ahead and install the following plugins (in no particular order) into your Wordpress website

These plugins are the ones you'll need to ensure Amazon S3 and Cloudflare are present. That being said we also include other plugins to round out our Wordpress installs. They include (but not limited to):

After you've installed and activated the required plugins for Amazon S3 and Cloudflare we'll not setout to configure each one (if required). To get started we'll configure the plugins required to get up and running with Amazon S3.

Creating Your IAM User

First things first, we need to obtain a IAM username and password. To do so log back into your Amazon AWS account. Under the services tab look for Security, Identity & Compliance section and directly underneath is the IAM link, click it to proceed.

On the IAM homescreen you should see a side menu on the left with links to the Dashboard, Groups, Users, Roles, etc. All we need to do here is click on the Users sub menu on the left to proceed.

Inside of the Users menu, you should see a blue button to "Add User", click it to get started.

The next screen we simply need to add a username. Enter any name of your choice. In the options below we just need to make sure "Programmatic access" is checked. After that's complete click "Next: Permissions".

The next part of the process is to add our newly created user to a group. What we typically do is create one username and group for our digital agency and run with that. Others may disagree but if you keep your key safe you shouldn't have any worry. Keep in mind you may want to change this up if you have thousands of sites. With that being said click the "Create Group" button on the middle left of this screen.

Inside of the group option screen you'll need to create a group name. Underneath that you'll be given a list of options to choose from, the only thing we really want our user to be able to do is have access to Amazon S3. So to do that search for S3 in the search box and you'll be given a few options to select from. Put a checkbox beside Amazon S3 Full Access and then click the blue "Create Group" button.

You'll be taken back to the Add User/Group screen where you can now simply hit the blue button that reads "Next: Review".

This is the review screen which doesn't mean much if you've followed the instructions correctly. Read it if you choose but when you're ready simply click the blue button in the bottom right again called "Create User".

The final screen will provide you with a green success box followed by your IAM username and password. There will be a button just above this that enables you to download a CSV file with the username and password details. We highly recommend you do so as it will be your last chance to have a copy of your username and password. Store it somewhere safe. After you've downloaded it you can click the close button in the lower right.

You're now finished with Amazon S3, the next step is to add our username and password into our Wordpress website.

Adding IAM Credentials To Wordpress

Open the CSV file you just downloaded (if you didn't go back and re-create a user and do so). Inside you'll see two fields we need to pay special attention to, the Access key ID and the Secret Access Key. From here we need to edit our wp-config.php file to enter in our IAM user details. To do this you'll need to connect to your Digital Ocean droplet via FTP (or something like Sublime texts SFTP plugin). Both work the same way. We've been using both but for FTP we've used the FileZilla FTP program for years without issue. There are multiple options, but if you're unfamiliar with connecting via FTP you can find numerous YouTube tutorials to help you with whatever FTP program you choose.

The details are straight forward

  • The host is your Digital Ocean IP address
  • The port should be set to 22 and you should use SFTP/SSH File Transfer Protocol. This typically defaults to 22 so you may not need to enter it.
  • The username and password (in this instance) will be your root/your root password or serverpilot/thepasswordyousetup when creating the App in Server Pilot.

Connect, find the wp-config.php file and download (or edit it) to add these lines into it.

define( 'DBI_AWS_ACCESS_KEY_ID', 'youraccesskey' );
define( 'DBI_AWS_SECRET_ACCESS_KEY', 'youraccesskeysecret' );

Simply plug in the details from the CSV file and paste them along with this code in your wp-config.php file. Save and then reupload via FTP to your Digital Ocean droplet. If it didn't work you'll be greeted with the screen below.

If you see the above image you'll need to check your wp-config.php file again and ensure you've properly saved and uploaded. If all works well on the other hand you should see the following below.

If all is well we can move on to the final setup for Amazon S3.

Configuring WP Offload S3 Lite to Work With Your Bucket

The final part of the process is to enable our plugin to send/download images from S3 into our Wordpress setup. Simply browse to the AWS menu section in Wordpress (on the lower left side) and choose the "S3 and Cloudfront" option. Simply choose the bucket we created (hit the browse button) by searching through the buckets in your S3 account. Then simply enter the same settings below. You can tweak and adjust how you see fit but we prefer these settings to save space and provide less headaches.

Please note to make sure the custom domain matches what we setup in Cloudflare. If you've followed along thus far you should be able to accomplish this easily by ensuring "files.yourdomainname.com" is selected as both the bucket and Cloudfront or Custom Domain.

We've decided to Remove Files From Server after upload to help us save on space on our Digital Ocean Droplet. With the files backed up on Amazon AWS we felt no real reason to waste space on our web host.

Congratulations, you now have your website, Amazon S3 and Cloudflare images working in conjunction. There are just a few final housekeeping things to take care of before everything is complete.

Moving Existing Images From Server To Amazon S3

If you've run this tutorial with a pre-exisiting website with images you can simply install the Regenerate Thumbnails Wordpress Plugin, activate, and then regenerate to offload them. I've seen tutorials claiming this doesn't work but it does work just fine with the settings mentioned here. Be sure you've set everything up before trying.

Because we are using the https option with Cloudflare on our site we want to make sure that the Flexible Cloudflare SSL plugin is activated. But just because don't assume anything. Double check that when you visit your site at yourdomainname.com it redirects properly to https://yourdomainname.com. Also be sure to check that the proper redirects are in place for WWW and non WWW. For example, at Sixo Media we want all www.sixomedia.ca requests to redirect to https://sixomedia.ca. In order to do this we've added to our Wordpress .htaccess file manually but there are multiple plugins on tutorials on how to do this. If you feel comfortable enough adding to your .htaccess file this is what we've used.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Back to Contents Wrapping Up

W3 Total Cache Settings

Things You'll Need:

  • The W3 Total Cache Plugin Installed

The final part of the Wordpress speed equation is to use a cache plugin on your server. Again there are multiple options and you don't have to use what we recommend but we've used a handful of plugins and ultimately settled on using W3 Total cache. Why? Simply because it worked best for us (and it's free).

We've tried premium plugins like WP-Rocket and while also a great plugin we had minifying issues with it randomly. Every now and then on some of the sites we created it would just break. With W3 Total Cache we haven't experienced the issue. Again the choice is up to you but we wanted to provide the last piece of the puzzle for you in a set of images below. To get started all you need to do is simply install the W3 Total Cache plugin and activate it. Then just follow the settings below.

W3 Total Cache General Settings

W3 Total Cache Page Cache Settings

W3 Total Cache Minify Cache Settings

Please note with minifying if it breaks your site you'll either need to turn off the minifying option altogether or at the very least trouble shoot to find the file that is causing the problem.

W3 Total Cache Database and Object Cache Settings

Leave these settings as is, you shouldn't need to change anything in here.

W3 Total Cache Browser Cache Settings

Last But Not Least

The only thing we recommend is to look into the extensions area of W3 Total Cache and ensure you DON'T use the Cloudflare extension and be sure to turn on the Yoast SEO Extension if you've installed that plugin.

Back to Contents Next Section

Wrapping Up

Things You'll Need:

  • Something To Drink
  • A Nap

If you've taken the time to read through this guide we want to give you a pat on the back! We hope by writing this it will help others to setup a cost efficient but effective web hosting solution. While going through this will take some time to understand at first after you've completed it a few times you should have no problem setting it up in a matter of minutes. The longest part of the process will be the DNS change.

As we mentioned above we don't claim this guide is perfect but we're hoping to make it as so. If you find anything wrong with this or how we can improve on it please leave us a comment below or feel free to contact us.

Back to Contents

Leave a Reply

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

Pin It on Pinterest

Share This