与下次绘制的交互现在是一个稳定的 Core Web Vital 指标,取代了首次输入延迟。
就是今天!经过多年的努力,我们终于准备好将与下次绘制的交互 (INP) 变成一个稳定的 Core Web Vital 指标。这标志着我们在衡量交互响应速度的方式上向前迈出了重要一步,解决了首次输入延迟 (FID) 的许多缺点。
在这篇文章中,我们将快速回顾今天究竟发生了哪些变化,设定一个更具体的时间表,以便从 Chrome 工具中弃用和移除 FID,并分享一些资源,以帮助您查找和修复 INP 问题。
今天有哪些变化
在 Chrome 方面,我们所有的 Core Web Vitals 工具现在都将在适用情况下反映 INP 的稳定状态。例如,PageSpeed Insights、CrUX 仪表板和 Web Vitals 扩展等工具将在 Core Web Vitals 指标的三重奏中更突出地显示 INP。具体来说,在 PageSpeed Insights 中,Core Web Vitals 评估逻辑将评估 INP 性能而不是 FID。要了解有关 Search Console 相应更改的更多信息,请参阅 Search 团队的博客文章。
此外,从今天开始,某些工具可能会显示 FID 的弃用通知,以警告该指标不再是 Core Web Vital,并且将被移除。以下FID 弃用时间表部分讨论了确保您完全过渡到脱离 FID 的日期。
FID 弃用时间表
既然 INP 已经取代 FID 成为 Core Web Vital 指标,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,请不要担心!
将您的 URL 插入 PageSpeed Insights,或者如果您网站包含在 CrUX 数据集中,请查看 Search Console 上的 Core Web Vitals 报告。
咨询您的分析提供商,他们是否支持 INP 监控。
使用 web-vitals.js 推出您自己的 INP 解决方案。
如果需要,请检测您的网站以收集有关用户体验的诊断信息。这是重要的元数据,例如用户与之交互的页面元素以及速度慢的原因,以及其他有用的数据。总而言之,这些信息将帮助您了解最大的改进机会。
在本地使用 Chrome 开发者工具重现缓慢的交互。这将帮助您准确了解幕后发生的情况以及有问题的代码是什么。
优化您的代码,以便在处理用户交互时尽可能少地工作
在本地衡量您的更改并监控您的真实用户体验,以确保您的 INP 性能正在变得(并且保持!)快速。
希望本指南能让您走上优化 INP 的正确道路。如果您在此过程中遇到任何问题,您可以随时在 Stack Overflow 上发布一个带有标签 interaction-to-next-paint
的问题来获得帮助。
将 INP 作为 Core Web Vital 推出已经酝酿了很长时间,回顾我们在 2021 年发布的关于构建更好的响应速度指标的第一篇文章。从那时起,我们考虑了所有惊人的社区反馈,并开发了一个我们坚信将引导开发者改进用户体验中服务不足领域的指标,最终带来更好的网络体验。感谢大家在塑造这一指标方面提供的帮助,以及大家为改善响应速度状态所做的辛勤工作!