下次绘制交互 (INP)

下次绘制交互（INP）定义

下次绘制交互（INP） 是一项核心网页生命力指标（Core Web Vitals），通过跟踪用户发起操作（如点击按钮、触摸屏幕或按下键盘）与浏览器渲染下一个视觉更新之间的时间，衡量网页对用户交互的响应速度。该指标由 Google Chrome 团队于 2022 年 5 月作为实验性指标引入，并于 2024 年 3 月正式成为稳定的核心网页生命力指标，取代首次输入延迟（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、FID 与其他性能指标

性能阈值与真实世界数据

Google 将 INP 性能阈值 定义为页面加载的第 75 百分位，并按设备类型（移动、桌面）区分。INP 低于 200 毫秒被认为响应优秀，即页面能快速响应用户交互并及时反馈。INP 在 200 到 500 毫秒之间属于“需改进”区间，说明页面虽可用但用户可能感受到明显延迟，影响满意度。INP 高于 500 毫秒则被归为较差，意味着严重的响应性问题，很可能导致用户沮丧、降低转化和参与度。根据 HTTP Archive 2024 年 Web Almanac，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 执行、优化第三方脚本加载。优化处理时间要精简事件回调，仅执行必要操作，采用去抖（debounce）、节流（throttle）等技术限制事件处理频率，并利用如 React 的记忆化（memoization）防止组件不必要的重新渲染。减少呈现延迟可通过简化 DOM 结构、使用 CSS 容器限制渲染范围、延迟非关键视觉更新实现。此外，开发者应使用 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 用户的启示

随着 AI 驱动的搜索系统如 ChatGPT、Perplexity、Google AI Overviews 和 Claude 越来越多地引用网页内容，页面响应性也成为 AI 系统评估和引用模式的一个因素。虽然 INP 不会直接影响 AI 系统是否引用您的内容，但响应性差的页面可能导致较低的用户参与度指标（如跳出率、页面停留时间、交互深度），间接影响内容质量信号。此外，AI 系统越来越重视用户体验信号来评估来源的可信度和相关性。能及时响应用户操作的页面展现了技术实力和专业性，或许会影响 AI 系统对内容排名与引用的评价。对于使用 AmICited 监控品牌和域名被 AI 响应引用情况的组织，理解 INP 是内容整体优化策略的重要一环。既响应迅速（优秀 INP），又具备高质量权威内容的网页，更有可能被 AI 系统引用。随着 AI 系统在评估用户体验信号方面日益进步，维持良好 INP 得分对 AI 引用模式的重要性可能持续提升，使 INP 优化不仅关乎传统 SEO，也关乎新兴的 AI 搜索可见度。

INP 的未来演进与新趋势

Web 性能领域持续演进，INP 本身也可能随着浏览器能力和用户期望的变化而优化调整。Google 维护着详细的 INP 变更日志，记录各 Chrome 版本该指标的计算方式变化，反映持续的完善与修复。近期进展包括引入长动画帧（LoAF）API，可归因于导致渲染延迟的脚本，令 INP 优化更精确。此外，从 Chrome 127 起，alert 和 confirm 对话框已被排除在 INP 计算之外，反映了对有效用户交互范围的进一步界定。展望未来，开发者应关注响应性衡量方式的继续演变。交互特定性能预算和框架级优化的兴起，意味着 INP 优化会越来越多地融入开发流程，而非事后补救。随着移动端流量持续增长，用户对响应性的期望提高，保持优秀的 INP 得分将成为重要竞争优势。企业应将 INP 视为构建以用户为中心、高性能 Web 体验的基本要素，既服务于人类用户，也服务于 AI 系统。

INP 优化必备检查清单

• 使用 PageSpeed Insights、Search Console 和真实用户监测工具审计当前 INP 表现，建立基线指标
• 通过 RUM 数据与 Chrome DevTools 识别慢交互，明确哪些页面元素和用户操作导致延迟
• 用 scheduler.yield() 与异步模式拆分长任务，防止页面加载和后台处理期间的输入延迟
• 优化事件处理器，减少处理时间，对高频事件做去抖处理，延迟非关键任务
• 简化 DOM 结构，降低事件处理完成后的呈现延迟及渲染时长
• 实施代码分割和懒加载，减少初始 JavaScript 执行与后台处理负担
• 优化第三方脚本，延迟非关键脚本、用 Partytown 利用 Web Worker 或移除无用集成
• 采用框架专属优化，如 React.memo、Vue 计算属性、Next.js 代码分割，避免不必要重新渲染
• 持续监控，通过 RUM 跟踪 INP 改善，及时发现并修正回归
• 在真实设备上测试，尤其是低端移动设备，确保不同硬件上的响应性

+++