preface

In my previous internship, I had the idea of building a performance monitoring gadget, so I first learned about Lighthouse through myself. At that time, there were not many articles on lighthouse, and I had some difficulties and it took me a lot of energy to keep going.

Here press own idea summary, hope can help you

Lighthouse What is lighthouse and what does it do?

How well a website performs is one of the most competitive indicators in a development era where we are increasingly focused on improving performance.

So we all think of ways to improve the performance of our website. But to put it simply, we are not very clear and easy to find specific performance problems that our website lacks and make improvements

But Lighthouse allows us to! It can give us a clear and easy-to-understand test report on the performance of our website

Below is the report that examined the Nuggets website

It will test our several main index, the performance, the org.eclipse.swt.accessibility, best practices, SEO

The most important thing we care about is our performance metric, Performance

This is the main metric we look for when looking for ways to improve performance

How lighthouse can help us improve performance

These are some of the performance metrics that we always look at, such as FCP first screen time, which is where we start to improve our performance

web.dev

Web. Dev is a web site that Google launched two years ago

It works in conjunction with our Lighthouse to identify performance issues and provide specific recommendations

Such as here

It advises us to use lazy loading method to handle open screen images, and provides us with practical tutorials, which can be said to be very thoughtful (we can choose to adopt and learn according to our own practical project situation).

How to use the lighthouse

So how do we use such a useful tool

The plug-in USES

So, this report was generated using the Google plugin for Lighthouse, and I’m going to post the address of the plugin here

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
Copy the code

In fact, the Performance panel in Chrome Devtools also has a location for lighthouse to start

So it can be launched in plugin and DevTools respectively

Command line tool

The above report is handy, but if we want the flexibility of lighthouse, we still need to use it from the command line, which is what I did earlier

First install the global module

npm install -g lighthouse
Copy the code

Once installed, you can use it

You can start with Lighthouse –help

It’ll give you some more detailed help, such as lighthouse [url], the simplest of all — View

It will start a Chrome process and generate a report for you

Some of the data returned will also be stored as files in your workspace

There’s a lot of great things we can do programmatically with lighthouse’s modules

For example, look at this basic code

const fs = require('fs'); const lighthouse = require('lighthouse'); // Use it to start Chrome const chromeLauncher = require('chrome-launcher'); (async () => {// headless browser. Const chrome = await chromelaunch.launch ({chromeFlags: ['--headless']}); Const options = {logLevel: 'info', output: 'HTML ', onlyCategories: ['performance'], port: chrome.port}; Const runnerResult = await lighthouse('https://example.com', options); const reportHtml = runnerResult.report; fs.writeFileSync('lhreport.html', reportHtml); console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100); await chrome.kill(); }) ();Copy the code

I’ve written some comments on it, and you can go to the official documentation for more configuration

Isn’t that interesting

At the end

There are a lot of things involved here, you can have an understanding, and then go to specific understanding

I’ll be working with you on it as well, and maybe even more on Performance and lighthouse

Typing is not easy, if it helps you, point a thumbs-up ~ all refueling

reference

Developers.google.com/web/tools/l…

Github.com/GoogleChrom…