下次绘制交互（INP）
下次绘制交互（INP）是 Core Web Vitals 中的一项指标，衡量页面在用户交互（点击、轻触或按键）之后做出视觉响应所需的时间。2024 年 3 月，Google 将 INP 提升为官方排名因素，取代了首次输入延迟（FID）。
下次绘制交互（INP）是 Core Web Vitals 中的一项指标，衡量页面在用户交互（点击、轻触或按键）之后做出视觉响应所需的时间。2024 年 3 月，Google 将 INP 提升为官方排名因素，取代了首次输入延迟（FID）。
为什么重要
FID 只捕捉首次交互的延迟，而 INP 会追踪页面整个生命周期内的每一次交互，并以最慢的那一次进行评分。这更贴近用户的真实感受。据 Google 称，截至 2026 年，约 36% 的桌面端网站和 45% 的移动端网站仍未达到"良好"阈值，这使得 INP 优化成为相对竞争页面的明显优势。
阈值
| 评级 | INP 值 |
|---|---|
| 良好 | ≤ 200 毫秒 |
| 需要改进 | 200 到 500 毫秒 |
| 较差 | > 500 毫秒 |
以来自 Chrome 用户体验报告（CrUX）的真实用户数据的第 75 百分位（p75）进行评分。
是什么拖慢了 INP
冗长的 JavaScript 任务：任何占用主线程超过 50 毫秒的任务都会阻塞下一次交互。
输入延迟：因主线程正忙于其他工作，事件处理程序在运行之前所等待的时间。
呈现延迟：从事件处理完成到浏览器绘制下一帧之间的时间，通常由复杂的 DOM 或布局变化所驱动。
如何优化
拆分冗长任务：使用 setTimeout、scheduler.yield() 或 requestIdleCallback，将超过 50 毫秒的任务拆开。
保持事件处理程序轻量：不要在点击处理程序内部执行繁重工作，将其推迟到下一次 requestAnimationFrame 之后。
避免不必要的重新渲染：在 React 中，使用 memo、useMemo 和 useCallback 来避免冗余更新。
使用 CSS contain：contain: content 等属性可以限制布局和绘制的范围，使帧渲染开销更低。
延迟第三方脚本：使用 async/defer 加载广告、分析和聊天小工具，使它们不会阻塞交互。
测量工具：使用 PageSpeed Insights、Web Vitals Chrome 扩展程序以及 Search Console 的 Core Web Vitals 报告，获取真实的 INP 数据。
Sources: