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 ,会直接生成分析报告。这里可以选择分析的内容,设备类型(有移动端和桌面端可选)。
![](/assets/blank.gif)
![](/assets/blank.gif)
1.2 Chrome扩展程序运行
在一些较旧版本的Chrome中DevTools默认没有Lighthouse的,这时候可以通过安装扩展程序的方式使用Lighthouse。
安装方式,打开插件应用商店,https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk,点击将Lighthouse添加到Chrome,即可完成安装。(注意:有些Chrome版本是不支持Lighthouse的,据不确切的调研Chrome 60以下是不支持的)
安装完成之后,输入需要测试的网址,然后点击Lighthouse图标,点击Generate report进行报告生成。
![](/assets/blank.gif)
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分)。
![](/assets/blank.gif)
![](/assets/blank.gif)
通过这套打分功能,性能指标通过不同分数范围被赋予不同的颜色:
- 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。
![](/assets/blank.gif)
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的性能监测,本部分将不展开讲,如下图所示:
![](/assets/blank.gif)
参考资料
[1] lighthouse -看看你的web性能跑多少分
[2] 性能测量工具-LightHouse
Lighthouse性能监测工具相关推荐
- Linux 性能监测工具总结
前言: Linux系统出现问题时,我们不仅需要查看系统日志信息,而且还要使用大量的性能监测工具来判断究竟是哪一部分(内存.CPU.硬盘--)出了问题.在Linux系统中,所有的运行参数保存在虚拟目录/ ...
- 一个很好的性能监测工具dstat
无意中发现一个很好的性能监测工具dstat,实在是太强大了,可以完成vmstat,iostat,netstat等等工具才能完成的任务,而且是彩色显示的,各种情况一目了然,更美妙的它可通过参数来指定显示 ...
- Linux 性能监测工具
Linux系统出现问题时,我们不仅需要查看系统日志信息,而且还要使用大量的性能监测工具来判断究竟是哪一部分(内存.CPU.硬盘--)出了问题.在Linux系统中,所有的运行参数保存在虚拟目录/proc ...
- Linux性能监测工具Nmon介绍及其使用
1 NMON介绍 Nmon由 IBM 开发并已开源 (Nmon for linux 版本已经在 2009 年 7 月 27 日开放源码 ) ,是收集 AIX 或 Linux 主机的性能数据并分析的工具 ...
- pyDash : Linux 性能监测工具
2019独角兽企业重金招聘Python工程师标准>>> pyDash 是一个轻量且基于 web 的 Linux 性能监测工具,它是用 Python 和 Django 加上 Chart ...
- 超实用的8个Linux命令行性能监测工具
本文总结了8个非常实用的Linux命令行性能监测工具,这些命令支持所有的Linux系统,不仅可以用于监控系统,还可以发现导致性能问题的原因所在. 对每个系统/网络管理员来说,每天监测Linux系统性能 ...
- Java自带的性能监测工具之jstack
2019独角兽企业重金招聘Python工程师标准>>> 本文继续介绍Java自带的性能监测工具,本文使用jstack (Java Stack Trace)工具来玩~ 使用jstack ...
- 十三个强大的Linux性能监测工具
Linux系统下,大多数的性能监测工具保存在/proc目录下.这里我们将Linux AS 和 SUSE LINUX EnterpriseServer中的命令行及图形方式下的性能监测工具做概括性介绍.这 ...
- java性能检测工具_Java自带的性能监测工具之jmap
本文继续介绍Java自带的性能监测工具,本文使用jmap工具来玩~ jmap (Java Memory Map) 命令可以生成Java应用程序的堆快照和对象统计信息,对生成的堆快照进行分析,可以分析堆 ...
最新文章
- 计算机组装cpu用哪种好,教你电脑处理器哪款好
- 正则表达式原理及引擎实现
- 锚文本对网站SEO优化有什么帮助?
- Vant 1.6.11 发布,有赞轻量级移动端 Vue 组件库
- 选了combobox里的选项后没激发change事件_stata 事件分析法
- css3-2 CSS3选择器和文本字体样式
- KMP算法详细讲解(看完不会请打我)
- Mindis(HDU-6670)
- 挑选回文串(二进制枚举)
- [Java] 蓝桥杯ALGO-48 算法训练 关联矩阵
- appscan无法连接到服务器_和平精英无法连接到服务器是怎么回事 最新解决方案...
- C语言关键字必备练习题
- 视频教程-CCNA之TCP/IP协议栈精讲-思科认证
- 关于流行的几点思考——《引爆点》读书笔记
- 【LeetCode-SQL】1336. 每次访问的交易次数
- C++:Sqlite调用之增、读、改
- 操作系统的几种基本类型
- GrayRhino轻松解锁卡贴机的越狱插件,不需要任何卡贴
- Java培训学习之分词工具之HanLP介绍
- WEB2.0商业模式才刚开始