Were reviewed,

Front end performance optimization is an eternal will answer the interview, with the passage of time and the development of business, on almost every front application in performance test, according to statistics, whenever a second page load time increases, there will be a loss of a large number of users, so be front performance optimization, retained for user experience and products has a very important role.

So how to know the performance of the current page, and take targeted performance optimization, as well as evaluate the effect of performance optimization, we need to collect detailed indicators related to page performance. There are many metrics on a page, and different products focus on different metrics, so it is not accurate to cover all scenarios with a uniform collection and analysis system. Take TA products of our company for example, in addition to conventional indicators such as page load time, we pay more attention to indicators such as query time, rendering time of charts and tables and interaction time, which greatly affect user experience. Therefore, it is very necessary to develop a front-end performance monitoring system that fits the team’s needs.

At present, the Front-end team has completed the development of its own front-end performance monitoring platform version 1.0, involving technologies such as React, Node. js, Egg, mysql, Lighthouse, Puppeteer, etc. React is the front-end page writing language of the monitoring platform, Egg is the background service, mysql is the database, and Lighthouse and Puppeteer are all Node libraries. The former is a performance indicator collection and review tool, and the latter provides a headless browser environment to simulate page operations.

Second, design ideas

The overall design idea of our current performance monitoring platform is to access the detection page through Puppeteer on the server side, call Lighthouse to obtain the corresponding indicators, calculate the target scores, save the results in the database, and provide them to the front page for visual display.

For regular sites, in addition to the default censors supported by Lighthouse, we’ve added a number of custom censors for images, resources, interfaces, and more, allowing users to customize the items they need to measure their performance.

For the TA system, we added several performance markers in the business system through performance. Mark and performance. Measure, and obtained these data through the custom collector of Lighthouse.

Our overall performance monitoring sharing will be divided into the following four parts:

  1. Basic configuration and usage of Lighthouse
  2. Lighthouse’s custom collectors and censors
  3. Basic configuration and usage of Puppeteer
  4. Lighthouse and Puppeteer combine for complex operations

This article describes the basic uses of Lighthouse.

Introduction to Lighthouse

Lighthouse is Google’s open-source automation tool for improving the quality of web applications. It can be run as a Chrome extension or from the command line. Simply provide Lighthouse with a site to review, which will run a series of tests against the page and then generate a report on the page’s performance to see what can be done to improve the application.

Lighthouse is made up of these components

  • Driver – Interacts with Chrome through the Chrome Debugging Protocol.
  • Gatherer — Decides what information is collected during page loading and outputs the collected information as an Artifact. Customizable.
  • Audit — Take an Artifact gathered by Gatherer as input, and the Audit tests it to produce the appropriate assessment results. Customizable.
  • Reporte — Reports the results of the review in a specified way.

The simple workflow of Lighthouse is as follows: Specify a page – > Connect a page – > test a page – > Generate a report.

Use Lighthouse

4.1 Chrome Developer Tools

  1. Open Chrome, right-click in the blank area and choose Check.

  1. On the toolbar, select the Lighthouse TAB.

  1. If you don’t have the Lighthouse TAB in your toolbar, you can set it to display.

  1. Set the category and device, and click to generate the report. The category is to select the module to be tested, and the device is mobile terminal or desktop terminal, which can be selected according to specific scenarios.

  1. At the end of the run, you can see the following results.

4.2 Using the Node CLI

  1. Install Lighthouse globally.
NPM install -g Lighthouse // Or YARN Global add LighthouseCopy the code
  1. Open the command window and run the Lighthouse command.
lighthouse https://www.baidu.com
Copy the code

4.3 Used as a Node module

You can also install Lighthouse in your Node project and use it as a Node module.

const fs = require('fs'); const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); (async () => { const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] }); const options = { logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port, }; const runnerResult = await lighthouse('https://www.baidu.com', options); // `.report` is the HTML report as a string const reportHtml = runnerResult.report; fs.writeFileSync('lhreport.html', reportHtml); // `.lhr` is the Lighthouse Result as a JS object console.log('Report is done for', runnerResult.lhr.finalUrl); console.log( 'Performance score was', runnerResult.lhr.categories.performance.score * 100 ); await chrome.kill(); }) ();Copy the code

5. Interpretation of results

Once you’ve evaluated your site with Lighthouse, you’ll get a score report on Performance, Accessibility, Best practices, SEO, PWA (Progressive Web App) consists of five sections, each of which is followed by a number of audits, detailed diagnostics and optimization recommendations to help developers tailor their optimizations.

Here’s a little bit about how Lighthouse calculates these scores.

5.1 performance

Lighthouse offers six performance metrics: FCP, SI, LCP, TTI, TBT, and CLS, with weights of 10%, 10%, 25%, 10%, 30%, and 15%, respectively. Lighthouse computes a score based on its weights. For details about indicators, see: web.dev/lighthouse-…

5.2 Accessibility

Accessibility measures whether all users are able to effectively access content and browse the site. The score is calculated from a weighted average of the relevant metrics.

5.3 Best Practices

Best Practices Tests best practices that can improve the code health of a web page, with scores calculated from a weighted average of relevant metrics. See web. Dev/Lighthouse -…

5.4 Search engine Optimization

Search engine optimization measures how well a search engine understands the content of a web page. The score is calculated using a weighted average of the relevant metrics.

5.5 PWA

The PWA measures whether a site is fast, reliable, and installable. The score is calculated from a weighted average of the relevant metrics.

Sixth, the end

These are the basic uses of Lighthouse. The basic Lighthouse review provides a fairly accurate assessment of the performance data of a page and helps us with many optimizations. If you have more specific performance requirements, you can customize the collector and the reviewer. Stay tuned for our next article on the use of Lighthouse’s custom collector and censor.

Reference links:

  • Github.com/GoogleChrom…
  • Developers.google.com/web/tools/l…
  • Web. Dev/learn / # ligh…

At present, we are responsible for the research and development of user behavior analysis system, which is the most used in the game industry. At the same time, we are also actively exploring new technology and new fields in the front end. If you are interested in games, big data, visualization, engineering, full stack and other aspects, welcome to join us and create a better future!

Email address:[email protected]