Interaction to Next Paint 将正式成为 Core Web Vital 指标,并将于 3 月 12 日取代 First Input Delay。
“网页指标”计划提供了一些指标,可帮助 Web 开发者衡量网站用户体验的各个关键方面。First Input Delay (FID) 代表了该程序的响应速度,但随着时间的推移,我们逐渐发现,需要一个新的指标来捕获 FID 不能从网络互动的各个方面。Chrome 团队意识到了这一需求,并于 2022 年 5 月推出了 Interaction to Next Paint (INP) 作为实验性指标。去年,INP 成为了一项待处理指标,并且我们宣布将于 2024 年 3 月将 INP 提升为稳定状态。
今天,我们宣布 INP 将于今年 3 月 12 日正式成为 Core Web Vital 指标并取代 FID,并在此次过渡中弃用 FID。
这篇博文将介绍 Chrome 团队提供的建议,以便您了解如何为此次变更做好准备,以及变更生效后预期会发生的情况。
如何准备?
此次过渡的第一步是确定您网站的 INP 是否超过了“良好”阈值。所有核心网页指标的评分都是依据各核心网页指标在所有网页加载速度的第 75 个百分位处在实际应用环境中的表现。
若要了解您的网站在 INP 上的表现,最简单的方法就是使用 PageSpeed Insights,它可以显示 Chrome 用户体验报告 (CrUX) 中的数据。CrUX 是 Web Vitals 计划的官方数据集,可能会成为您网站的现场数据的潜在来源。
现场数据的其他来源可能来自实时用户监控 (RUM) 提供商,该提供商也会观察您网站的现场性能。如果您正在与 RUM 提供商合作,请咨询他们的 INP 支持。
如果您发现自己网站的 INP 处于“需要改进”或“欠佳”类别,我们准备了一些资源来帮助您进行改进,这些资源首先介绍了如何诊断 INP 和排查相关问题:
了解了具体问题后,您就可以使用以下指南来确定应针对互动中的哪些部分进行优化:
- 如果您的 JavaScript 会在主线程上占用大量时间,请优化耗时较长的任务。如果您在页面加载期间遇到大量主线程活动,导致主线程上执行大量耗时的任务,那么您可能会遇到脚本评估任务过多方面的问题。
- 如果互动需要很长时间才能开始处理,请优化输入延迟。
- 大型 DOM 可能需要大量渲染工作,并且互动常常会改变 DOM。最好避免复杂的大型布局和布局抖动,并尽可能缩减 DOM 大小。
- 如果您使用复杂的 CSS 选择器,这些选择器也会导致为响应用户互动而花费大量精力。
- 最后,如果您的网站通过 JavaScript 在客户端上呈现大部分 HTML 内容,您有必要了解 HTML 的客户端呈现如何影响互动性。
INP 非常复杂,这意味着您将以多种方式针对互动进行优化,但这是值得的。关于减少互动延迟如何改善业务成效的案例研究(例如《经济时报》和 redBus 的案例),已经有了一些研究。优化网站上的 INP 也有助于您实现目标。
INP 成为 Core Web Vitals 后会出现什么情况?
值得一提的是,INP 将于今年 3 月 12 日正式成为 Core Web Vitals 指标,并取代 FID。与此同时,FID 将不再是核心网页指标,而是将被正式弃用并从计划中移除。
因此,您会看到 FID 文档有所变化。关于 FID 具有重要历史意义的文档将保留,但压力 FID 已弃用状态中将添加重要通知,并参考 INP 文档。其他以 FID 为中心的文档可能会被完全移除,并重定向到相关的 INP 文档。
FID 在许多 Google 工具中依然存在,但 INP 也是如此。一旦 INP 于 3 月 12 日成为 Core Web Vital 指标,FID 就会立即从 Google Search Console 中移除。所有其他工具(例如 PageSpeed Insights 和 CrUX)都会提供六个月的弃用期,让开发者有机会更新他们的代码。
最后,如果您对 INP 被纳入核心网页指标对 Google 搜索意味着什么存有疑问,请参阅 Google 搜索中心上的 INP 公告帖子。
未来之路
在过去两年中,我们精心计划将 INP 纳入核心网页指标,这代表着一个重大进步。我们相信,INP 对网络响应能力的整体方法将帮助开发者更好地评估和改进用户体验的这一重要方面,并随着时间的推移打造响应更快的网络。INP 将于 3 月 12 日成为 Core Web Vital 指标,我们希望开发者能利用这段时间了解和优化其 INP 性能。
与往常一样,如果您有任何问题或疑虑,欢迎发送电子邮件至 web-vitals-feedback@googlegroups.com,就 INP、FID 或网页指标计划中的任何其他指标提供反馈。