原文地址
Web Vitals —— 谷歌的新一代Web性能体验和质量指标
推荐：Google开发了许多实用指标和工具，帮助衡量用户体验和质量，从而发掘优化点。一项名为Web Vitals的计划降低了学习成本，为网站体验提供了一组统一的质量衡量指标 – Core Web Vitals，其中包括加载体验、交互性和页面内容的视觉稳定性，构成了2020年核心Web健康指标的基础。本文详细的介绍了每个指标及其使用方式，推荐了用于测量这些指标的实用工具，快来一起看看吧～
Nathan Dumlao摄影作品（发表于Unsplash）
有很多方法可以优化网站的用户体验。若能预先了解最佳的优化衡量方法，可以大大节省时间和成本。
Google在2020年5月5日提出了新的用户体验量化方式Web Vitals来衡量网站的用户体验，并将这些衡量结果用作其排名算法的一部分。为了更好的理解这些内容，让我们来看看这些重要指标是什么。
Google在使用者体验量化发展的相关成果
01
Core Web Vitals与Web Vitals
什么是Web Vitals，Google给出的定义是一个良好网站的基本指标（Essential metrics for a healthy site），过去要衡量一个网站的好坏，需要使用的指标太多了，Web Vitals可以简化指标的学习曲线，只需聚焦于Web Vitals指标的表现即可。
“你不需要成为任何领域的专家就可以了解Web Vitals。它们很简单，比如移动友好性、浏览安全性、HTTPS、交互性、视觉稳定性、加载时间等。”
在这些Web Vitals中，Google确定了三个主要衡量指标，即在所有类型的网站中通用的Core Web Vitals[1]：
（[1]Core Web Vitals是应用于所有Web页面的Web Vitals的子集，是其最重要的核心）
Core Web Vitals与Web Vitals
- 加载性能（LCP） – 显示最大内容元素所需时间
- 交互性（FID） – 首次输入延迟时间
- 视觉稳定性（CLS） – 累积布局配置偏移
这三个指标已经经过了一段时间的验证，如LCP在WICG已经孵化至少1年以上，FID在Google Chrome Labs上已经实施2年以上，LCP和CLS（相关Layout Instability API）已于今年入W3C草拟标准。
让我们一起详细了解下Core Web Vitals。
1. LCP – 最大内容绘制
加载性能
LCP的基准时间
LCP（Largest Contentful Paint）用于衡量加载体验，从真实用户的角度衡量网页的加载速度。它是从页面刚开始加载到呈现出所有内容时的持续时间。
“换句话说，LCP是度量网页上可见区域加载时间的方法”
让我们比较一下有图像和没有图像的媒体文章的LCP。
LCP对比
有图片的文章用了3.57秒加载，而没有图片的文章只用了2.32秒载入。
“谷歌坚称，所有开发者和产品所有者都会定期测量其应用程序的Core Web Vitals，并提供工具来辅助测量。”
2. FID – 首次输入延迟
交互行为
FID的基准时间
FID（First Input Delay）涉及到用户与web页面之间的交互性，用于衡量网站操作的顺畅程度。它**测量了用户第一次产生交互行为，**到浏览器响应该用户操作的持续时间。这些用户交互行为可以是单击按钮、点击链接或任何基于JavaScript的自定义控件。
在TTI的时间内第一个互动事件的开始时间与浏览器回应事件的时间差
为什么要取在TTI[2]发生的第一次的操作事件，Google给的理由有以下三点：
- 使用者的第一次互动体验印象相当重要；
- 当今网页最大的互动性问题通常发生在一开始载入时；
- 页面载入完后的第二次操作事件延迟，有其他专门的改善解决建议。
（[2]互动时间TTI是衡量负载响应能力的重要实验室指标。它有助于确定页面看起来是交互式但实际上不是交互式的情况。快速的TTI有助于确保页面可用。TTI度量标准衡量的是从页面开始加载到页面主要子资源加载之间的时间，它能够快速可靠地响应用户输入。）
“根据Google的基准测试，交互的最佳持续时间应该在100ms以下，而任何超过300ms的时间都被认为是较差的。”
人们可能会说这些时间间隔很小，调整几百毫秒也没什么区别。但实际上，这些微小的变化可能会对最终用户产生重大影响。
3. CLS – 累计布局偏移
视觉稳定性
CLS的基准时间
你可能已经注意到某些时候网页中的元素在加载时出现移动，我敢肯定这不是用户期待的优秀体验。在这样的场景中，CLS（Cumulative Layout Shift）**测量在页面的整个生命周期中发生的每个意外的样式移动的所有单独布局更改得分的总和，可以方便地用来度量web页面的视觉表现。**布局的移动可能发生在可见元素从一帧到下一帧改变位置的任何时候。为了提供良好的用户体验，网站应努力使CLS分数小于0.1。
“CLS显示页面加载时组件移动的次数。正如大家所理解的，CLS需要尽可能少地次数来实现良好的用户体验。”
下图显示了medium.com和视觉不稳定网站之间的CLS差异。
视觉稳定性测量
在上面的例子中，medium.com网站显示其CLS为0.097。
“这是不是意味着medium.com网站加载时主页移动了0.097次？→ 不是！！”
计算此值时要考虑视窗大小以及两个渲染帧之间视窗中不稳定元素的移动。
布局偏移系数（Layout Shift Score） =影响范围系数（Impact Fraction） x移动距离系数（Distance Fraction）
CLS值（布局偏移系数）可以使用上述公式轻松计算。此公式中的影响系数是指不稳定元素对视窗的影响，而距离系数是指不稳定元素移动的距离。
例如，假设一个不稳定的元素覆盖了总窗口大小的40%，当页面加载时它向下移动了20%。在这种情况下，因为不稳定元素占用了总窗口的60%，影响系数将为0.6。又由于不稳定元素向下移动了20%，因此距离系数将为0.2。
因此，最终布局偏移系数= 0.6 x 0.2 = 0.12
如上图的实例，影响范围（红色区域）占比总窗口75% ，箭头（紫色）移动占总窗口高度的25%，故0.75 x 0.25 = 0.1875。
提示：使用Bit（于Github里）可在项目之间共享可复用组件。
Bit使得在项目之间共享、记录和复用独立组件变得简单。使用它可以最大限度地复用代码，能够保持设计一致、帮助团队协作、加快交付并构建可扩展的应用程序。
Bit支持Node，TypeScript，React，Vue，Angular等。
示例：探索在Bit.dev上共享的可复用的React组件
我觉得现在你应该已经很好地理解了Core Web Vitals和它们的职责。所以，现在是时候学习如何测量了。
02
测量Web Vitals比你想象的要容易得多
正如我开始提到的，测量Web Vitals是一个简单的过程，任何人都可以做到。实际有很多工具可以用来测量Web的重要信息，包括一些浏览器插件。
“Lighthouse、Chrome DevTools、PageSpeed Insights、Chrome UX Report和Web Vitals Extension位列榜首。”
虽然这些工具的用途相同，但可以进一步分为实验室测试工具和现场测试工具两类。
1.实验室测试工具
实验室测试工具的主要目的是 在开发过程中测试性能，以确保在发布之前达到所需的标准。ChromeDevTools和Lighthouse可用于在开发环境中测量Core Web Vitals。
“但是这些实验室测试工具无法测量FID，因为没有用户来计算其交互性。但是，这些工具使用了一种称为Total Blocking Time（TBT）的等效测量方法。”
下图显示了使用Lighthouse的网页的性能测试结果：
使用Lighthouse测量Core Web Vitals
2.现场测试工具
**实验室测试工具的结果不是100%准确的，因为没有真正的用户试用网页。**现场测试工具可以用来填补这个漏洞。此外，与实验室测试工具不同的是，现场测试工具可以按原样测量所有3个Core Web Vitals。
PageSpeed Insights、Chrome UX Report和Web Vitals Extension是一些现场测试工具，我们可以使用这些工具在真实用户交互时测量Core Web Vitals。这些现场测试工具匿名地从网页上收集实时数据，使我们无需手动运行任何操作即可检查Vitals。
使用Lighthouse测量Core Web Vitals
让我们假设你已经测量了网站的Core web Vitals，而结果并不符合预期。那么，做什么能提高这些分数呢？
03
改善Web Vitals的步骤
既然你现在知道如何测量Web Vitals，那么让我们看看如果存在问题，如何改进你的网站。
众所周知，对于性能相关问题的技术修复并不是那么简单。大多数时候它们非常复杂耗时。但是，可以遵循一些通用的指导方法来改进这些Core Web Vitals。
1.可以通过以下方式改进网站的LCP：
- 删除或避免使用消耗太多时间加载的大型页面元素。通过分析前面讨论的测量工具结果，可以很容易地发现这些元素及其影响；
Lighthouse分析结果
- 避免不必要的第三方JavaScript库。下面的分析表明，使用第三方库已将主线程阻塞2700毫秒；
Lighthouse分析结果
- 设置延迟加载和延迟加载图像；
- 减少服务器响应时间。
2.与LCP类似，可以遵循以下几点来提高网站的FID值：
- 使用高效的缓存策略更快地加载页面内容；
- 与LCP类似，可以通过提交不必要的JavaScript库来增强FID值；
- 最小化将提高页面加载时间，用户将能够立即与页面交互。
Lighthouse分析结果
3. Core Web Vitals最终测量的是CLS，可以通过以下方式提高CLS分数：
- 对图像和视频使用固定尺寸；
- 如果网站存在广告显示，一定要为他们留下必要的空间。
结论
我希望你们已经明白了维护优秀网站的重要性。这些测量方法为保持网站的用户体验友好性提供了有力支持。
尽管这些测量方法非常有前途，但在某些情况下，也需要临时修改这些测量方法来确保良好的用户体验。所以请保持注意。
