This is the 4th post documenting my efforts to make Sitehip.com as fast as possible on a Bluehost Basic Hosting Plan. If you missed the first 3 posts you can find them here:

How to Speed Up WordPress on Bluehost Part 1

How to Speed Up WordPress on Bluehost Part 2 – W3 Total Cache

How to Speed Up WordPress on Bluehost Part 3 – WP-Rocket


Speed Up WordPress on Bluehost with Cloudflare

Quick Recap

Yes, it has been a while. I started Sitehip in November, published the first 3 posts, and then things got a bit crazy. Now here it is January 2, 2018 and this post is the last of the series.

To recap, I have optimized images and installed and configured a caching plugin. There are more than a few caching plugins available, but for Sitehip I compared the free version of W3 Total Cache to WP Rocket, which is a premium plugin.

The results surprised me, I thought for sure that WP Rocket would be the best, but W3 Total Cache is killing it so that’s what I am running.

Since the last post I’ve also installed an SSL Certificate and set up Cloudflare.

Here is the latest Pingdom Tools test result:

Sitehip with Cloudflare – see full results.

Not bad, eh?

Keep in mind that the only thing that matters is the page load time. I don’t give a damn about performance score.

What is Cloudflare?

Cloudflare is a Content Delivery Network (CDN). It works by caching copies of your site files on servers spread out over the world. Instead of accessing your site directly, requests are made from the Cloudflare servers, which deliver your site files to the user.

If requested files are not cached on Cloudflare, the Cloudflare servers will request them from your hosting server, and then deliver them to the end user.

This system increases performance, provides some security from common exploits, and limits bots and crawlers from using up your server resources. All of this reduces the load on your server and increases your page load speed.

If you want more information about how this all works, I suggest you read the Cloudflare documentation.

Got SSL?

Before you set up Cloudflare you should to consider your SSL requirements.

Google has been successfully pushing for a secure web the last couple years. They announced a ranking boost in 2014 for secured sites, and in early 2017 they began to “mark HTTP pages that collect passwords or credit cards as non-secure, as part of a long-term plan to mark all HTTP sites as non-secure” in the Chrome browser.

More recently Firefox has started to indicate sites that collect passwords without a valid SSL certificate.

The bottom line is that your website should have one.

Got any more of them SSL certificates?

You have a few options to choose from, some free, others not. This subject could be a series of articles on its own, and is a bit outside the scope of this post, so I am not going very deep into the subject here. I will cover it in more depth in the future.

Here are some basic options:

  1. Use the free one provided by Bluehost. Here’s how.
  2. Use the Cloudflare Flexible SSL
  3. Purchase a dedicated SSL

If your site is just a standard blog you can go with the free SSL provided by Bluehost. You could use the Cloudflare Flexible SSL, which is also included in the free plan. But since Bluehost does provide one for free that’s your best option.

If you plan to sell on your site you should purchase a dedicated SSL. This will also require a dedicated ip address, which will cost you a few extra dollars per month.

For Sitehip I decided to go with the Comodo Positive SSL which I bought from Namecheap. No I am not selling anything online now, but I want Sitehip to be easy to grow as time goes on.

Setting Up Cloudflare on Bluehost

Bluehost does provide easy Cloudflare setup from their Marketplace > Addons area. DON’T DO IT!

Why not? Well take a look at the screenshot. If you go through Bluehost you will need a paid Cloudflare plan for SSL support.

Cloudflare on Bluehost

Don’t go through the Bluehost portal to set up Cloudflare!

Maybe a paid plan makes sense for you. But for the scope of this article I am dealing only with the free plan.

If you take the time to set Cloudflare up manually you can still get SSL support, albeit only on modern browsers. Cloudflare provides more information here.

Setting it up manually takes a little longer, but it’s really pretty simple. And I am going to show you how to do it, step by step.

Cloudflare Setup

  1. Create an account at https://www.cloudflare.com/.
  2. Once you are logged into Cloudflare click “+add a site.” Enter your website url and click “Begin Scan.” When the scan is complete click “Continue Setup.
  3. At this point you need to be sure that Cloudflare detected your DNS records properly. In you Bluehost Panel go to Domains > Zone editor. Choose you domain and click the “Reload” button. Scroll down to view your DNS records.
  4. Very carefully compare the records shown on the Cloudflare site with the Bluehost site. I’ve done countless times and I have never found a discrepancy, but if you do find a problem you must correct the Cloudflare page to match the Bluehost page. This is very important!
  5. When you are sure the records match click the “Continue Button.”
  6. Select the free plan and click and “Continue.”
  7. Now you need to change your name servers from Bluehost to the Cloudflare servers. Don’t worry, you’r site will not go down during this process. In the Bluehost panel go to Domains, check your domain and click the name servers tab on the right. Select Custom Nameservers and enter the Cloudflare name servers exactly as they are written. Remove the bluehost servers and save settings.

    Set your name servers

    Set your name servers

  8. Back on Cloudflare, click the “Continue” button. Cloudflare will check to see if the name servers are properly set. There is a good chance that it won’t work right away…don’t freak! It can take up to 24 hours for the settings to propagate the web. Just wait a few minutes and click “Recheck Name Servers.” Voila! Your site is now using Cloudflare!

Final Cloudflare Configuration

Now that it’s set up and running there are a few more steps.

Activate & Authorize the Cloudflare Extension for W3 Total Cache

In your WordPress Dashboard, go to Performance > Extensions and activate the Cloudflare Extension for W3 Total Cache. Once activated click settings.

W3 Total Cache Cloudflare Extension Settings

General

  • Widget Statistics Interval: Last 30 minutes
  • Cache Time: 5
  • Page Caching: enabled

Cloudflare: Caching

  • Development Mode: not enabled
  • Cache Level: Aggressive
  • Browser cache TTL: 14400
  • Challenge TTL: 1800
  • Edge cache TTL: 7200

Cloudflare Content Processing

  • Rocket Loader: Manual
  • Minify: all enabled if not using the W3 Total Cache minify.
  • Server side exclude: enable if you want to use this.
  • Email obfuscation: enabled

Cloudflare Image Processing

  • Hotlink Protection: enable

Cloudflare Protection

  • Security: Medium
  • Browser Integrity Check: enable
  • Always Online: enabled
  • Max Upload: 100

Cloudflare IP

  • Cloudflare IP: enabled

Cloudflare SSL

  • SSL: Full (Assuming you have either the free Bluehost SSL or a dedicated SSL).
  • Security Header SSL: enable
  • TLS 1.2 only: enable
  • TLS Client Auth: enable

Wrapping it Up

You can see the final result at the top of this page. Here is the result of this page from Google’s mobile speed test, https://testmysite.thinkwithgoogle.com/intl/en-us.

Test result from Googles mobile test

Is there more I can do to make Sitehip faster? Sure there is! But at this point I am satisfied. Down the road may do more, but now it’s time to move on to other things.

If you’ve enjoyed this tutorial please leave a comment. Even if you haven’t comments are welcome.

And for reliable and inexpensive hosting with terrific support you can’t do much better than Bluehost.

Click here for a great deal.