Two major sites just switched to HTTPS and shared their tips and experience.
We wrote about Wired’s in-progress transition to HTTPS last month, and now we have great news: the entirety of Wired.com is now available over HTTPS. Another major site – Yelp.com – also made the transition to HTTPS this week. Wired.com comes just shy of breaking Alexa.com’s Global 1000 list while Yelp.com is 167th.
Both companies’ engineering teams shared their experience transitioning these major websites, which have loads of content and third party resources. At this scale, it is more complicated than you may think.
From resource availability to search engine rankings, an “HTTPS deployments touch every single piece of your tech stack and business,” wrote Wired’s application architect Zack Tollman.
Wired is a major tech journalism outlet, and Yelp helps you find local businesses. Despite their differences, their HTTPS transitions had a lot in common. For both sites the transition was a major undertaking, and they both experienced similar pain points.
If you are still unsure about the benefits of HTTPS then maybe you haven’t heard about how HTTPS is faster than HTTP, that web browsers want you to switch and reward you for doing so, or how SSL protects your visitors from content injection. Honestly, HTTPS just makes your website better.
A Trial Run
The most important part to any sites transition is to do a trial run first. Wired “decided that a staged rollout, where we convert one section at a time to HTTPS, would allow us to take on smaller amounts of risk at a time.” Similarly, Yelp “decided to roll out HTTPS to logged-in users first, since doing so wouldn’t affect search engine crawling,” and they tested the switch on smaller TLDs like the .CA (Canada) version of their site, “a good proxy to the US market, but on a smaller scale.”
This turned out to be a prudent move, since both sites ran into trouble.
For Wired, SEO was their main problem. “Our Security section [the first section they transitioned] appeared to take a rather catastrophic nose dive with regard to search referrals, search clicks and page rank.”
They found that using 301 redirects, which are permanent redirects, help search engines properly carry over rankings, but they are also significantly more difficult to undo if you decide to abandon your HTTPS plans. Ensuring you update your sitemap with HTTPS URLs was also incredibly important. Google recommends keeping your old sitemap around for a while during the transition.
But those SEO troubles persisted for a while. Ultimately, they contacted Google, who said “their analysis showed that there was no significant loss caused by the HTTPS transition,” and that the drop was due to unrelated issues.
At Yelp, they noticed search engines bots crawling their HTTPS URLs “only a minute after the flip.” But Google’s index took more than a week to update to HTTPS URLs. So in most cases, get ready to wait 2-4 weeks before you see the HTTPS version of your site in Google results.
Don’t Mix It Up
The next major issue for many sites is mixed content. This is when a page contains both HTTP and HTTPS content. For a site to be properly secure – and be awarded the green padlock indicating a secure page – every resource needs to be loaded over HTTPS.
For existing sites, mixed content is a problem because resources may be coming from many servers (including third-party servers), some of which do not have HTTPS configured, or have explicitly written HTTP links into thousands of lines of source code.
A relatively new feature that can help solve mixed content issues is upgrade-insecure-requests, a feature of Content Security Policy, which tells the user’s browser to automatically upgrade HTTP requests to HTTPS. Wired took advantage of upgrade-insecure-requests to easily fix the majority of their mixed content problems. It’s widely supported by browsers and can be used by a majority of your audience.
However, until this month’s release of iOS 10 and macOS Sierra, Apple’s Safari browser did not support this feature. Because of this, Apple devices were the source of more than 3/4ths of Wired’s mixed content issues.
Wired also had a problem with “non-visible HTTP assets” – stuff that provides functionality but does not affect the appearance or normal use of the page – like an analytics script. Google Chrome’s Security Panel in Developer Tools, which lists both the secure and insecure origins loaded on a page, helped them solve that by making it easy to identify where HTTP content was coming from.
Big Effort for a Big Payoff
If you are surprised by how much effort an HTTPS transition can involve for a major site, just remember the ever-growing list of benefits of using the secure protocol. Not only will your users get to browse safely and privately with encrypted and authentication connections, but you will get to take advantage of the latest technologies.
HTTP/2 is wickedly fast, but only available in modern browsers if you use SSL. Even with the computational overhead of SSL, most sites will still notice a significant speed increase with HTTP/2 compared with HTTP/1.1. If you haven’t yet, see the difference for yourself with this in-browser test.
For Yelp, adopting SSL allowed them to streamline their user experience: “With all pages on HTTPS, users would be able to login or submit reviews from any page, not just dedicated and secured pages for those specific actions. And since HTTPS sites don’t send referrers to HTTP pages by default, we’d actually see more of our referrers by transitioning.”
Keep in mind that an HTTPS transition is significantly less complicated for a smaller site that has less archived content and fewer 3rd party dependencies. In our experience working with clients, some small blogs and personal sites can make the switch in only a day’s work.