In October of 2019, Google announced a plan to gradually block mixed content over time. Mixed content is a common issue across sites where secure pages attempt to load insecure content. For example, loading an image file over http from an https page. There are security risks associated with that, so Chrome wants to eliminate that risk in the future (by blocking mixed content from loading).
Since it’s a common issue, Chrome announced a staged plan in October so site owners would have plenty of time to research and fix mixed content issues on their sites. Even though the blog post was published in October of 2019, I’m still seeing a lot of confusion about the topic when working with clients. In addition, I’m finding many companies don’t even know that Chrome has begun blocking some types of insecure content already.
In this post, I’ll first cover the timeline that Google mapped out for Chrome’s handling of mixed content. Then I’ll cover how the problem could break pages visually, I’ll cover the rendering impact, I’ll provide examples of what blocking looks like, and then I’ll end with some final tips.
Chrome’s Mixed Content Timeline:
In Google’s blog post about blocking mixed content over time, they provided a staged rollout. The plan was to gradually block mixed content versus simply flipping a switch and having pages break.
- The first change was in Chrome 79, where Chrome started providing a setting where users could unblock mixed content on specific sites. The setting applies to mixed scripts, iframes, and other types of content that Chrome blocks by default.
- In Chrome 80, which is the current version of Chrome as I write this article, Chrome will attempt to auto-upgrade audio and video resources to https (if possible). If the resources cannot be auto-upgraded, then Chrome will block the resources from loading. This is completed automatically by Chrome for sites trying to load audio or video resources over http from an https page.
- In addition, Chrome 80 will allow mixed images to load, but that will cause a “Not secure” label to be displayed in the browser. So, loading images over http will still allow the images to appear on the page (as of now), but the url will have a “Not secure” label in the browser window.
- Then in Chrome 81, which was supposed to be released in February 2020 but hasn’t rolled out, Chrome will attempt to auto-upgrade mixed images to https. If they fail to load over https, then Chrome will block those images completely (they won’t load on the page).
- Regarding the rollout of Chrome 81, the Chrome team announced that based on the global pandemic, Chrome 81 will not be released yet. Therefore, the final stage in the gradual rollout of blocking mixed content is not live yet. But, you can test it out via the Canary build of Chrome (which I’ll cover soon). As of today (Chrome 80), the stable version of Chrome is not auto-upgrading or blocking mixed images yet. It’s just showing a “Not secure” label for mixed images. But Chrome 80 is auto-upgrading audio and video resources to https and blocking them if they won’t load over https.
Insecure Images, A Common Mixed Content Issue
I’m sure some site owners and SEOs reading this post are confused about what mixed content is and how it looks. First, if you are running your pages over https, then all resources should be loaded over https. If you try to load resources over http, then that’s where mixed content warnings arise. Again, it’s a common issue that’s impacting many sites across the web.
As a simple example, here is a secure page (https) that is loading three images over http (insecure) in the stable version of Chrome (v80). Notice the “Not secure” label in Chrome versus the secure padlock.
When using Chrome Dev Tools and checking the security tab, you can view the resources that were loaded over http. You typically need to refresh the page to see those resources.
Since we are in stage three of the rollout (Chrome 80), the images will be allowed to load, but Chrome will display a “Not-secure” label in the browser window. To clarify, the images will still show up on the page and you will not run into any rendering issues (yet).
It’s worth noting that audio and video will be auto-upgraded to https in Chrome 80. If they can’t be loaded over https, then the content will be blocked entirely. I’m focusing on images in this post, but that’s important to know if you are using audio and video on your pages.
Chrome Canary – The Ability To See Into Chrome’s Future
The Chrome Canary build is a version of Chrome that’s updated nightly with the latest functionality. It’s a great way to test your site and functionality for future versions of Chrome. There are many times I’m activating functionality in Canary that’s not yet in the stable version of Chrome to see how that will work when it finally does roll out.
Since I know that Chrome 81 is nearing release, I was able to test how Chrome would handle mixed images. Remember, the stable version of Chrome simply adds a “Not secure” label in the browser window, but Chrome 81 will auto-upgrade those mixed images if possible. And if the images cannot load over https, then they will be blocked entirely. That means they won’t load on the page. And that also means it can impact what Google sees when it renders your pages.
As a quick example, I set up a page that loads an image via http and that image cannot be auto-upgraded to https. As you can see below, the image is blocked entirely from Chrome (and doesn’t show up on the page). The page actually shows up as secure in Canary (the “Not secure” label has been removed), but the page simply displays a missing image icon. That’s not good if it’s a critical piece of content for users.
Image blocked from loading:
The page is now secure, but the image is blocked:
The resource failed to load since it can’t be auto-upgraded:
Evergreen Googlebot, Broken Renders, and Ranking Impact
OK, so now we know that mixed images will not load in Chrome 81 if those images cannot be auto-upgraded to https. And we saw how that looks in the browser with broken image icons showing up on the page. That’s not good for users at all, but what about Google?
Google’s John Mueller has explained that since Google uses an evergreen Googlebot now for rendering, it will be using the latest version of Chrome. That means it will be using Chrome 81 once that rolls out. Again, that hasn’t rolled out yet due to the global pandemic, but it will at some point soon.
So if Googlebot will be using Chrome 81 to render your content, and we already know that Chrome 81 will block mixed images, then that’s exactly how Google will see it. So key images will be missing from your renders if those images cannot be loaded over https.
In addition, from a ranking perspective, John explained that the blocking of images shouldn’t impact rankings based on Google’s https ranking signal. That’s good to know, but he also explained that if the pages cannot render completely in a browser, then Google probably won’t be able to render those parts either. And he clearly recommended fixing that issue.
Here is a link and screenshot to a reddit thread where John explained this:
Wrapping Up and Final Tips:
Before I end this post, I wanted to provide a number of final tips and suggestions based on researching this topic. Remember, site owners still have time before Chrome 81 rolls out to address mixed content issues. Based on what I provided in this post, it would be smart to rectify those issues now before Chrome 81 rolls out. Here are some final tips:
- Crawl your site and surface all mixed content issues. My three favorite crawling tools are DeepCrawl, Screaming Frog, and Sitebulb. All three provide specific reporting for mixed content. Note, I’m on the customer advisory board for DeepCrawl. It has been one of my favorite enterprise crawling tools since 2013.
- Understand that Chrome 81 has NOT rolled out yet and Google has paused updates due to the global pandemic. Chrome 80 is the stable version of Chrome now and it does display a “Not secure” label for pages with mixed content problems. Also, Chrome 81 will roll out relatively soon and will completely block mixed images that don’t load over https (when auto-upgraded).
- Chrome 80 currently attempts to auto-upgrade audio and video to https. And it those resources fail to load over https, Chrome will block them from loading.
- Mixed content problems can impact your pages visibly for users, and for Google rendering your pages. Remember, Google now uses an Evergreen Googlebot, which utilizes the latest version of Chrome to render your pages. That means Googlebot will be using Chrome 81 to render pages once it rolls out. As Google’s John Mueller explained, you definitely want to fix mixed content issues that impact rendering.
- John Mueller also explained that this shouldn’t impact rankings based on Google’s https ranking signal. That’s good news, but again, it can impact what users see on your pages and what Google is able to render.
- You can use Chrome Canary to test your pages now to see how mixed content will impact your site once Chrome 81 rolls out. It’s a great way to test Chrome’s latest and greatest functionality that hasn’t rolled out to the stable version of Chrome yet.
Address Mixed Content Issues and Avoid Broken Pages and Partial Renders
In this post, I covered Chrome’s plan to gradually block mixed content. The final stage of the rollout will be completed when Chrome 81 is released as the stable version of Chrome. But as I covered in my post, the release of Chrome 81 has been delayed due to the global pandemic. Therefore, you still have time to fix mixed image problems before Chrome blocks them from loading (if they can’t be auto-upgraded to https). And remember, audio and video resources are already being blocked if they can’t be auto-upgraded.
I recommend thoroughly testing your site to ensure you surface, and then fix, mixed content problems. Then you can rest assured that both users and Googlebot can load and render all of your resources, including images, video, and audio.
GG
