Bolaji Ayodeji

Translation: Crazy geek

Original: www.freecodecamp.org/news/introd…

Reproduced without permission

Chrome Lighthouse has been around for a while, but if I asked you to explain what it does, could you please?

I’ve found that many Web developers, including beginners, have never heard of this tool, and for those who haven’t tried it, it’s not cool 😒.

In this article, I’ll take you through what Chrome Lighthouse does and how to use it.

Let’s get started 😄

According to Wikipedia, lighthouse is a tower, building, or other type of structure that uses a system of lights and lenses to emit light as a navigation device for ships at sea or in inland waterways.

Well, let’s make it a technical term;

Lighthouse is a tower, building, or other type of structure that lights up the system under the “Audit” panel of the Chrome Developer Tools and serves as a guide for developers

Does that make sense? 😄

Well, Lighthouse is a tool developed by Google for analyzing web applications and web pages, gathering modern performance metrics and providing insights into developer best practices.

Think of Lighthouse as the speedometer in a car that checks and balances the car’s speed limits.

Lighthouse is typically used in conjunction with development best practices and performance metrics. It runs checks on Web applications and gives you feedback on errors, sub-standard practices, better performance tips, and how to fix them.

According to the description on the Google Developers Docs

Lighthouse is an open source automation tool for improving the quality of web pages. You can run it on any web page. It audits performance, accessibility, progressive Web applications, and more.

You can run Lighthouse from the command line in Chrome DevTools, or as a Node.js module. When you give Lighthouse a URL to audit, it runs a series of audits against that page and then generates a report on how that page is performing. This report can be used as an indicator of how to improve the page. Each review produces a reference document that explains why the review is important and how it can be resolved.

It’s almost all about Lighthouse, which audits Web app urls and produces a report that tells you how bad your Web app is, based on Web standards and developer best practices. Each section of the report is accompanied by documentation explaining which parts of your app have been approved, why you should improve a particular part of your app, and how to address it.

Below is a presentation of the Lighthouse audit report on this blog bolajiayodeji.com

Left: my blog 😄 right: Lighthouse Audit report

Pretty cool, huh? 😉

It should be noted that in my first audit, I did not get such a good result. So I used the first report to fix and improve the performance and quality of my program.

This is the purpose of Lighthouse: It identifies and fixes common problems that affect the performance, accessibility, and user experience of your site.

Now, let’s get to the fun part, how to get started!

LightHouse has three workflows

  • Chrome Developer Tools
  • The command line (Node. Js)
  • Chrome Extension

I personally prefer to use LightHouse in Dev Tools. It doesn’t make sense to use an extension, because the developer tool and the extension work in the same Chrome browser, we have different preferences, and you can choose what works best for you.

Before Lighthouse is added to Chrome DevTools, you can only use the Chrome extension at first.

Using Lighthouse on the command line is also cool, (for geeks 😉)

Let’s get started!!

[1] Run Lighthouse in Chrome DevTools

  • Download Google Chrome web browser here

Note: Lighthouse only runs on the desktop

  • Go to the URL you want to audit in Google Chrome.

You can audit any URL on the web.

  • Open the Chrome DevTools
Command+Option+C (Mac)
Control+Shift+C (Windows, Linux, Chrome OS).
Copy the code
  • Click on the Audits panel

On the left is the page that will be moderated. This is my blog 😄. On the right are Chrome DevTools Audits panels, now supported by Lighthouse

  • Click the Run audits

DevTools displays a list of audit categories. Make sure they are all selected. If you want to personalize which section you want to review, you can do so by selecting the category you want to review.

  • 60 to 90 seconds later — Lighthouse will provide you with reports right on the page, depending on your Internet speed.

It’s not just Internet speed and pre-installed extensions that could affect Lighthouse auditing. For a better experience, please visitIcognito modeReview below to avoid all distractions

[2] Run Lighthouse on the command line

  • Download Google Chrome
  • Download Node.js, if installed, skip this step!
  • Install the Lighthouse
npm install -g lighthouse
# or use yarn:
yarn global add lighthouse
Copy the code

Install it as a global module with the -g option.

  • Run audit
lighthouse <url>
Copy the code

Such as:

lighthouse https://bolajiayodeji.com/
Copy the code

Lighthouse generates report files in HTML format by default. You can control the format of the output by adding control options.

The report can be displayed in HTML or JSON format.

Sample output:

lighthouse
# saves `./<HOST>_<DATE>.report.html`

lighthouse --output json
# json output sent to stdout

lighthouse --output html --output-path ./report.html
# saves `./report.html`

# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`

lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`

lighthouse --output-path=~/mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`

lighthouse --output-path=./report.json --output json
# saves `./report.json`
Copy the code

View the CLI options by running $lighthouse –help

[3] Run Lighthouse with the Chrome extension

As I said earlier, the DevTools workflow is the best because it has the added benefit of being the same as the extension workflow: no installation required.

To use this method you need to install the extension, but If you have your reasons, here is the guide; To use this method, you need to install the extension, if you have your own reasons. This is according to the guide:

  • Download Google Chrome
  • Install the Lighthouse Chrome extension from the Chrome Web Store.
  • Navigate to the page you want to audit
  • Click on the Lighthouse icon.

It should be next to the Chrome address bar. If not, open Chrome’s main menu (three dots in the top right corner) and access it at the top of the menu. Click on it to open the Lighthouse menu.

  • Click Generate Report.

Lighthouse runs an audit against open pages, and then opens a new TAB containing the results report.

Bingo! You did it

That’s all. Lighthouse is a great tool, especially for beginners.

Progressive Web applications are a very useful tool when reviewing them.

As I started using Lighthouse, I actually learned a lot about optimizations and performance standards. You will soon become an expert in building Web applications with great performance, accessibility, and user experience. 🙂

*Lighthouse is not magic; it was created by humans. It is open source and you are welcome to contribute to it. You can find bugs that can be fixed or create and improve the moderation process by looking at the Issue tracker on Github. The Issue tracker is also a great place to discuss auditing metrics, new auditing ideas, or anything related to Lighthouse. * 😄

Welcome to pay attention to the front end public number: front end pioneer, receive front-end engineering practical toolkit.