This article was originally published on Sitehip.com, a site that I have since taken down. I created Sitehip as an experiment. The idea was to have a blog dedicated to WordPress tutorials etc. However there are only so many hours on the day, so I have decided to close up Sitehip and focus on this site.
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:
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:
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.
Consider your SSL requirements before you set up Cloudflare.
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.
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:
- Use the free one provided by Bluehost. Here’s how.
- Use the Cloudflare Flexible SSL
- 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 > Add-ons 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.
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.
- Create an account at https://www.cloudflare.com/.
- 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.
- At this point, you need to be sure that Cloudflare detected your DNS records properly. In your Bluehost Panel go to Domains > Zone editor. Choose your domain and click the “Reload” button. Scroll down to view your DNS records.
- 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!
- When you are sure the records match click the “Continue Button.”
- Select the free plan and click and “Continue.”
- Now you need to change your name servers from Bluehost to the Cloudflare servers. Don’t worry, your 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.
- 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
- Widget Statistics Interval: Last 30 minutes
- Cache Time: 5
- Page Caching: enabled
- 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
- Security: Medium
- Browser Integrity Check: enable
- Always Online: enabled
- Max Upload: 100
- Cloudflare IP: enabled
- 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.
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.