Interaction to Next Paint（INP） 于 2024 年 3 月取代了 First Input Delay，成为 Core Web Vitals 之一，从根本上改变了 Google 评估页面响应能力的方式。本文将探讨 INP 对 SEO 的影响以及相应的优化策略。
什么是 INP？
INP 衡量的是整个页面生命周期中所有用户交互的延迟——而不仅仅是首次点击。它观察从用户交互到下一次绘制（next paint）之间的持续时间，完整捕捉以下各个环节的体验：
- 输入延迟（事件处理器开始执行前的时间）
- 处理时间（事件处理器的执行时间）
- 呈现延迟（绘制下一帧所需的时间）
INP 评分阈值
- 良好（Good）：低于 200ms
- 需要改进（Needs Improvement）：200-500ms
- 较差（Poor）：超过 500ms
为什么 INP 取代了 FID
FID 只衡量首次交互，会遗漏后续的响应性问题。一个页面可能拥有良好的 FID，但 INP 却很糟糕，例如出现以下情况时：
- 页面在 JavaScript 加载后变得卡顿
- 长任务在滚动过程中阻塞了交互
- 第三方脚本干扰了后续的交互
INP 对 SEO 的影响
对排名的直接影响
Google 已确认 INP 是页面体验排名因素的一部分。INP 表现较差的站点可能会遭遇：
- 在竞争激烈的 SERP 中排名下降
- 在移动搜索中的可见度降低
- 被排除在某些丰富结果（rich results）之外
对 SEO 的间接影响
较差的 INP 与以下指标相关：
- 更高的跳出率
- 更短的页面停留时间
- 更低的转化率
- 每次会话的页面浏览量下降
常见的 INP 问题及修复方法
1. 主线程长任务
任何超过 50ms 的任务都被视为长任务。解决方案：
- 使用
scheduler.yield()拆分任务 - 对非紧急工作使用
requestIdleCallback() - 将大型计算拆分为更小的块
2. 开销高昂的事件处理器
常见的元凶包括：
- 繁重的 React 重新渲染
- 点击时进行复杂的 DOM 操作
- 同步的分析（analytics）调用
- 在用户操作时处理大量数据
3. 第三方脚本干扰
第三方脚本是导致 INP 表现糟糕的头号原因：
- 分析脚本
- 聊天小部件
- A/B 测试工具
- 广告脚本
优化策略
// Yield between operations
async function handleInteraction() {
showLoadingState();
await scheduler.yield();
const result = processComplexData();
updateUI(result);
}
测量 INP
现场数据（Field Data）来源
- Chrome UX Report
- PageSpeed Insights（现场数据标签页）
- Search Console Core Web Vitals 报告
- 使用 web-vitals 库的自定义 RUM
实验室测试（Lab Testing）
- Chrome DevTools 性能面板
- Lighthouse（全新的 INP 审计）
- 带交互测试的 WebPageTest
INP 优化清单
- 审计所有事件处理器的性能
- 在长操作中实现让出（yielding）
- 延迟加载非关键的第三方脚本
- 对 CPU 密集型工作使用 Web Workers
- 优化 React/Vue 的渲染周期
- 使用真实用户交互进行测试
- 通过 RUM 在生产环境中监控 INP
- 为交互延迟设定性能预算