Page performance reports of Lighthouse

Scenario: In the middle of developing a large official website project, a client asked for Lighthouse to run page performance reports,

What is the Lighthouse

Lighthouse is a web performance measurement tool. It’s an open-source automation tool from Google Chrome that measures a wide range of performance metrics against PWA and web pages, and recommends best practices to help developers improve the quality of their websites. It generates a report on the performance of the page that tells us what needs to be done to improve the performance and experience of the application.

How to Open Lighthouse

  • Open the chrome
  • Go to the specified website
  • Right click to check

  • Click on the lighthouse

  • Select the device for analysis because the site is PC side, here we choose desktop. Since there is no PWA requirement, it is also removed

  • Click Generate Report and wait for results

Lighthouse Experience

Something to think about ahead of time

This is a list of common problems that need to be considered before a project is developed, otherwise they will not be able to be modified or will be too much work

  • 【 design or product 】Background and foreground colors do not have a sufficient ratio. Lack of contrast between background color and foreground color

  • Image elements do not have explicit width and height

  • 【 architecture 】Serve static assets with an efficient cache policy A cache policy for static resources, including the image addresses returned in the background

  • Don’t use passive listeners to improve scrolling performance

  • Enormous network payloads are avoided

  • HTTPS Does not use HTTPS

Code Considerations

The head hader HTML

Add language and zoom mode

<html lang="zh-CN">
Copy the code
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5,user-scalable=1,viewport-fit=cover"/>
Copy the code

content

  • Image elements do not have [Alt] attributes Image elements do not have [Alt] attributes

Add Alt attributes

  • Links do not have a discernible name link has no discernible name

Add the name attribute

  • Links to cross-origin destinations are unsafe Links to cross-source destinations

Add rel=”noopener” or rel=”noreferrer”

  • Issues were logged in the Issues panel in Chrome Devtools Problems are logged in Chrome Devtools

Note the map file error

Other optimization schemes

  • The first screen opening and response time of the home page should be given top priority
  • Function modules that do not affect page rendering use asynchronous loading to improve the first screen loading speed
  • Reduce the use of NPM packages to work with third-party components, and use mini packages if you must
  • Do not load useless content, resources