如何使用Lighthouse性能检测工具

前言

最近作性能检测工具，不少知识点不清楚，打算查缺补漏，补一补。git

接下来从官方提供的性能检测工具Lighthouse(灯塔)开始咱们的学习，简单介绍了下Lighthouse的一些点。github

阅读完本文，你能够了解到web

Lighthouse 是什么。
如何快速上手Lighthouse (使用入门)。
Lighthouse中的一些Metrics指标。

性能相关的总结准备搞个思惟导图，能够点这里:chrome

docs.qq.com/mind/DWnljW…npm

Lighthouse 是什么

官方对它的解读:浏览器

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。您能够将其做为一个 Chrome 扩展程序运行，或从命令行运行。您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，而后生成一个有关页面性能的报告。bash

它是如何工做的呢？markdown

若是你跟我同样，翻过它的代码，看过它的介绍确定很懵逼，它的代码依赖性以下:网络

感兴趣的能够看看它的仓库，参考连接已经给出。app

github.com/GoogleChrom…

使用入门

运行 Lighthouse 的方式有两种: 做为 Chrome 扩展程序运行，或做为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。命令行工具容许您将 Lighthouse 集成到持续集成系统。

Chrome 扩展程序

下载 Google Chrome 52 或更高版本。

安装 Lighthouse Chrome 扩展程序。

地址:chrome.google.com/webstore/de…

点击 Generate report 按钮以针对当前打开的页面运行 Lighthouse 测试。

命令行工具

Node CLI在配置和报告Lighthouse运行状况方面提供了最大的灵活性。若是用户须要更多的高级功能，或者想自动运行Lighthouse，可使用Node CLI。安装 Lighthouse 做为一个全局节点模块。

安装:

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
复制代码

针对一个页面运行 Lighthouse 审查。

lighthouse https://www.example.com --view
复制代码

传递 --help 标志以查看可用的输入和输出选项。

lighthouse --help
复制代码

对于一些options不清楚的，能够点击这个连接:

github.com/GoogleChrom…

假设咱们审查后，就会有这么一个结果:

能够看到一共6个Metrics，Lighthouse 6.0在报告中引入了三个新指标。其中两个新的指标--最大内容画（LCP）和累积布局偏移（CLS）--是Core Web Vitals的实验室实现。

那么接下来，咱们看看这些Metrics指标的含义。

几个Metrics指标

First Contentful Paint (FCP)

第一次内容丰富的绘画(FCP)指标衡量了从页面开始加载到页面内容的任何部分呈如今屏幕上的时间。对于该指标，"内容 "指的是文本、图像（包括背景图像）、元素或非白色元素。

在上面的负载时间线中，FCP发生在第二帧中，就像呈现给屏幕的第一文本和图像元素时同样。

你会注意到，虽然部份内容已经呈现，但并不是全部内容都已呈现。这是First Contentful Paint (FCP)和Largest Contentful Paint (LCP)之间的一个重要区别--LCP的目的是衡量页面的主要内容什么时候完成加载。

知道了概念，如何衡量FCP呢，咱们能够接触的有Field tools和Lab tools

要在JavaScript中测量FCP，你可使用Paint Timing API。下面的例子展现了如何建立一个PerformanceObserver，该PerformanceObserver监听名称为first-contentful-paint的油漆条目，并将其记录到控制台。

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

复制代码

Speed Index

速度指数是Lighthouse报告中性能部分跟踪的六个指标之一。每项指标都能反映出页面加载速度的某些方面。

那么它是如何检测的呢？

速度指数衡量的是内容在页面加载过程当中的视觉显示速度。Lighthouse首先会在浏览器中捕获一段页面加载的视频，并计算出各帧之间的视觉进度。而后，Lighthouse使用Speedline Node.js模块来生成速度指数得分。

至于具体的计算，能够参考GitHub里面的代码，这里就不展开了。

那么咱们有机会提高它的性能吗？

利用Lighthouse报告中的 "Opportunities "部分来肯定哪些改进对你的页面最有价值。机会越重要，对性能评分的影响就越大。例如，下面的Lighthouse截图显示，消除渲染阻塞资源将带来最大的改善。

Largest Contentful Paint (LCP)

最大内容画（LCP）指标报告了在视口中可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间。

从图上也能看出来，为了提供良好的用户体验，网站应该努力使最大内容画幅达到2.5秒或更少。

更多信息，请观看Paul Irish对LCP的深度剖析。

www.youtube.com/watch?v=diA…

Cumulative Layout Shift (CLS)

官方对它的解释:

Cumulative Layout Shift (CLS)是一种视觉稳定性的测量方法，它量化了页面内容在视觉上的移动程度。它量化了一个页面的内容在视觉上移动的程度。

简单理解就是:

CLS测量的是整个页面生命周期内发生的每一次意外布局转变的全部单个布局转变得分的总和。

布局偏移发生在可见元素从一个渲染帧到下一个渲染帧改变其位置的任什么时候候。关于如何计算单个布局偏移分数，请参见下文）。

web.dev/cls/

从上面的图来看，CLS得分低是给开发者的一个信号，代表他们的用户没有经历没必要要的内容移动；CLS得分低于0.10被认为是 "好"。

Total Blocking Time (TBT)

咱们看看官方对它的解读：

总阻塞时间（Total Blocking Time，TBT）量化了负载响应能力，测量了主线程被阻塞的时间长到足以阻止输入响应的总时间。TBT衡量的是第一次有内容的绘画（FCP）和交互时间（TTI）之间的总时间。它是TTI的配套指标，它为量化主线程活动带来了更多的细微差异，这些活动阻碍了用户与您的页面进行交互的能力。

此外，TBT与核心网络生命力的现场指标First Input Delay（FID）有很好的相关性。

须要更多的了解，能够参考连接:

web.dev/tbt/

Phase	Metric Name	Metric Weight
Early (15%)	First Contentful Paint (FCP)	15%
Mid (40%)	Speed Index (SI)	15%
	Largest Contentful Paint (LCP)	25%
Late (15%)	Time To Interactive (TTI)	15%
Main Thread (25%)	Total Blocking Time (TBT)	25%
Predictability (5%)	Cumulative Layout Shift (CLS)	5%

最后

到这里，其实Lighthouse如何使用，以及一些关键的指标也作了说明，你必定会有疑问:

我如何经过计算他们具体的值呢，有对应的JavaScript API？
既然能够经过Lighthouse来衡量性能并找到加快页面加载的机会，那么咱们如何优化呢？

想必看到这里，你遇到的疑惑跟以前同样，那么如何解决呢。

嗯，上面说的部分并无详细的展开，剩下的部分，尝试去翻一翻官方文档，查一查资料，收获必定很大。

使用入门，很简单，没有难度，后续会继续梳理，思惟导图在这里:

docs.qq.com/mind/DWnljW…

我是TianTianUp，咱们下一期见！！！

参考

[1] Lighthouse performance scoring: web.dev/performance…

[2] GoogleChrome-lighthouse: github.com/GoogleChrom…

[3] What's New in Lighthouse 6.0: web.dev/lighthouse-…

[4] Measure: web.dev/measure/

[5] How does Lighthouse work?: github.com/GoogleChrom…

[6] Largest Contentful Paint (LCP): web.dev/lcp/

[7] Total Blocking Time (TBT): web.dev/tbt/

[8] Cumulative Layout Shift (CLS): web.dev/cls/

[9] First Contentful Paint (FCP): web.dev/fcp/

[10] Speed Index: web.dev/speed-index…