本文正在参加「金石计划」
前端性能测试工具 Lighthouse(灯塔)使用
create by db on 2023-4-7 10:12:07
Recently revised in 2023-4-7 12:12:07闲时要有吃紧的心思，忙时要有悠闲的趣味
前言
最近做性能检测，使用的是官方提供的性能检测工具Lighthouse(灯塔)，简单介绍了下Lighthouse的一些使用方法，做个记录。
正文
一、Lighthouse 介绍
返回目录 Lighthouse 是 Google 开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。
Lighthouse 主要监测指标
| 指标 | 说明 |
|---|---|
| 性能指标（Performance） | 页面的性能评分，包括：首次内容绘制（First Contentful Paint）、首次有效绘制（First Meaningful Paint）、首次 CPU 空闲（First CPU Idle）、可交互时间（Time to Interactive）、速度指标（Speed Index）、输入延迟估值（Estimated Input Latency）。 |
| 可访问性（Accessibility） | 监测页面的可访问性与优化建议。 |
| 最佳实践（Best Practice） | 页面是否符合最佳实践。 |
| 搜索引擎优化（SEO） | 页面是否针对搜索引擎结果排名进行了优化。 |
| PWA（Progressive Web App） | 验证 PWA 的各个方面的性能情况。 |
Lighthouse 评分说明
经过检测，Lighthouse 会对上述五个维度给出一个的评估得分，分值范围0-100，主要分为三个档次，分别用红黄绿三种颜色代表：
- 0 – 49（慢）：红色
- 50 – 89（平均值）： 橙色
- 90 – 100（快）： 绿色
如果没有分数或得分为 0，则很有可能是检测过程发生了错误，比如网络连接状况异常等；如果得分能达到 90 分以上（绿色），则说明网站应用在该方面的评估表现符合最佳实践。
Lighthouse 的三种使用方式
- 使用 chrome 调试面板中的 LightHouse (推荐)
- 使用 chrome 插件扩展
- 通过命令行使用 LightHouse
二、Lighthouse 使用过程
我们以掘金首页为例，看下使用调试面板中的LightHouse！
1. F12打开浏览器调试面板，切换到Lighthouse选项卡,如下所示
2. 选择需要测试的页面(如当前登录页面)，点击Generate report按钮(Categories指标种类复选框可选择Performance、Accessibility、Best Practice三项，Device设备复选框选择Desktop)
3. 等测试完就能看到本网页的性能报告，其中包括各个指标评分
4. 如果需要保存性能数据，可以点击选项卡中右上角图标，选择合适的格式保存
三、指标详解
一、性能指标（Performance）
我们评估后，就会有这么一个结果:
可以看到一共 6 个 指标，我们看看这些指标的含义
（1）First Contentful Paint (FCP)
FCP（First Contentful Paint）首次内容绘制，浏览器首次绘制来自 DOM 的内容的时间，内容必须是文本、图片（包含背景图）、非白色的 canvas 或 SVG，也包括带有正在加载中的 Web 字体的文本。 这是用户第一次开始看到页面内容，但仅仅有内容，并不意味着它是有用的内容（例如 Header、导航栏等）
速度指标
| FCP 时间（秒） | 颜色编码 |
|---|---|
| 0–1.8 | 绿色（快速） |
| 1.8–3 | 橙色（中等 |
| 超过 3 | 红色（慢） |
优化方案
- 参考链接： web.dev/fcp/#how-to…
（2）Time to Interactive（TTI）
表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务（Long Task）完成的时间, 并且在随后的 5 秒内网络和主线程是空闲的。
速度指标
| TTI 指标 （秒） | 颜色编码 |
|---|---|
| 0–3.8 | 绿色（快速） |
| 3.9–7.3 | 橙色（中等 |
| 超过 7.3 | 红色（慢） |
优化方案
（3）Speed Index
Speed Index（速度指数）是一个表示页面可视区域中内容的填充速度的指标，可以通过计算页面可见区域内容显示的平均时间来衡量。
速度指标
| 速度指数（秒） | 颜色编码 |
|---|---|
| 0–3.4 | 绿色（快速） |
| 3.4–5.8 | 橙色（中等 |
| 超过 5.8 | 红色（慢） |
优化方案
- 参考链接： web.dev/speed-index…
（4）Total Block Time（TBT）
Total Block Time（TBT）总阻塞时间，度量了 FCP 和 TTI 之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。
只要存在长任务，该主线程就会被视为“阻塞”，该任务在主线程上运行超过 50 毫秒（ms）。我们说主线程“被阻止”是因为浏览器无法中断正在进行的任务。因此，如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。
如果任务足够长（例如，超过 50 毫秒的任何时间），则用户很可能会注意到延迟并感觉页面缓慢或过时。
给定的长任务的阻止时间是其持续时间超过 50 毫秒。页面的总阻塞时间是 FCP 和 TTI 之间发生的每个长任务的阻塞时间的总和。
速度指标
| TBT 时间（毫秒） | 颜色编码 |
|---|---|
| 0–200 | 绿色（快速） |
| 200-600 | 橙色（中等 |
| 超过 600 | 红色（慢） |
优化方案
- 参考链接： web.dev/tti/#how-to…
（5）Largest Contentful Paint（LCP）
CP（Largest Contentful Paint）最大内容绘制，可视区域中最大的内容元素呈现 到屏幕上的时间，用以估算页面的主要内容对用户可见时间。
LCP 考虑的元素包括
<img>元素<image>元素内的<svg>元素<video>元素- 通过 url() 函数加载背景图片的元素
- 包含文本节点或其他内联文本元素子级的块级元素。
为了提供良好的用户体验，网站应力争使用 2.5 秒或更短的“最大内容绘画” 。为确保您达到大多数用户的这一目标，衡量移动设备和台式机设备的页面加载量的第 75 个百分位数是一个很好的衡量标准
速度指标
| LCP 时间（秒） | 颜色编码 |
|---|---|
| 0–2.5 | 绿色（快速） |
| 2.5-4 | 橙色（中等 |
| 超过 4 | 红色（慢） |
优化方案
- 参考链接： web.dev/optimize-lc…
（6）Cumulative Layout Shift（CLS）
Cumulative Layout Shift（CLS）累计布局偏移，CLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，它是一种保证页面的视觉稳定性从而提升用户体验的指标方案。
速度指标
| CLS （比例）） | 颜色编码 |
|---|---|
| 0–0.1 | 绿色（快速） |
| 0.1-0.25 | 橙色（中等 |
| 超过 0.25 | 红色（慢） |
优化方案
- 参考链接： web.dev/cls/#how-to…
- 参考链接： web.dev/optimize-cl…
二、可访问性（Accessibility）
Accessibility 辅助功能 : 无障碍设计，也称为网站可达性。是指所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。
比如：
Background and foreground colors do not have a sufficient contrast ratio. 这个意思就是某处文字背景色和文字颜色对比度不够，对于视障用户可能不好区分,展开可以看到具体是哪块元素。
三、最佳实践（Best Practices）
est Practices 最佳实践 : 实践性检测，如网页安全性，如是否开启 HTTPS、网页存在的漏洞等
四、SEO 搜索优化
SEO（Search Engine Optimization）：搜索引擎优化检测，如网页 title 是否符合搜索引擎的优化标准等
总结
Lighthouse的评分可以很好的帮助我们了解网站的性能，并依据其评分低的地方寻找优化点，具体怎么搞，以后有机会再总结下。
路漫漫其修远兮，与诸君共勉。
参考文档
后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址
文档协议
db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。
