Lighthouse性能监测工具
作者:互联网
目录
Lighthouse是一个Google开源的自动化工具,它的主要功能就是检测网站的性能,分析网络应用和网页,收集现代性能指标并提供对开发人员最佳实践的意见。它能够针对性能、可访问性、渐进式 Web 应用(PWA)等进行审核。
本文是 《前端性能监测工具》的后续详细介绍文章,如需要了解什么是前端性能监测工具可移步该文章,本文主要介绍了Lighthouse的主要监控指标和具体用法。
1 Lighthouse使用方法
1.1 在Chrome DevTools中使用
打开Chrome 开发者工具,选择Lighthouse -> Generate report ,会直接生成分析报告。这里可以选择分析的内容,设备类型(有移动端和桌面端可选)。
![](https://www.icode9.com/i/ll/?i=20210626073020261.png)
![](https://www.icode9.com/i/ll/?i=20210626073347706.png)
1.2 Chrome扩展程序运行
在一些较旧版本的Chrome中DevTools默认没有Lighthouse的,这时候可以通过安装扩展程序的方式使用Lighthouse。
安装方式,打开插件应用商店,https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk,点击将Lighthouse添加到Chrome,即可完成安装。(注意:有些Chrome版本是不支持Lighthouse的,据不确切的调研Chrome 60以下是不支持的)
安装完成之后,输入需要测试的网址,然后点击Lighthouse图标,点击Generate report进行报告生成。
![](https://www.icode9.com/i/ll/?i=2021062608575899.png)
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分)。
![](https://www.icode9.com/i/ll/?i=20210626120430892.png)
![](https://www.icode9.com/i/ll/?i=20210626121349615.png)
- 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。
![](https://www.icode9.com/i/ll/?i=20210626214033271.png)
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的性能监测,本部分将不展开讲,如下图所示:
![](https://www.icode9.com/i/ll/?i=20210626230427453.png)
参考资料
[1] lighthouse -看看你的web性能跑多少分
[2] 性能测量工具-LightHouse
标签:Lighthouse,Chrome,性能,lighthouse,2.2,监测,com,页面 来源: https://blog.csdn.net/huiskai/article/details/118156500