How To Find Non HTTPS Contents Of Your Website Using The Google Canary Browser

Find Non HTTPS Contents on Website
  • Save

Is HTTPS really necessary for a blog or a website?

You should stop asking this question now as it has become essential to use HTTPS. Not just for SEO, but also for your user experience. In a recent blog post by the Google security team, Google made it clear that starting July 2018, with the release of a new Chrome version, it will start treating all HTTP site as not secure.

Not-secure-website
  • Save

In my earlier posts, I have shared a lot of information about HTTPS and how you can set the same for your blog. In case if you have still not moved to HTTPS and need to learn more about it, start with the following blog posts:

All those using Bluehost, SiteGround, Kinsta or similar high-quality hosting, can easily add free SSL. I have shared the guide for setting up free SSL on Bluehost here.

One major issue that most of us face while migrating from HTTP to HTTPS is mixed content. This usually happens when you are use a third party script, which continue to use the HTTP protocol. The challenge is to identify such scripts and links which are served on HTTP. For WordPress bloggers,  this guide will help you fix this issue. However, if you use any other platform or even WordPress and are unable to identify the content which is served over HTTP, I have a new solution for you.

This one is from the Google Chrome team and something most developers and bloggers using Mac will love. There is a different version of Google Chrome – called Canary – which is targeted at developers and webmasters for testing their site . I have been playing with it for a while and this is something you must know to test your site in various aspects. In this tutorial, I will focus on helping you set up the Canary browser to check your website for mixed content. I’m writing this tutorial on a Mac OS system. They also have a chrome extension which can be used with a chrome browser that you can download from here.

How to use Google Canary browser for website testing, including finding mixed content

First things first, Canary can be run simultaneously with the existing Chrome browser.

To get started, you need to download and install Canary browser from here.  For this audit, we will be using Lighthouse, an open source tool by Google for website audit. Wondering what Lighthouse is? Check this official page or just read on:

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it on any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

Alright, now we have an understanding so let’s get on with rest of the tutorial.

Download and install NPM package from here. (Simple GUI installer)

The next step is to install Lighthouse by using the command line. Open Terminal on your Mac or Linux system and run this command to install Lighthouse.

npm install -g lighthouse

If you get an error stating “Please try running this command as root/administrator”, it means you are not logged in as the root user. Just prefix sudo in the command and Lighthouse should be installed.

install-lighthouse-using-command-line
  • Save

Once Lighthouse is installed, simply run the command to view the report. Replace ShoutMeLoud.com with the name of your website.

lighthouse --mixed-content https://www.shoutmeloud.com --view

This is what the report looks like:

Lighthouse-mixed-content-finder-chrome
  • Save

In the above screenshot, you can see that our score is 100 and we have no mixed content issue. This is how it should be for your site.

To explore Lighthouse and Canary, you can also run other commands to audit your website or your client’s. Here is the command:

lighthouse --view https://www.shoutmeloud.com

This will create a comprehensive report and will give you a bird’s eye view of what’s going on with your site loading speed and other important aspects like SEO.

Canary-lighthouse-website-audit
  • Save

Running this command helped me identify many performances and accessibility related issues which are not possible to discover otherwise. You can read more about SEO category in Lighthouse report here.

You can also find the list of all available commands by running the following command in the terminal:

lighthouse --help

There are many other GUI tools which let you do that. However, this one is free and from Google which adds more reliability to the report. You should use Lighthouse once a month to test any existing issues and start fixing them one by one. Even if you are not a developer, this will help you improve your website usability and SEO score.

Go ahead and test this out. I look forward to hearing your score in the comment section below. If you like this tutorial, share it with other webmasters and developers to help them learn something new.

Here are a few other hand-picked articles that you should read next:

Subscribe on YouTube

  • Save
Authored By
A Blogger, Author and a speaker! Harsh Agrawal is recognized as a leader in digital marketing and FinTech space. Fountainhead of ShoutMeLoud, and a Speaker at ASW, Hero Mindmine, Inorbit, IBM, India blockchain summit. Also, an award-winning blogger.

18 thoughts on “How To Find Non HTTPS Contents Of Your Website Using The Google Canary Browser”

  1. I’m gonna try this process after reading reading this helpful post. I hope this will surely help me ๐Ÿ™‚ Thanks Harsh Sir!!!

  2. Abhishek Ashtekar

    Awesome & Helpful Content Which Really Help Me Improve My Blogging Experience. I Improve My Content By Learning From Shoutmeloud Website !

    Keep Up The Great Work !

  3. Freddy G. Cabrera

    Hey Harsh!

    You are right, it is very important to take care of these HTTPS factors.

    I read the news from the Google security team a few days ago. This is more of a reason to take care of this and also secure your website.

    I often come across blogs and websites that do not have this SSL certificate and they need to do something about it. The number of people using Google chrome is high, so it is an important matter.

    Thank you for sharing your tips on this subject!

    Best regards! ๐Ÿ˜€

  4. Man Your Blog Inspires Me Every Time Read, That How Awesome Life Can Be Without A Boss, I’ve Learned A Lot Things From Your Blogs.
    #iiankitsingh

  5. I was victim of Mixed content issue, was migrating my blog from HTTP to HTTPS, Thanks to this article from Harsh, Problem Solved! Thank you SML ๐Ÿ™‚

  6. Hey Harsh,

    I have heard that HTTPS is somewhere a ranking factor in google. Everyone should add HTTPS to their blog.
    On the other hand, Having a SSL certificate on your blog can help you in building a trust in the audience.
    One should find the non https contents on your blog so that one could fix it.

  7. Hello Harsh,
    First of all, Thanks for sharing this information.
    I was wondering why sometimes My website shows the non HTTPS pages. I will surely follow your given steps.
    Regards,
    Jeet

  8. This one is a great tool, i tried running this test and luckily my Website passed the test successfully. Thanks Harsh for sharing this news,it was really helpful.

      1. Thanks, Harsh! Till now everyone used PageSpeed Insights and the day has come for adopting Lighthouse.

  9. Hey Harash!!

    Is that Chrome Light house available as a chrome-plugin, i am using the same to measure my blog perfromances. Anything which differs from that? would be great if you can clear over that context too..

  10. Hi,
    Amazing, valuable and problem solving tool (article) helps user to add HTTPS in their blog, HTTPS create trust in the people are visiting your site.

    I would suggest and recommend this article to friends in the blogging fields to adopt this strategy.

    Appreciate and well-done for great work.

    Keep it up and Thanks for sharing.

  11. hi Harsh Agrawal,
    That was a very informative read. Must appreciate how well you have simplified the concept for every type of reader.

    thanking you and we remain
    Asmat Baloch

  12. No doubt, HTTPS is pretty cool but i still don’t like the idea of Google Chrome trying to force it on every website owners
    It should be optional!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
55 Shares
[i]
[i]
[i]
[i]
Share via
Copy link