If you are a web developer or creator, moving your sites over to HTTPS should be on top of your priority list for 2016. The reasons for doing it keep growing.
For one, modern protocols like HTTP/2 and SPDY ensure that encrypted sites are no longer slow like they used to be. Many of the largest websites in the world (Google, Facebook, YouTube, Twitter, etc) have successfully made the switch to HTTPS without any noticeable performance hit.
Second, encrypted sites are much better protected from man-in-the-middle attacks or injections. Many ISPs around the world inject their own obnoxious ads into websites that are not encrypted. It’s not your fault at all, yet it creates a very poor experience for your site visitors. If your site is encrypted, ISPs can neither read the data that’s being transmitted nor inject ads into it.
Third, Google is pushing hard for encrypted websites. They will even rank your site a little higher if it’s encrypted! For small sites, the jump can be huge (our sister site PC Tonic has seen a 120% jump in traffic in 2015 compared to 2014, after turning on encryption and deploying other performance tweaks).
So yeah, encrypting your site is a good thing in many ways. But! There are a few deal breakers that you should keep in mind before you go ahead.
- You will lose all your social share counts. You know, those little vanity numbers on the share buttons. Yep. The URL of your site will change from http to https, so the social networks will think your posts have never been shared. Honestly, this shouldn’t keep you from making the switch (those numbers will build up again!), but it’s definitely something you should know.
- Your ad revenue might go down. We at Tech Orbiter use only AdSense, and have found this to be entirely untrue, but other ad networks may not like https. Check with your ad networks before taking the plunge.
- If not configured properly, https will put extra load on your server. This post is only for WordPress sites that are hosted on DreamHost shared servers. You can take the general gist of this post and apply it to your own website hosted elsewhere, but we assume no responsibility for any issues that might occur.
- In this guide, we will be using CloudFlare’s free SSL certificates. These certificates are compatible with all modern browsers and OS platforms. Only a few legacy platforms, like IE8 on Windows XP and Android versions before 3.0, are unsupported. This can be an issue if many of your visitors are people who are stuck in the last decade. You can go for CloudFlare’s $20/month Pro plan if you want an SSL certificate that supports legacy platforms.
You’re still here, so the deal breakers probably don’t bother you. Good! Let’s dive in.
Step 1: Create an account at CloudFlare and add your website to a free plan
To encrypt for free, you will need CloudFlare’s free certificates, hence the need to create an account with them. CloudFlare is an amazing cloud service that provides security, performance benefits, and global caching to your website. It’s so good that we can’t stop writing about it.
After creating an account, add your domain to a free plan (by default, the $200/month Business plan will be selected) and follow the easy steps to get it activated.
After the setup is complete, click on your domain on this page, go to Crypto, and toggle the SSL setting to Full. CloudFlare will now generate a certificate for you in the background, which might take a few hours. Once the certificate is generated, you will see an “Active” button beneath the option.
Most of your work on CloudFlare is done, but we will come back to its dashboard later.
Step 2: Add the CloudFlare plugin to your WordPress site
CloudFlare is a reverse proxy, which basically means it’s going to screw with whatever analytics tool you’re using by not showing the actual visitor logs. To prevent that, you need the CloudFlare plugin for WordPress.
After installing and activating it, set it up with your CloudFlare data. Make sure the “HTTPS Protocol Rewriting” option is ON, and save.
Step 3: Generate a self-signed certificate for your site at DreamHost
UPDATE: DreamHost now supports Let’s Encrypt certificates, which are free, and we recommend you use them instead of the self-signed certificate that’s mentioned below.
Hop over to the DreamHost web panel, and from the left pane go to Domains > Secure Hosting. Click the big Add Secure Hosting button.
Choose your domain, skip the unique IP option, and save. As discussed above, if you want compatibility with older browsers and platforms, you should get yourself a unique IP address. Which is, of course, not free and kind of defeats the purpose of this post.
In the DreamHost panel, go to Domains > Manage Domains, and click the Edit link under Secure Hosting. Enable the “Mirror non-secure settings?” option, and save.
In a few months, you will be able to create Let’s Encrypt certificates in DreamHost, which will make the transition to HTTPS much simpler in case you don’t want to use CloudFlare.
Step 4: Test your site over HTTPS
If you’ve setup everything correctly, your site should now load correctly over HTTPS. Load https://yoursite.com and check if everything’s working fine. Open a few posts, pages, WP Admin, etc and make sure you see the green lock in your browser’s address bar. If the lock is red and broken, CloudFlare’s certificate may not have generated yet, so go back and check that.
Step 5: Change WordPress and site address to their HTTPS versions
Back in your WP Admin, go to Settings > General, change the WordPress URL and site URL to https://yoursite.com from http://yoursite.com, and save. Make this change only after you’re sure that your site is loading correctly over HTTPS.
Step 6: Cache SSL requests in W3 Total Cache
If you use W3 Total Cache, there is an option to uniquely cache SSL requests under Performance > Page Cache. Enable it. This is not mandatory, but this reduces resource usage and improves performance.
WP Super Cache doesn’t offer this option (at least not explicitly), however caching still works normally.
Step 6: Set a page rule in CloudFlare to redirect all HTTP traffic to HTTPS
Once you have loaded your site on a few different browsers, devices, and OSes, and everything seems fine, it’s time to make HTTPS the default option to access your website.
Go back to CloudFlare, select your domain, open the Page Rules tab, and add a new rule. The pattern should be something like this,
Toggle the “Always use HTTPS” option to ON, and add the rule. Almost immediately, http://yoursite.com will start redirecting to https://yoursite.com.
Sit back and enjoy the pleasing green lock, the (hopefully) increased influx of visitors, and their increased trust for your site. You have earned it.
If you face any issues with the migration, feel free to fire them in the comments and I’ll be glad to help.