增长专业术语
INP
Interaction to Next Paint
交互到下一次绘制 · 用户点了之后页面多快给反馈
SEO前端性能
INP
- 定义
- INP（Interaction to Next Paint）是增长领域的专业术语。INP 追踪用户在页面上的所有交互（点击、轻触、键盘输入），记录从输入到浏览器完成下一帧视觉更新的最长延迟。
最后更新：2026-03-31
什么是INP？
INP 追踪用户在页面上的所有交互（点击、轻触、键盘输入），记录从输入到浏览器完成下一帧视觉更新的最长延迟。2024 年 3 月正式取代 FID 成为 Core Web Vitals 的响应性指标，2026 年仍有 43% 的网站未达标。
- 良好阈值 ≤ 200ms，差 > 500ms——比 FID 严格得多
- 观测页面全生命周期的所有交互，取最差的那次（排除极端异常值）
- 2024 年 3 月正式取代 FID，是目前最常不达标的 Core Web Vital
INP详解
INP 由 Google 于 2022 年提出、2024 年 3 月正式纳入 Core Web Vitals，替代只测量首次交互输入延迟的 FID。INP 衡量的是完整交互生命周期：从用户输入事件触发，经过 JavaScript 处理，到浏览器完成下一帧绘制的总耗时。它会观察页面上发生的每一次交互，最终报告最慢的那次（有少量异常值排除机制）。常见瓶颈包括：长任务阻塞主线程、大量同步 DOM 操作、第三方脚本抢占执行时间。优化策略包括拆分长任务（yield to main thread）、减少 JS 执行量、使用 requestAnimationFrame 和 CSS containment。
公式提示
INP = max(所有交互的「输入延迟 + 处理时间 + 呈现延迟」)，取第 75 百分位；≤ 200ms 为良好。
INP的应用场景
正式定义
衡量页面在整个生命周期内对用户交互响应速度的 Core Web Vitals 指标，取所有交互中最慢一次的完整延迟。
应用场景
- 诊断页面交互卡顿（按钮点击无反应、输入框延迟）
- 评估第三方脚本对页面响应性的影响
- 作为 SEO 技术审计中响应性维度的核心指标
常见误区
- INP 不只看首次交互，它观测页面上所有交互并取最差值
- INP 差不一定是你的代码慢，第三方广告/分析脚本常常是主因
实际案例
📌 电商筛选器卡顿
某电商列表页点击筛选按钮后 INP 达 680ms，原因是筛选逻辑同步重渲染了 500+ 商品卡片。改用虚拟列表 + requestAnimationFrame 分帧渲染后，INP 降至 150ms。
INP的参考来源
- 文档web.dev: Interaction to Next Paint (INP)Google Chrome Team
- 社区
关于INP的常见问题
- INP 和 FID 有什么区别
- FID 只测首次交互的输入延迟，INP 观测所有交互的完整延迟（输入 + 处理 + 渲染）并取最差值，覆盖面和严格度都远超 FID。
- INP 不达标怎么优化
- 核心思路是减少主线程阻塞：拆分长任务、延迟非关键 JS、减少同步 DOM 操作、审计第三方脚本。Chrome DevTools 的 Performance 面板可定位具体慢交互。
- 为什么我的 INP 在手机上特别差
- 移动设备 CPU 性能弱，同样的 JS 执行时间可能是桌面的 3-5 倍。优化时应以中低端安卓设备为基准测试。