首次输入延迟 (FID)
首次输入延迟（FID）通过跟踪用户交互与浏览器处理之间的延迟来衡量响应速度。了解FID如何影响用户体验，以及它为何对网页性能至关重要。...
1 分钟阅读
交互到下一次绘制 (INP)
交互到下一次绘制（INP）是一项核心网页指标，用于衡量网页的响应速度，追踪用户交互（点击、触摸或按键）与浏览器下一次视觉更新之间的时间。该指标于2022年5月推出，并于2024年3月正式取代首次输入延迟（FID），INP评估的是整个用户会话期间页面的整体响应能力，而不仅仅是首次交互。
交互到下一次绘制（INP）的定义
交互到下一次绘制（INP） 是一项核心网页指标，用于衡量网页对用户交互的响应速度，追踪从用户发起操作（如点击按钮、触摸屏幕或按下键盘按键）到浏览器渲染下一次视觉更新之间的时间。该指标由 Google Chrome 团队于 2022 年 5 月作为实验性指标推出，并于 2024 年 3 月正式升级为稳定的核心网页指标，INP 取代了首次输入延迟（FID） 作为评估页面体验的主要响应性指标。与仅测量页面首次交互延迟的 FID 不同，INP 通过观察整个用户会话期间的所有交互来提供全面的响应性评估。这一转变反映了衡量用户体验时更全面的方法，认识到用户在页面上的 90% 时间发生在页面加载之后，因此在整个会话期间保持一致的响应性对用户满意度和 SEO 性能至关重要。
响应性指标的历史背景与演进
INP 的引入代表了 Google 衡量和评估网站响应性方式的重要演进。多年来，首次输入延迟（FID） 一直是核心网页指标中的主要响应性指标，仅关注首次用户交互的输入延迟部分。然而，研究和实际测试揭示了 FID 方法的显著局限性。该指标仅捕捉事件处理程序开始执行之前的延迟，忽略了实际处理交互和渲染视觉响应所花费的时间。此外，FID 仅关注首次交互意味着，在用户会话后期响应性较差的页面仍可能获得良好的 FID 得分，从而造成整体页面响应性的误导性画面。针对这些局限性，Google Chrome 团队于 2021 年开始探索替代指标，最终于 2022 年 5 月宣布 INP 作为实验性指标。经过近两年的社区测试和反馈收集，INP 于 2024 年 3 月 12 日正式成为稳定的核心网页指标，完全取代 FID。这一转变凸显了 Google 致力于提供更准确、以用户为中心的性能指标，以更好地反映真实世界的浏览体验。
交互到下一次绘制的工作原理：技术解析
INP 衡量响应性的方式是追踪用户交互的三个不同阶段：输入延迟、处理时间和呈现延迟。输入延迟是指用户发起操作到浏览器开始执行关联事件处理程序之间的时间，通常由长任务或后台处理阻塞主线程引起。处理时间包括所有事件处理程序回调执行所需的时间，包括响应操作执行的 JavaScript 代码。最后，呈现延迟是指事件处理程序完成到浏览器绘制下一帧之间的时间，可能涉及布局重新计算、样式更新和渲染工作。总 INP 值是这三个部分对单个交互的总和。重要的是，INP 以第 98 百分位数计算页面上的所有交互，这意味着如果页面收到大量交互，Google 会忽略最差的 2% 作为异常值，并报告绝大多数用户所体验的响应性。对于交互次数少于 50 次的页面，INP 通常报告观察到的最差交互。这种基于百分位数的方法确保偶尔的性能波动不会不成比例地惩罚通常响应良好的网站。
对比表格：INP vs. FID vs. 其他性能指标
| 指标 | 测量内容 | 范围 | 阈值（良好） | 阈值（较差） | 状态 |
|---|---|---|---|---|---|
| 交互到下一次绘制（INP） | 完整交互周期（输入延迟 + 处理 + 呈现） | 会话期间所有交互 | ≤ 200ms | > 500ms | 现行核心网页指标（2024年3月+） |
| 首次输入延迟（FID） | 仅输入延迟（事件处理程序运行前） | 仅首次交互 | ≤ 100ms | > 300ms | 已弃用（由 INP 取代） |
| 总阻塞时间（TBT） | 页面加载期间主线程阻塞 | 仅加载阶段 | ≤ 300ms | > 600ms | 实验室指标（非现场指标） |
| 最大内容绘制（LCP） | 渲染最大可见元素的时间 | 加载阶段 | ≤ 2.5s | > 4s | 现行核心网页指标 |
| 累积布局偏移（CLS） | 视觉稳定性和意外布局变化 | 整个会话 | ≤ 0.1 | > 0.25 | 现行核心网页指标 |
Stay Updated on AI Visibility Trends
Get the latest insights on AI mentions, brand monitoring, and optimization strategies.
性能阈值与现实统计数据
Google 定义了 INP 性能阈值，基于第 75 百分位数的页面加载，按设备类型（移动端和桌面端）划分。INP 低于 200 毫秒表示良好的响应性，意味着页面能快速响应用户交互并提供即时的视觉反馈。INP 在 200 到 500 毫秒之间属于"需要改进"类别，表明虽然页面功能正常，但用户可能会感知到明显的延迟，从而影响满意度。INP 高于 500 毫秒被归类为较差，表明存在严重的响应性问题，很可能让用户感到沮丧，并对参与度和转化率产生负面影响。根据 HTTP Archive 发布的 2024 年网络年鉴，74% 的移动网站和 97% 的桌面网站实现了良好的 INP 得分，揭示了移动端和桌面端体验之间存在显著的性能差距。这 23 个百分点的差异凸显了开发者在优化移动设备响应性方面面临的持续挑战，移动设备通常处理能力较弱，网络条件也比台式机更多变。这些数据强调了为什么 INP 优化对移动优先的网页开发至关重要，因为移动用户占大多数网站网络流量的大部分。
INP 在核心网页指标中的角色及 SEO 影响
INP 是 Google 用于评估页面体验和确定搜索排名的三个核心网页指标之一，与衡量加载性能的最大内容绘制（LCP） 和衡量视觉稳定性的累积布局偏移（CLS） 并列。Google 已明确表示核心网页指标是排名因素，这意味着 INP 得分较差的页面在搜索结果中的可见度可能会降低。这使得 INP 优化不仅仅是一个用户体验问题，更是一项关键的 SEO 任务。INP 优化的商业影响已通过真实案例研究得到证明：RedBus，一家在线巴士票务平台，通过优化其网站的 INP 从 870-900ms 降至 350-370ms，实现了销售额增长 7%，采用的技术包括防抖滚动事件处理程序、优化输入组件状态管理以及减少不必要的重新渲染。该案例研究表明，INP 的改善与业务指标的提升直接相关，包括转化率提高、跳出率降低和用户留存率提升。对于电商网站、SaaS 平台以及任何依赖用户交互的业务而言，INP 优化代表着一项在用户体验和搜索可见性方面都具有高回报率的投资。
改善 INP 的关键优化策略
开发者可以采用多种基于证据的策略来降低 INP 并提升页面响应性。减少输入延迟需要最大程度减少阻塞主线程的后台处理，例如使用 scheduler.yield() API 拆分长任务、延迟非关键 JavaScript 执行以及优化第三方脚本加载。优化处理时间涉及精简事件处理程序回调以仅执行必要工作，使用防抖和节流技术限制事件处理程序执行频率，以及利用 React 等框架通过记忆化防止不必要的组件重新渲染。减少呈现延迟可以通过降低 DOM 复杂性、使用 CSS containment 限制渲染范围以及延迟非关键视觉更新来实现。此外，开发者应使用 Chrome DevTools 分析交互，以确定哪些特定函数和脚本对 INP 延迟影响最大，然后优先进行最具影响力的优化。真实用户监控（RUM）解决方案提供了关于用户最常与哪些页面元素交互以及哪些交互最慢的宝贵数据，从而实现数据驱动的优化决策。web-vitals JavaScript 库允许开发者以编程方式测量 INP 并将数据发送到分析平台，便于持续监控和改进。
测量 INP：工具与方法
INP 可以通过现场数据和实验室测试两种方式测量，但来自真实用户的现场数据能提供最准确的实际性能表现。Google PageSpeed Insights 基于 Chrome 用户体验报告（CrUX） 的数据显示 INP 指标，展示获得足够流量的页面的第 75 百分位数用户体验。Google Search Console 在其核心网页指标部分包含 INP 报告，使网站所有者能够识别响应性较差的页面并追踪随时间改进的情况。Chrome DevTools 性能面板使开发者能够记录和分析单个交互，显示输入延迟、处理时间和呈现延迟的细分。web-vitals JavaScript 库提供了一种编程方式，在生产环境中测量 INP 并将数据发送到自定义分析后端。真实用户监控（RUM）解决方案，如 DebugBear、Datadog 和 New Relic，提供 INP 性能的详细洞察，包括显示哪些脚本和组件导致延迟的归因数据。INP 调试器工具能自动识别可点击的页面元素并模拟交互，以在实验室环境中识别慢速交互。为了实现全面的 INP 优化，开发者应结合多种测量方法：使用 CrUX 数据了解基线性能，使用 RUM 识别生产环境中的问题交互，以及使用 DevTools 诊断根本原因并验证修复效果。
INP 与 AI 搜索集成：对 AmICited 用户的启示
随着 ChatGPT、Perplexity、Google AI Overviews 和 Claude 等 AI 驱动的搜索系统越来越多地引用和引用网页内容，页面响应性成为 AI 系统评估和引用模式的一个因素。虽然 INP 不会直接影响 AI 系统是否引用您的内容，但响应性较差的页面可能会获得较低的参与度指标（跳出率、页面停留时间、交互深度），从而间接影响内容质量信号。此外，AI 系统越来越重视用户体验信号，用于评估来源的可信度和相关性。能够快速响应用户交互的页面体现了技术能力和专业性，可能影响 AI 系统评估和排名内容以供引用的方式。对于使用 AmICited 监控其品牌和域名在 AI 回复中出现情况的组织而言，了解 INP 成为整体内容优化策略的一部分。既具有良好响应性（好的 INP）又包含高质量、权威内容的页面更有可能被 AI 系统引用。此外，随着 AI 系统在评估用户体验信号方面变得更加成熟，保持良好的 INP 得分可能成为 AI 引用模式中越来越重要的因素，这使得 INP 优化不仅对传统 SEO 相关，对新兴的 AI 搜索可见性也至关重要。
常见 INP 问题排查
大多数 INP 得分较差的问题可追溯到该指标的三个组成部分之一，因此诊断从隔离哪个部分出现问题开始。高输入延迟通常意味着当用户点击时，主线程上有一个长任务正在运行——通常是打包的分析或广告脚本——解决方法是使用 scheduler.yield() 将工作拆分为更小的块，或将非关键脚本推迟到交互窗口之后执行。长处理时间通常来自事件处理程序执行了超出必要的工作，例如搜索框每次按键都触发 API 调用而非进行防抖处理，或 React 组件重新渲染整个列表而非仅更改单个行——记忆化和节流可以解决这两个问题。长呈现延迟通常是 CSS 或 DOM 问题：复杂的选择器、布局抖动或深度嵌套的 DOM 迫使浏览器在绘制之前重新计算样式和布局，CSS containment 和简化 DOM 树可以直接解决这些问题。一个不那么明显的失败模式是第三方脚本，即使您自己的代码很快，它们也可能悄无声息地主导 INP；在 Chrome DevTools 性能面板中进行性能分析会将延迟归因到正确的脚本。最后，如果实验室和现场 INP 得分差异很大，请检查测试的交互是否与真实用户实际点击的内容匹配——合成测试会遗漏 RUM 数据捕获的交互。
INP 优化必备清单
- 审计当前 INP 性能：使用 PageSpeed Insights、Search Console 和真实用户监控工具建立基线指标
- 识别慢速交互：通过 RUM 数据和 Chrome DevTools 了解哪些页面元素和用户操作导致延迟
- 拆分长任务：使用
scheduler.yield()和异步模式防止页面加载和后台处理期间的输入延迟 - 优化事件处理程序：减少处理时间、对频繁事件进行防抖处理、延迟非关键工作
- 最小化 DOM 复杂性：以减少事件处理程序完成后的呈现延迟和渲染时间
- 实施代码拆分和懒加载：减少初始 JavaScript 执行和后台处理
- 优化第三方脚本：延迟非关键脚本、通过 Partytown 使用 Web Workers，或移除不必要的集成
- 使用框架特定优化：如 React.memo、Vue 计算属性和 Next.js 代码拆分，以防止不必要的重新渲染
- 持续监控：使用 RUM 解决方案追踪 INP 改进，并在影响用户之前识别性能回退
- 在真实设备上测试：包括低端移动设备，确保在整个用户硬件范围内保持响应性
+++
