[Lighthouse front-end performance analysis tool] Super detailed! ! !

foreword

Most of our performance tests are basically performance tests for interfaces, and rarely involve performance tests for front-end pages.
But the factors that affect the user experience are not only the return of back-end interface data, but also the rendering of front-end pages and so on.
Therefore, in addition to paying attention to the quality of the code during the development process, we also need the assistance of professional website testing tools to let us know what aspects of our web pages need to be more optimized.
Lighthouse is an open source automation tool used to help improve the quality of web applications. Run it as a Chrome extension, or from the command line. Lighthouse analyzes web applications and web pages, collects modern performance metrics and insights about developer best practices, and allows developers to optimize and improve websites based on the generated evaluation pages to improve user experience.

Use Lighthouse

Next, we will only introduce the use of Lighthouse through the Chrome browser, and learn about other usage methods, such as installing through the Chrome app store, or installing extensions, etc.

1- Open F12, click on

the introduction of the three modes of Lighthouse:

• navigation mode (default)

  Get performance score and all performance metrics.
  Evaluate Progressive Web App functionality.
  Analyze accessibility as soon as the page loads.

  Limitations
  Cannot analyze form submissions or single page app conversions.
  Content that is not immediately available on page load cannot be analyzed.

• time span mode

  Measure layout drift and JavaScript execution time over a time range, including interactions.
  Discover performance opportunities to improve the experience of long-lived pages and SPAs.
  Limitations
  No overall performance score is provided.
  Moment-based performance metrics (for example, max content draw) cannot be analyzed.
  Unable to analyze page state issues (e.g. no accessibility category)

• snapshot mode

  Analyze the current state of the page.
  Find accessibility issues deep within SPAs or complex forms.
  Best practices for evaluating menus and UI elements hidden behind interactions.

  Limitations
  No overall performance score or metrics are provided.
  Unable to analyze any issues outside the current DOM (for example, no network, main thread or profiling).

Interpretation of the report

Focus on Top Indicators

Performance - 性能检测，如网页的加载速度、响时间等（重点）

Accessibility - 铺助检测，如网页的可访问性问题，HTML代码标签之类的优化等

Best Practices - 实践性检测，如网页安全性，如是否开启HTTPS、网页存在的漏洞等

SEO - Search Engine Optimisation搜索引擎优化检测，如网页title是否符合搜索引擎的优化标准等

PWA- 检测对Progressive Web App的性能影响

In addition, Lighthouse will measure the following Metrics performance indicators:

• Detailed
  explanation First Contentful Paint (FCP). That is, the point in time when the browser draws arbitrary content (such as text, images, canvas, etc.) to the screen for the first time.

  The largest content drawing (Largest Contentful Paint, LCP) loads the longest time point in the page to the screen.

  Interactive time (Time to Interactive, TTI. Refers to the point in time when all page content has been successfully loaded and can quickly respond to user operations.

  Speed ​​Index (Speed ​​Index, SI). Measures how quickly above-the-fold visible content is drawn to the screen. Displaying as much content as possible during the first loading of the page can often bring a better user experience, so the value of the speed index should be as small as possible.

  Total Blocking Time (Total Blocking Time, TBT) indicates the blocking time encountered during this analysis

  Cumulative Layout Shift (CLS) refers to the degree to which the layout of a page is shifted when it is loaded. Layout shifts happen because browsers tend to load page elements asynchronously. What's more, there may be media elements on your page with initially unknown dimensions. This combination means that the browser doesn't know how much space each element will take up until it finishes loading. Therefore, the layout changes drastically. What’s interesting about CLS is that it can be measured objectively with various tools, but it’s also user-centric because each user’s device can affect changes to your site’s layout. While you cannot control this aspect, you can certainly take precautions to make its impact as small as possible.

• The scoring weights corresponding to the above six indicators are as follows:
  
  https://bharat23.github.io/lh-scorecalc/scorecalc/

• Industry index measurement
  
  Of course, we should also pay attention to factors that affect performance, such as the number of page requests, image size, whether files are compressed, whether to use CDN, and so on.
  From this, you can formulate the performance indicators of your own products, such as:
  
  
  analysis
  How to determine which unnecessary resources are loaded on the page? We can open the coverage panel in F12 to view the code coverage of the resources currently used, and red indicates unused code.
  

Using resources in Chrome (performance)

What I mentioned above is the performance testing method of the page, but in fact the page also contains a large number of components. For example: input box, scroll bar, calendar, etc. Components also have performance problems. How to test the performance of components?

• Recording using the performance module in the developer
  

• After the recording is stopped, a report will be automatically generated, and the time-consuming of loading, script execution, rendering, and drawing can be summed. This time reflects the performance of the component.
  
  At present, there is no clear standard for the time consumption of components. It is mainly based on smooth use and no feeling of stuttering. If there is performance optimization, this method can be used to provide performance optimization data.

• Develop an appropriate testing strategy

   需要重点关注的页面性能：
   
   用户访问量高的页面；
   用户点击量高的功能；
   网站一级/部分二级重要的页面；
   监控发现耗时久的页面/功能；
   用户反馈卡顿的页面/功能
  
  
   需要注意：
   
   配置一致：选用与客户配置一致或相似的设备（操作系统、系统版本、系统设置、浏览器、浏览器版本等）进行测试；
   数据一致：每次测试要用相同的测试数据；
   操作一致：每次的操作场景要保持一致；
   网络一致：保持网络稳定，每次测试的网络（WIFI、3G、4G、5G）和网速保持一致；