网站的交互流畅度，直接影响访客会不会继续点下去。谷歌从 2024 年 3 月起，把 INP（Interaction to Next Paint）正式纳入核心网页指标，取代 FID，成为衡量”点了有没有马上响应”的新标准。
INP 要求从用户点击到画面更新的延迟压在 200 毫秒以内，超了就会被标红。它盯的是真实交互而非首屏，优化思路和加载速度不同。具体指标口径可对照技术SEO 实战手册的体验章节。
快速结论
- INP 衡量交互响应，达标线是 200 毫秒内。
- 主因是长任务阻塞主线程，JS 迟迟不交还控制权。
- 优化靠拆任务、让出主线程、减少大型重排。
- INP 和 LCP 一起看，才是一张完整的体验图。
INP 到底是什么
INP 记录用户每次交互（点、触、键）到浏览器画出下一帧的耗时，取较差的那批作代表。它不只看一次首屏，而是覆盖整个使用过程，所以比只看首次的 FID 更贴近真实卡顿，更能反映日常体感。
200 毫秒是”还觉得跟手”的阈值，再长用户就感觉卡。对内容站来说，评论、展开、筛选、跳转这些动作都计入。INP 红了的站，访客耐心会被一点点磨掉，跳出和转化跟着受损，间接拖累整体表现。
为什么主线程会被堵
浏览器靠单条主线程处理 JS、样式计算、布局。一个耗时几百毫秒的脚本（比如大列表渲染、复杂计算）会霸占线程，期间用户点击全排队，画面不动，INP 直接爆。这种”长任务”是头号元凶，先认准它。
很多站把首屏以外的逻辑也塞进初始化，用户还没交互就背了一身债。加上第三方脚本（统计、广告、聊天框）抢线程，主线程常年满载。和站点架构扁平化一样，先量化瓶颈再动手，别盲目优化。
拆长任务让出主线程
把几百毫秒的脚本切成小段，每段后用 setTimeout 或 requestIdleCallback 把控制权还给浏览器，点击就能插空响应。用户感觉”没卡”，INP 自然降。这是成本最低、收益最实的改法，优先做，见效快。
现代框架提供并发特性（如 React 的 transition），把非紧急更新标为可打断，保住交互流畅。不必大改架构，先从不那么紧急的渲染下手，让主线程有空喘气，访客的点击不再石沉大海，体验立刻不同。
减少大型重排与重绘
频繁改样式触发重排重绘，也会占线程。把多次 DOM 改动合并、用 transform/opacity 做动画而非改布局、读写布局分批，都能少打扰主线程。这类细节单个不起眼，叠加起来很可观，别小看。
图片和字体加载也会间接影响：布局抖动（CLS）常和 INP 同源。把尺寸定死、字体用 font-display 防闪烁，既稳布局也减负。把 INP 和 CLS 一起治理，往往一次改动两头受益，省时省力，一举两得。
管住第三方脚本
统计、广告、客服这类第三方脚本常在后台跑长任务，你还不好改它们的源码。对策是延迟加载非关键脚本、用 Web Worker 把计算挪出主线程、给关键交互让路，别让别人的代码卡住你的响应，边界要清。
上线前用真实设备测一轮，第三方在主线程的占用一目了然。把非必要的脚本能懒加载就懒加载，能异步就异步。这部分和技术SEO 实战手册提到的”资源分优先级”是同一套思维，先保核心体验。
怎么测 INP
现场可用 Chrome DevTools 的 Performance 面板抓交互，看长任务落在哪；更真实的是 GSC 的”核心网页指标”报告和 CrUX 实地数据，它们反映真实用户的 INP 分布，是谷歌算排名用的那份，最该信。
别只信实验室数据，真机字段数据才算数。把 INP 红页列出来，逐个定位最长交互，再对症拆任务。配合站点架构扁平化让关键页路径短、依赖少，交互链条也更易压到 200 毫秒内，从源头减负。
和 LCP 一起看
INP 管”交互跟手”，LCP 管”首屏快不快”，两者都是体验指标，单独优化都会偏。一个首屏飞快但点了没反应的站，转化照样差。把它俩和 CLS 并排看，才是一张完整的体验图，优化不偏科，不漏项。
资源有限时，先救最红的那项。若 INP 红得离谱，优先拆长任务；若 LCP 拖后腿，再回头搞缓存和渲染。想系统排优先级，可收进技术SEO 实战手册作为体验优化清单，逐项清，有次序。
分页面看别只盯总分
INP 报告常给全站平均分，但平均分掩盖了个别红页。某类交互页（如筛选器、长表单）可能严重拖后腿，拉低整站。定位要下钻到具体模板，而不是看一个数就放心，容易被平均值骗。
把红得最厉害的模板单列，优先重构它的交互逻辑，往往一处改动全站 INP 就绿。这和技术SEO 实战手册里”先找瓶颈再动手”的思路一致，别被平均值的假象骗过，要抓真凶才有效。
配合技术手册
把 INP 治理写进前端规范：新交互上线前过一遍主线程占用，长任务设阈值告警。规范比口头要求稳，新人写的组件也不会悄悄把线程占满，问题在代码阶段就被拦下，不带到线上。
整体体验策略可进技术SEO 实战手册形成长效机制，INP、LCP、CLS 一起管。体验好，访客才留得住，排名只是顺带的结果。把指标当产品健康监测，而不是一次性任务，才能持续稳。
一张表对应问题与修法
图：INP 优化 核心要点（运营GO 整理）
| 问题 | 表现 | 修法 |
|---|---|---|
| 长任务霸线程 | 点击无响应 | 拆任务+让出主线程 |
| 频繁重排 | 画面抖 | 合并 DOM 改+transform |
| 第三方脚本 | 后台卡 | 懒加载+Worker 挪出 |
| 布局抖动 | CLS 高 | 定尺寸+font-display |
下一步行动清单
- 用 GSC/CRUX 拉真实 INP 分布，列红页。
- 用 DevTools 定位最长交互对应的长任务。
- 拆长任务、合并 DOM 改动、管住第三方。
- 把 INP 阈值写进前端上线检查。
