首次输入延迟 (FID) 与交互到下一个绘制 (INP)
内容提要
从2024年3月起，Interaction to Next Paint (INP) 将取代 First Input Delay (FID) 成为新的核心网页指标。INP 不仅关注用户首次交互的延迟，还包括事件处理和视觉反馈的时间。优化 INP 需要关注整个用户交互生命周期，包括高效执行事件处理、减少布局重计算和使用合适的动画属性。使用真实用户监测工具可以定期收集性能数据，以提升网站响应速度和用户体验。
延伸解读
INP 与 FID 的核心区别
FID 仅测量用户首次交互的输入延迟，即浏览器主线程开始处理事件前的时间。而 INP 覆盖整个页面生命周期内的所有交互，并综合输入延迟、处理延迟和表现延迟，取最差交互的得分作为最终值。这意味着 INP 更全面地反映页面响应能力，优化重点也从单纯减少主线程阻塞扩展到事件处理与视觉反馈的全流程。
优化 INP 的实践方向
针对处理延迟，可分析代码瓶颈、对高频事件使用防抖或节流、拆分长任务并利用代码分割减少不必要的 JavaScript。针对表现延迟，应谨慎使用 will-change，优先采用 transform 和 opacity 实现动画，利用 content-visibility 按需渲染，避免强制同步布局，并将非紧急任务移至 Web Worker。事件处理方面，可延迟非关键事件、使用被动事件监听器以及事件委托来减少主线程负担。
如何监测 INP 得分
INP 尚未正式成为稳定指标，但已可通过真实用户监测（RUM）工具定期收集实际用户数据，同时也可借助 Vercel Speed Insights、PageSpeed Insights 和 Lighthouse 的 Timespan 功能进行测量。持续监测有助于发现交互瓶颈，从而有针对性地优化，提升网站响应速度和用户体验。
Q&A
INP和FID有什么区别？
INP不仅关注用户首次交互的延迟，还包括事件处理和视觉反馈的时间，而FID仅测量首次交互的延迟。
如何优化INP得分？
优化INP得分需要关注整个用户交互生命周期，包括高效执行事件处理、减少布局重计算和使用合适的动画属性。
INP的关键组成部分是什么？
INP的关键组成部分包括输入延迟、处理延迟和表现延迟。
为什么要从FID转向INP？
因为FID只关注首次交互的延迟，忽略了后续交互和视觉反馈的延迟，而INP提供了更全面的用户交互性能评估。
如何测量INP得分？
可以使用真实用户监测工具，如Vercel Speed Insights和PageSpeed Insights，定期收集性能数据来测量INP得分。
INP得分的计算方式是什么？
INP得分通过聚合用户在页面生命周期内的所有交互来计算，返回最差的测量得分。
