发布日期:2020年5月4日,最后更新日期:2024年10月31日
优化用户体验质量是任何网站长期成功的关键。无论您是企业主、营销人员还是开发者,Web Vitals 都能帮助您量化网站体验并发现改进机会。
概述
Web Vitals 是 Google 的一项计划,旨在为提供出色网络用户体验所必需的质量信号提供统一指导。
多年来,Google 提供了许多用于衡量和报告性能的工具。一些开发者是使用这些工具的专家,而另一些开发者则发现,工具和指标的丰富程度令人难以跟上。
网站所有者无需成为性能专家,也能了解他们为用户提供的体验质量。Web Vitals 计划旨在简化流程,帮助网站专注于最重要的指标—— 核心网络指标 。
核心网络指标
核心网页指标是网页指标的子集,适用于所有网页,所有网站所有者都应进行衡量,并将显示在所有 Google 工具中。每个核心网页指标都代表用户体验的一个独特方面,并且是可衡量的 在现场 并反映了批判性现实世界的经验 以用户为中心 结果。
构成核心网络指标的指标将 发展 随着时间的推移。当前的方案主要关注用户体验的三个方面—— 加载中 , 互动性 , 和 视觉稳定性 —并包括以下指标(及其各自的阈值):
- 最大内容绘制 (LCP) :措施 加载中 性能。为了提供良好的用户体验,LCP 应该发生在 2.5秒 页面首次开始加载的时间。
- 交互到下一次绘制 (INP) :措施 互动性 。为了提供良好的用户体验,页面的 INP 应该为 200毫秒 或更少。
- 累积布局偏移 (CLS) :措施 视觉稳定性 。为了提供良好的用户体验,页面应该保持 CLS 0.1。 或更少。
为了确保你达到大多数用户的这些指标的推荐目标,一个很好的衡量阈值是 第 75 百分位 页面加载,跨移动和桌面设备细分。
评估核心网络生命力合规性的工具应该考虑,如果页面满足所有三个核心网络生命力指标的第 75 个百分位的推荐目标,则该页面通过。
生命周期
核心网络生命力轨道上的指标经历一个由三个阶段组成的生命周期:实验、待定和稳定。
每个阶段都旨在向开发人员发出信号,告诉他们应该如何考虑每个指标:
- 实验指标 是潜在的核心网络生命力,根据测试和社区反馈,可能仍会发生重大变化。
- 待定指标 是未来的核心网络生命力,已经通过了测试和反馈阶段,并且有明确的时间表来稳定下来。
- 稳定的指标 是 Chrome 认为对于良好用户体验至关重要的当前核心网络生命力集。
核心网络生命力处于以下生命周期阶段:
实验
当一个指标最初被开发并进入生态系统时,它被认为是 实验指标 。
实验阶段的目的是评估指标的适用性,首先探索待解决的问题,并可能针对先前指标未能解决的问题进行迭代。例如, 交互到下一次绘制 (INP) 最初是作为一种实验指标开发的,目的是比 首次输入延迟 (FID) 。
核心 Web Vitals 生命周期的实验阶段也旨在通过识别错误,甚至探索其初始定义的变更,为指标的开发提供灵活性。这也是社区反馈最为重要的阶段。
待办的
当 Chrome 团队确定某个实验指标已收到足够的反馈并证明其有效性时,它就会成为 待定指标 例如,INP 于 2023 年从实验状态升级为待定状态,目的是最终淘汰 FID。
在此阶段,待定指标将保留至少六个月,以便生态系统有时间进行适应。随着越来越多的开发者开始使用该指标,社区反馈仍然是此阶段的一个重要方面。
稳定的
当核心 Web 重要候选指标最终确定后,它将成为 稳定度量 。此时该指标可以成为核心网络重要指标。
稳定指标受到积极支持,并且可能会进行错误修复和定义更改。稳定的核心 Web 生命力指标每年不会更改超过一次。任何核心 Web 生命力指标的变更都将在指标的官方文档以及指标的更新日志中明确告知。所有评估也包含核心 Web 生命力指标。
衡量和报告核心网络指标的工具
Google 认为核心网页指标对所有网页体验都至关重要。因此,Google 致力于将这些指标 在所有流行的工具中 。以下部分详细介绍了哪些工具支持核心网络生命力。
测量核心网络指标的现场工具
这 Chrome用户体验报告 收集每个核心网页指标的匿名真实用户测量数据。这些数据使网站所有者能够快速评估其性能,而无需手动在页面上进行分析,并为以下工具提供支持: Chrome 开发者工具 , PageSpeed Insights 以及 Search Console 的 核心网络生命力报告 。
| 液晶聚合物 | 因普 | 中立证券 | |
| Chrome用户体验报告 | |||
| Chrome 开发者工具 | |||
| PageSpeed Insights | |||
| 搜索控制台(核心网络生命力报告) |
Chrome 用户体验报告提供的数据提供了一种快速评估网站性能的方法,但它无法提供准确的每页面浏览量遥测数据,而这些遥测数据对于准确诊断、监控和快速应对性能下降通常是必不可少的。因此,我们强烈建议网站设置自己的真实用户监控。
使用 JavaScript 测量核心 Web 指标
每个核心 Web 生命力都可以使用标准 Web API 在 JavaScript 中进行测量。
衡量所有核心网络指标最简单的方法是使用 网络生命力 JavaScript 库是一个小型的、可用于生产的底层 Web API 包装器,它可以测量每个指标,并使其与前面列出的所有 Google 工具的报告方式准确匹配。
随着 网络生命力 库,只需调用一个函数即可测量每个指标。请参阅文档以获取完整信息 用法 和 API 细节。
进口{onCLS,上INP,关于LCP}从“网络生命力”;
功能发送至分析(公制){
常量身体=JSON。字符串化(公制(英文):
// 如果可用,则使用 `navigator.sendBeacon()`,否则回退到 `fetch()`。
(航海家。发送Beacon&&航海家。发送Beacon(“/分析”,身体))||
拿来(“/分析”,{身体,方法:'邮政',保持连接:真的});
}
onCLS(发送至分析(英文):
上INP(发送至分析(英文):
关于LCP(发送至分析(英文):
一旦您将网站配置为使用 网络生命力 库来测量并将您的核心网络生命力数据发送到分析端点,下一步是汇总和报告该数据,以查看您的页面是否满足至少 75% 页面访问量的推荐阈值。
虽然一些分析提供商内置了对核心网络生命力指标的支持,但即使没有内置支持的提供商也应该包含基本的自定义指标功能,以便您在其工具中测量核心网络生命力指标。
喜欢使用底层 Web API 直接测量这些指标的开发人员可以参考以下指标指南来了解实现细节:
有关使用热门分析服务或您自己的内部分析工具衡量这些指标的更多指导,请参阅 现场测量 Web Vitals 的最佳实践 。
用于测量核心网络指标的实验室工具
虽然所有核心网络生命力首先都是现场指标,但其中许多也可以在实验室中测量。
实验室测量是测试功能在开发过程中(即功能发布给用户之前)性能的最佳方法。它也是提前发现性能下降的最佳方法。
以下工具可用于在实验室环境中测量核心网络生命力:
| 液晶聚合物 | 因普 | 中立证券 | |
|---|---|---|---|
| Chrome 开发者工具 | |||
| 灯塔 | (使用 技术性贸易壁垒 反而) |
虽然实验室测量是提供良好体验的重要组成部分,但它不能替代现场测量。
网站的性能可能会因用户的设备性能、网络状况、设备上可能正在运行的其他进程以及用户与页面的交互方式而存在很大差异。事实上,每个核心网页指标的得分都会受到用户交互的影响。只有现场测量才能准确捕捉到完整的情况。
提高分数的建议
以下指南针对如何针对每个核心网络生命力优化页面提供了具体建议:
提升核心网页指标的方法有很多,每种方法的影响力、相关性和易用性各不相同。请参阅 改善核心网络生命力的最有效方法 查看 Chrome 团队的简短推荐列表。
其他网络指标
虽然核心网络生命力是理解和提供良好用户体验的关键指标,但还有其他支持指标。
这些其他指标可以作为代理指标(或作为三个核心网络生命力的补充指标),以帮助捕捉大部分体验或帮助诊断特定问题。
例如,指标 第一个字节的时间(TTFB) 和 首次内容绘制 (FCP) 都是 加载中 经验,并且都有助于诊断 LCP 问题(慢 服务器响应时间 或者 渲染阻塞资源 , 分别)。
类似地,像 总阻塞时间(TBT) 实验室指标对于捕捉和诊断潜在 互动性 可能影响 INP 的问题。然而,它不属于核心 Web 指标集,因为它们无法通过现场测量,也不能反映 以用户为中心 结果。
Web Vitals 的变化
Web Vitals 和 Core Web Vitals 代表了开发人员目前衡量整个网络体验质量的最佳可用信号,但这些信号并不完美,未来应该会有所改进或增加。
这 核心网络指标 与所有网页相关,并在相关的 Google 工具中展示。这些指标的变更将产生深远的影响;因此,开发者应预期核心网页指标的定义和阈值将保持稳定,更新将提前通知,并保持可预测的年度更新节奏。
其他 Web Vital 通常与具体情境或工具相关,并且可能比核心 Web Vital 更具实验性。因此,它们的定义和阈值可能会更频繁地变化。
对于所有 Web Vitals,更改将在此公开中清晰记录 变更日志 。
