目录

• 1 Lighthouse使用方法
• • 1.1 在Chrome DevTools中使用
  • 1.2 Chrome扩展程序运行
  • 1.3 作为node模块使用
  • 1.4 Lighthouse批量分析工具
• 2 Lighthouse的主要监控指标
• • 2.1 主要性能指标
  • 2.2 性能指标划分标准
  • • 2.2.1 首次内容渲染时间 (First Contentful Paint)
    • 2.2.2 最大内容绘制时间 (Largest Contentful Paint)
    • 2.2.3 可交互时间 (Time to Interactive)
    • 2.2.4 累积阻塞时长 (Total Blocking Time)
    • 2.2.5 累积布局偏移 (Cumulative Layout Shift)
    • 2.2.6 速度指数 (Speed Index)
• 3 Lighthouse的性能优化建议
• 参考资料

1 Lighthouse使用方法

1.1 在Chrome DevTools中使用

  打开Chrome 开发者工具，选择Lighthouse -> Generate report ，会直接生成分析报告。这里可以选择分析的内容，设备类型（有移动端和桌面端可选）。

1.2 Chrome扩展程序运行

  在一些较旧版本的Chrome中DevTools默认没有Lighthouse的，这时候可以通过安装扩展程序的方式使用Lighthouse。
  安装方式，打开插件应用商店，https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk，点击将Lighthouse添加到Chrome，即可完成安装。（注意：有些Chrome版本是不支持Lighthouse的，据不确切的调研Chrome 60以下是不支持的）
  安装完成之后，输入需要测试的网址，然后点击Lighthouse图标，点击Generate report进行报告生成。

1.3 作为node模块使用

  在自动化测试中，可以采用命令行的方式进行调用Lighthouse，使用前，首先要安装lighthouse的命令行工具：

npm install -g lighthouse

  通过命令行的方式运行lighthouse，这时lighthouse会调用Chrome完成指标采集。运行完成后将生成相应报告。

lighthouse https://example.com

1.4 Lighthouse批量分析工具

  作为node模块使用，每次只能测试一个网址，大部分场景下需要同时访问多个页面的性能，所以需要批量测试的工具，lighthouse-batch就是为应对这种需求而出现的。
  首先安装lighthouse-batch（注意：lighthouse-batch要求nodejs在10.13版本以上）

npm install -g lighthouse-batch

  批量执行，只需要将待测试网址通过逗号分隔符添加到参数后面就行。

lighthouse-batch -s https://www.mi.com,https://m.mi.com

  命令执行后，会生成report文件夹，默认生成json格式数据，里面包含各个页面性能数据以及汇总数据。如下：

m_mi_com.report.json
summary.json
www_mi_com.report.json

想要html报告，使用 --html 可以生成html报告。

lighthouse-batch -s https://www.mi.com,https://m.mi.com --html

html报告如下：

m_mi_com.report.html
www_mi_com.report.html

2 Lighthouse的主要监控指标

2.1 主要性能指标

  LightHouse主要采用了六个和用户体验直接相关的指标进行了展示。具体参数如表1.1。

2.2 性能指标划分标准

  一旦Lighthouse收集完性能指标（大多是以毫秒计算），下一步将这些原始指标数值通过互补对数正态分布曲线映射到0-100区间，实现打分功能。
  具体工作原理是这样的（以最大内容绘制时间 (Largest Contentful Paint)为例说明），通过统计真实数据（数据主要来自HTTP Archive，一个互联网请求数据统计平台），性能靠前的网站的LCP普遍在1220ms左右，那么通过互补对数正太分布曲线，发现对应的是0.99（这里取分数99分）。

• 0 — 49 （红色）：差
• 50 — 89 （橙色）：需要改进
• 90 — 100 （绿色）：好
  （注意：随着互联网基础设施改善和互联网内容的转变，HTTP Archive的统计数据是动态变化的，因此，打分的范围应该是变化的）

2.2.1 首次内容渲染时间 (First Contentful Paint)

  用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间（注意，iframe中的内容是不计入统计范围）。根据上述的打分原则，FCP的性能可以划分为如下三个等级：

• 0–1.8秒 绿色 (快)
• 1.8–3秒 橙色 (中)
• 超过3秒 红色 (慢)

2.2.2 最大内容绘制时间 (Largest Contentful Paint)

  用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。
只有Chrome 77+版本才支持LCP，如下是LCP的性能等级：

• 0–2.5秒 绿色 (快)
• 2.5–4秒 橙色 (中)
• 超过4秒 红色 (慢)

2.2.3 可交互时间 (Time to Interactive)

  这个指标并不是指的最早的可交互时间，而是可流畅交互的时间，具体的值为FMP之后，5秒后没有long task执行（50ms以上的任务）的时间。这个指标对于用户体验至关重要，页面完全渲染出来，但是如果用户想和页面进行交互，但是页面没有反应，这种体验是非常差的。Google也给出了TTI的标准：

• 页面显示了有用的内容，这些内容通过First Contentful Paint能够测量到
• 页面上可见元素的事件处理回调都已经完成注册
• 页面能在50毫秒内响应用户的交互
  根据HTTP Archive数据和Lighthouse划分方法，如下是TTI的等级：
• 0–3.8秒 绿色 (快)
• 3.9–7.3秒 橙色 (中)
• 超过7.3秒 红色 (慢)

2.2.4 累积阻塞时长 (Total Blocking Time)

  用户体验指标，代表着页面何时真正进入可用的状态。毕竟光内容渲染的快也不够，还要能迅速响应用户的交互。主要是统计FCP和TTI之间超过50ms任务的剔除50ms之后累计时长。根据上述性能指标的计算方法，得到TBT等级如下：

• 0–200毫秒 绿色 (快)
• 200–600毫秒 橙色 (中)
• 超过600毫秒 红色 (慢)

2.2.5 累积布局偏移 (Cumulative Layout Shift)

  页面上非预期的位移波动。如图2.3为例，以整个屏幕的尺寸最大的参数为例，本例为屏幕高度，不稳定元素为文本框高度，文本框高度移动了整个屏幕高度的25%。这时候导致了75%的屏幕内容受到影响，所以影响因子为0.75，偏移因子为0.25。所有布局偏移为0.75 * 0.25 = 0.1875。

2.2.6 速度指数 (Speed Index)

  指的是网页以多快的速度展示内容。Lighthouse首先录制网页加载过程的中的视频，然后计算帧与帧之间的视觉变化。然后Lighthouse会采用第三方nodejs库Speedline Node.js module来产生速度指数分数。
  根据上述性能指标的计算方法，得到SI等级如下：

• 0–3.4秒 绿色 (快)
• 3.4–5.8秒 橙色 (中)
• 超过5.8秒 红色 (慢)

3 Lighthouse的性能优化建议

  在报告中，LightHouse会给出一些优化建议，本文重点是Lighthouse的性能监测，本部分将不展开讲，如下图所示：

参考资料

[1] lighthouse -看看你的web性能跑多少分
[2] 性能测量工具-LightHouse