前言

lighthouse 是 Google Chrome 推出的一款开源自动化工具，它可以搜集多个现代网页性能指标，分析 Web 应用的性能并生成报告，为开发人员进行性能优化的提供了参考方向。

它可以直接在 chrome DevTools 中使用。

点击「生成报告」，就能得到一份页面性能分析报告。

这里以掘金官网为例

我们看到 「Performance」 的评分不太理想，只有 36 分，让我们来看看可以从什么方面去优化它，点击它下钻。

这里展示了 6 个指标，意味着你可以从这几个方面去做性能优化，分别是：

• Frist Contentful Paint（FCP）
• Time to Interactive（TTI）
• Total Blocking Time（TBT）
• Largest Contentful Paint（LCP）
• Cumulative Layout Shift（CLS）
• Speed Index

本文介绍下以上 6 个指标的含义与优化方式。

Frist Contentful Paint（FCP）

含义

页面上第一个元素绘制的时间点。「第一个元素」指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。

如何优化

• 移除阻塞渲染的资源
• 减少代码体积
• 预加载资源与关键请求
• 保持较低的请求数和较小的传输大小

Time to Interactive（TTI）

含义

可流畅地响应用户交互的时间。

计算方式：

1. 从 FCP 开始

2. 找到第一个连续 5s 安静窗口（安静窗口指没有长任务且不超过两个 Get 请求）

3. 从安静窗口反推，找到最后一个长任务

4. 这个长任务结束的时间点就是 TTI

如何优化

• 减少 JS 体积与执行时间
• 减少第三方代码影响
• 预加载关键请求
• 保持较低的请求数和较小的传输大小

Total Blocking Time（TBT）

含义

总阻塞时长，指的是 FCP 与 TTI 之间主线程被阻塞的总时长。

单个长任务阻塞时间 = 长任务时间 – 50ms，TBT 为这些阻塞时间的总和。

例如，下图为主线程任务执行的时间轴：

时间轴上有五个任务，其中三个是长任务，因为这些任务的持续时间超过 50ms。下图显示了各个长任务的阻塞时间：

因此，虽然在主线程上运行任务的总时间为 560ms，但其中只有 345ms 被视为阻塞时间（TBT）。

如何优化

• 减少第三方代码影响
• 减少 JS 执行时间
• 最小化主线程工作
• 保持较低的请求数和较小的传输大小

Largest Contentful Paint（LCP）

含义

最大内容绘制，指页面上最大的图片或文字绘制的时间点。以下两张图中最大元素分别是 Instagram 标志和 Google 搜索页面中的一段文本，因此 LCP 为这两个元素加载的时间点。

如何优化

• 优化关键渲染路径
• 优化 CSS
• 优化图片
• 优化网页字体
• 减少 JS 体积

Cumulative Layout Shift（CLS）

含义

累积布局偏移，测量的是整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。

每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移 。

比如文本在毫无预警的情况下移位，导致找不到先前阅读的位置。或者正要点击一个链接或一个按钮，但在手指落下的瞬间，链接移位了，点到了别的东西。

如何优化

• 在 image 和 video 元素上设置 width 和 height 之类的方式预留所需空间
• 保证任何的布局偏移都是在预期内的，除非是对用户交互做出响应，否则切勿在现有内容的上方插入内容。
• 使用 transform 动画

Speed Index

含义

是一种衡量页面可视区域加载速度的指标。它只关注页面的可视区域（下图为同一网络，不同分辨率的得分情况，意思是可视区域大小会影响评分）。

如何优化

• 最小化主线程工作
• 减少 JS 执行时间
• 保证在自定义字体加载时文字可见（可在字体加载时显示系统默认字体）

总结

根据以上 6 个指标，我们可以简单明确一下优化思路：

• 尽快完成页面内容渲染
  • 尽快开始渲染（优化 FCP）
  • 尽快完成主要内容渲染（优化 LCP）
  • 尽快完成所有内容渲染（优化 Speed Index）
• 减少长任务
  • 尽早执行长任务（优化 TTI）
  • 把长任务拆成小任务（优化 TBT）
• 保证页面布局稳定（优化 CLS）

❤️支持

如果本文对你有帮助，点赞?支持下我吧，你的「赞」是我创作的动力。

关于我，目前是字节跳动一线开发，工作四年半，工作中使用 React，业余时间开发喜欢 Vue。

平时会不定期对前端的工作思考与实践进行深度分享和总结，公众号「小李的前端小屋」，感谢关注～