Web Vitals 详解

在我之前的文章中，我讨论了自动化性能测试工具，以及谷歌如何利用这些分数来确定其算法中的页面排名。具体来说，我在文章结尾提到了“核心网页指标”的概念。那么，让我们来聊聊它的含义吧！

谷歌

谷歌在 2020 年宣布网站性能将影响网页排名，他们使用三个称为核心网络生命力的指标来确定性能得分。

这些指标包括：

• 累积布局偏移 (CLS)
• 最大内容绘制 (LCP)
• 首次输入延迟（FID）

那么，这些指标各自意味着什么？又受哪些因素影响？

最大的内容丰富的油漆

此指标旨在衡量用户在网站加载时的体验。得分较低通常表示资源渲染受阻或服务器响应时间过慢。

目标是找到页面加载过程中最大的阻碍。通常是字体文件或图片。如果处理得当，网站本身的加载体验就会很好。

LCP 与一个称为速度指数的较旧指标相关。然而，该指标只能在网站加载时使用工具拍摄快照来计算。LCP 是一种更快速、更经济的方法来判断同类性能问题。

累计布局偏移

累积布局偏移量是衡量视觉稳定性的指标。最大内容绘制 (Large Contentful Paint) 效果可能很好，但如果页面随着新信息的出现不断发生布局偏移，其相关性就会降低。在尝试与页面交互时，布局发生偏移也会带来糟糕的用户体验。

Google 关注此指标的部分原因是为了打击那些用大量弹窗轰炸你的广告和网站。此外，他们也不希望你延迟加载那些对页面布局有重大影响的内容，例如字体。用户对你网站的第一印象应该是稳定的。

第一个输入延迟

首次输入延迟是最细微的核心网络关键因素，因为在大多数性能测试工具中它不可用。

FID 旨在衡量用户首次尝试与页面交互时的体验。如果用户按下按钮，页面需要多长时间才能响应？棘手的是，衡量 FID 需要追踪真实用户与网站的交互方式。让我们来了解一下其中的原因。

想象一下——你模拟页面加载，并在页面渲染完成后立即点击系统看到的第一个按钮。由于 React 尚未完成水合，因此需要一秒钟或更长时间才能记录该点击。这似乎是一种糟糕的用户体验。但事实真的如此吗？如果一个真正的用户导航到你的网站，他们必须注意到有一个按钮，将光标（或 Tab 键移到该按钮上）然后点击该按钮。在这段时间内，他们会感受到与模拟测试相同的延迟吗？可能不会。

不幸的是，收集真实用户数据的成本很高。因此，大多数测试工具使用诸如总阻塞时间 (TBT) 之类的指标来估算 FID。这并非以用户为中心的结果，但它可以让您了解页面需要多长时间才能与用户交互。

大多数情况下，你需要所有东西的加载速度都快于 100 毫秒。任何比这更慢的加载速度都会被视为不正常。

其他指标

虽然 Google 专注于三个核心网络生命力指标，但还有许多其他指标构成了更大的网络生命力指标集。

• 可交互时间
  (TTI) 与 TBT 类似，有时也用于估算 FID。它侧重于阻止浏览器交互的行为。但是，它也测量网络安静时间，因此与 TBT 并非 1:1 匹配。

• 首次 CPU 空闲
  这测量页面主线程第一次安静到足以处理输入的时间。

• 首次内容绘制
  这与 LCP 类似，但它不是测量最大资产绘制的时间，而是测量第一个资产绘制的时间。

我们做完了吗？

到目前为止，我们已经了解了构成绩效分数的指标以及提供这些分数的工具。下一篇文章将重点介绍哪些行为会影响此分数，以及提升分数的最佳实践。