Interaction to Next Paint 现已取代 First Input Delay,现在是稳定的 Core Web Vitals 指标。
就在今天!经过多年的努力,我们终于准备好将 Interaction to Next Paint (INP) 作为一个稳定的 Core Web Vitals 指标。这标志着我们在衡量互动响应能力方面向前迈出了一大步,解决了 First Input Delay (FID) 的许多缺点。
在这篇博文中,我们将快速回顾一下今天具体发生了哪些变化,针对 Chrome 工具中的 FID 的弃用和移除制定更具体的时间表,并分享一些资源,以帮助您查找和解决 INP 问题。
具体变化
在 Chrome 端,我们的所有 Core Web Vitals 工具现在都将反映 INP 的稳定状态(如适用)。例如,PageSpeed Insights、CrUX 信息中心和 Web Vitals 扩展程序等工具会在三个核心网页指标指标中更醒目地显示 INP。具体而言,在 PageSpeed Insights 中,Core Web Vitals 评估逻辑将评估 INP 性能,而不是 FID。如需详细了解 Search Console 的相应变化,请参阅搜索团队的博文。
此外,从今天起,某些工具可能会显示针对 FID 的弃用通知,以警告用户相应指标不再是 Core Web Vitals 指标,并将被移除。下面的 FID 弃用时间表部分介绍了需要了解的事项,以确保您能够完全从 FID 过渡到其他平台。
FID 弃用时间表
鉴于 INP 已取代 FID 成为 Core Web Vitals 指标,Chrome 已正式弃用对 FID 的支持。这意味着,Chrome 工具将不再保证提供 FID,开发者必须在 2024 年 9 月 9 日之前过渡到 INP。
这对于使用 Chrome 用户体验报告 (CrUX) 或 PageSpeed Insights API 的用户尤为重要。如果应用需要处理来自上述任一 API 的 FID 数据,则必须在 9 月 9 日之前将这些数据过渡到 INP,以避免服务中断或中断。需要明确的是,这将是最新版本的 API 中的一项破坏性更改,主要版本号不会有所提升!
优化 INP 的资源
无论您是首次查看 INP,还是精通响应能力,INP 优化资源系列都是您找到所需内容的绝佳起点。本系列文档涵盖所有方面,从指标本身的定义、在本地和真实用户中衡量指标的技巧、针对各种应用场景进行优化的实用建议,以及展示相关指南的实际案例研究列表,不一而足。
您可以按照以下常规工作流程来查找和修正您网站上的 INP 问题:
请参阅规范 INP 文档,熟悉 INP 如何衡量对用户互动的响应情况。
通过查看真实用户数据来评估您网站的 INP 效果。至少 75% 的 INP 体验应在 200 毫秒内响应用户输入,才算是良好的体验。如果您的网站已有良好的 INP,那也大可放心!
将网址插入 PageSpeed Insights,或查看 Search Console 上的“核心网页指标”报告(如果您的网站包含在 CrUX 数据集中)。
请与您的分析服务提供商联系,了解他们是否支持 INP 监控。
使用 web-vitals.js 构建您自己的 INP 解决方案。
如有必要,请对您的网站进行插桩处理,以收集有关用户体验的诊断信息。这些都是重要的元数据,例如用户与哪个页面元素进行了互动、互动速度缓慢的原因以及其他有用数据。总的来说,这些信息有助于您了解最大的改进机会。
使用 Chrome 开发者工具在本地重现缓慢互动。这有助于您确切了解后台发生的情况以及违规代码。
优化您的代码,在处理用户互动时尽可能减少工作量:
在本地衡量您所做的更改并监控您的真实用户体验,以确保您的 INP 效果迅速(并持续)!
希望本指南能帮助您顺利优化 INP。如果您在此过程中遇到任何问题,可以随时在 Stack Overflow 上发布带 interaction-to-next-paint
标签的问题来获得帮助。
INP 作为 Core Web Vitals 发布已历经很长时间了。回顾我们在 2021 年发布的第一篇博文,了解了如何打造更好的响应速度指标。从那时起,我们便认真考虑了所有令人惊叹的社区反馈,并制定了一项指标,我们坚信这项指标可以引导开发者改进用户体验不足的领域,最终打造更好的网络。感谢大家帮助制定此指标,以及为提升响应能力状态所做的一切努力!