Lighthouse性能监测工具

2021/6/26 23:57:42

编程Tag： chrome 性能页面 com 监测 2.2 Lighthouse

本文主要是介绍Lighthouse性能监测工具，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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的性能优化建议
参考资料

Lighthouse是一个Google开源的自动化工具，它的主要功能就是检测网站的性能，分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。它能够针对性能、可访问性、渐进式 Web 应用（PWA）等进行审核。
本文是《前端性能监测工具》的后续详细介绍文章，如需要了解什么是前端性能监测工具可移步该文章，本文主要介绍了Lighthouse的主要监控指标和具体用法。

1 Lighthouse使用方法

1.1 在Chrome DevTools中使用

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

图1.1 Chrome DevTools的Lighthouse入口

图1.2 Lighthouse报告

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 Lighthouse应用插件

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。

指标名称	数值范围和显示颜色
首次内容渲染时间 (First Contentful Paint)	0–1.8秒绿色 (快)； 1.8–3秒橙色 (中) ；超过3秒红色 (慢)
最大内容渲染时间(Largest Contentful Paint)	0–2.5秒绿色 (快)； 2.5–4秒橙色 (中) ；超过4秒红色 (慢)
可交互时间 (Time to Interactive)	0–3.8秒绿色 (快)；3.9–7.3秒橙色 (中) ；超过7.3秒红色 (慢)
累积阻塞时长 (Total Blocking Time)	0–200毫秒绿色 (快)； 200–600毫秒橙色 (中) ；超过600毫秒红色 (慢)
累积布局偏移（Cumulative Layout Shift）	0–0.1 绿色 (好)；0.1–0.25 橙色 (需要优化) ；超过0.25 红色 (差)
速度指数（Speed Index）	0–3.4秒绿色 (快)；3.4–5.8秒橙色 (中) ；超过5.8秒红色 (慢)

2.2 性能指标划分标准

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

图2.1 HTTP Archive统计的全网平均首次内容渲染时间（桌面端和移动端）

图2.2 Lighthouse使用的互补对数正态分布曲线通过这套打分功能，性能指标通过不同分数范围被赋予不同的颜色：

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.3 累积布局偏移例子

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的性能监测，本部分将不展开讲，如下图所示：

图3.1 性能优化建议

参考资料

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

这篇关于Lighthouse性能监测工具的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！