Introduction To Chrome Lighthouse

Introduction To Chrome Lighthouse

Chrome Lighthouse has been around for a while now, but what if I ask you to explain what it does can you explain vividly?

I discovered that a lot of web developers, including beginners, have not heard about this tool and those who have, have not tried it yet, that's not cool :(.

In this article, I would introduce you Chrome Lighthouse, what it does and how to start using it. Let’s get started Making any sense? :)

Well, Lighthouse is a tool developed by Google that analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Think of Lighthouse as the speedometer in a car that checks and balances the cars speed limit. Basically, Lighthouse works with developer best practices and performance metrics. It runs checks on a web app and gives you feedback on errors, practices below standard, tips for better performance and how to fix them.

According to Google Developers Docs Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against 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. That’s pretty much all about Lighthouse, It audits the URL of a web app and generates a report telling you how bad and good your web app is according to web standards and developers best practices. Also attached to each section of the report is documentation explaining why that part of your app was audited, why you should improve that part of your app and how to fix it.

The idea behind Lighthouse, is to identify and fix common problems that affect your sites performance, accessibility, and user experience.

Now, let's move to the interesting part, HOW TO GET STARTED!! LightHouse is available in three workflows

  • Chrome Developer Tools
  • Command line (Node)
  • A Chrome extension I personally prefer using LightHouse in Dev Tools. Using the extension does not make sense as the Dev Tool and extension work in the same chrome browser, well our preference varies, use what works best for you. Lighthouse was first available only with the Chrome extension before it was added to the Chrome DevTools. Using lighthouse on the command line is really cool also,(For geeks :))

We will get started in my next article.

Have a great time reading:)