Google really wants Webmasters and SEOs to make their sites secure and faster. There’s just one problem…it’s not easy to do. Adding an SSL certificate is still expensive and difficult to install. While speeding up a site can be even more complicated and usually requires a lot of coding changes.
In my pursuit to solve this problem, I found a solution that is both easy and free!
Cloudflare offers a free account that provides SSL and HTTP/2. If you haven’t heard of HTTP/2, it’s a new web protocol that makes your site load super fast. While it doesn’t remove the need to optimize your pages, it can still provide a significant improvement with page speed.
Step-by-Step guide to adding HTTP/2 and SSL using Cloudflare
Watch the brief video to get a good idea of how it’s done and then follow the detailed instructions on this post to add HTTP/2 and SSL to your site.
Step 1: Add site to Cloudflare
Go to Cloudflare and Signup for an account if you don’t already have one. Add your site and then wait for it to finish the scan.
Step 2: Verify DNS settings
The scan detects your DNS settings and creates entries for them. Make sure you compare these with your current DNS settings. If anything is missing, you’ll need to add it before proceeding.
Step 3: Choose the Free account
Choose the Free account. That account will give you everything you need to have SSL and HTTP/2 on your site, along with many other useful features. Cloudflare is designed to grow with you, so if you end up needing more advanced features, you can upgrade at any time.
Step 4: Change DNS servers
In order for Cloudflare to work, you will need to switch your DNS servers to them. This sounds scary, but it’s not. All you need to do is login to the registrar where your domain is registered and switch out the existing DNS servers with theirs.
Step 5: Wait until your site is active on Cloudflare
Before you do anything else, you’ll need to wait until your domain is active on Cloudflare.
After your domain is active, you’ll then need to wait for your Flexible SSL certificate in the Crypto section to become active. Once it’s active, proceed to the next step.
Step 6: Configure your SSL settings
Even though your site now supports a secure connection, http still works too. The ideal configuration for SSL and SEO is to have all http URLs redirect and use https. To force the use of https go to Page Rules.
Add a new page rule and enter your domain with http and a slash with an asterisk at the end of it. Then choose Always Use HTTPS and Save and Deploy.
If you have assets (CSS, JS, images, etc…) that are linked with http, you will need to do one or both of the following.
Make internal asset links reference the root and external asset links be relative to the site’s protocol. You can do that for internal links by removing the protocol and domain, and using a single slash. For external links, remove the protocol, but keep the two slashes.
If you use WordPress, then all of the images on posts and pages will most likely be linked with http. The quickest way to change the http to https or make them relative (recommended) is to use the Better Search Replace Pro plugin.
Turn on “Automatic HTTPS Rewrites” in Cloudflare
In addition or alternatively, you can turn on Automatic HTTPS Rewrites in Cloudflare. That will rewrite any asset links that are using http to use https.
Update Google Search Console and Analytics
That’s it! You now have SSL and HTTP/2 working on your site. Once you verify everything is working correctly, you can add the https version of your site to Google Search Console and remove the http version.
You will also want to change your Google Analytics settings to https too.
Bonus: Cloudflare with WP Rocket
My favorite WordPress caching plugin is WP Rocket. Not only is it reliable and easy to use, it also supports Cloudflare. If you’re using WP Rocket, follow these simple steps to enable it.
Step 1: Enable Cloudflare
To enable Cloudflare in WP Rocket, go to the Settings and click on the CDN tab. Check the Cloudflare option and then save the settings.
Step 2: Get Global API Key from Cloudflare
Login to Cloudflare and go to your account settings page to retrieve your Global API Key.
Step 3: Enter Global API Key and configure WP Rocket
Enter your Cloudflare email and Global API Key. Select your site and make any other changes to the settings that you would like.
Now you have the best of both worlds, WP Rocket and Cloudflare on WordPress!