去年10月 Google 把 INP 的阈值从200ms收紧到了150ms，我那会儿盯着 Search Console 的 Core Web Vitals 报告，3个站全挂了红线。桌面端勉强过关，移动端 INP 平均340ms——点个菜单按钮要等三分之一秒才有反应，用户不跑才怪。
花了大概3周时间把3个站的 INP 全部压到100ms以下，最快的站现在是85ms。这篇文章就把我踩过的坑和实测有效的方法捋一遍，你照着做大概率也能过。
INP 这东西和之前的 FID 最大的区别是——FID 只看第一次交互的延迟，INP 看的是整个页面生命周期里最慢的那一次。所以你哪怕首页加载飞快，用户用着用着变卡了，INP 一样爆炸。这就逼着你必须关注长任务（Long Task）和主线程的持续占用情况。
我刚开始优化的时候犯了个错：盯着 Lighthouse 的 Total Blocking Time 调了半天，上线一测 INP 纹丝不动。后来才搞明白，Lighthouse 是实验室数据，Google 排名用的是 Chrome UX Report 的现场数据，两者差了一个量级。真实用户的手机性能比你的 MacBook 差远了——我用一台红米 Note 12（骁龙4 Gen1，2023年的中低端芯片）当测试机，在上面跑出来的 INP 基本和 CrUX 数据吻合。
下面是我实际执行的优化步骤，按投入产出比排序：
第一件事是砍第三方脚本。我查了 RUM 数据（用了 Web Vitals 库自己打点上报），发现 INP 最差的交互场景全部发生在第三方脚本加载期间。一个聊天插件在主线程上占了380ms，一个热力图工具占了210ms。我把聊天插件改成用户点击后才加载，热力图直接换了个异步版本的替代品。单单这一步，移动端 INP 中位数从340ms掉到了190ms。如果你用的是 Google Tag Manager，强烈建议把非关键标签的触发条件改成 DOM Ready 之后再加载，别在页面加载的高峰期抢主线程。
第二件事是拆长任务。我用 PerformanceObserver 监听 longtask，把超过50ms的任务全部揪了出来。最严重的是一个产品筛选逻辑——每次用户点筛选条件，要遍历1200多个 DOM 节点去更新可见状态，一次性在主线程上跑了170ms。我用 scheduler.yield() 把这个任务拆成了6个小块，每处理200个节点就让出主线程一次。改完以后同一个筛选交互的延迟降到了30ms以内。如果你的站点还在用 setTimeout(fn, 0) 做让出，赶紧换成 scheduler.yield() 或者 scheduler.postTask()，优先级控制精细得多，2026年主流浏览器已经全部支持了。
第三件事是 React 组件的渲染开销。我有个站点首页有个实时价格滚动组件，每秒更新一次，每次触发30多个组件重新渲染。React.memo 加 useMemo 上了以后效果一般，因为业务逻辑复杂，依赖项太多。最终解决方案是把这个组件移到了 Web Worker 里算价格，算完通过 postMessage 把结果扔回来，主线程只负责渲染最终的数字。这一步把滚动组件的渲染时间从平均45ms降到了8ms。
第四件事是针对移动端的。Chrome DevTools 的性能面板里有个"CPU 4x slowdown"选项，我之前觉得开了以后测出来的数据太夸张，不真实。后来对比了真机数据发现——4倍降速模拟出来的结果和红米 Note 12 的实测曲线惊人一致。现在我所有性能测试默认开6倍降速，能过这个标准的，线上基本稳了。
还有一个容易忽略的点：事件回调里的 DOM 读取。很多前端习惯在点击回调里先读 offsetHeight 再改样式，这会造成强制同步布局（Forced Reflow），每次大概吃掉5-15ms。单个看不严重，但INP统计的是从交互开始到下一帧绘制的完整时间，这些微小延迟会叠加。我把所有会触发回流的读取操作集中到了 requestAnimationFrame 里做批量处理，效果很直接——交互延迟又降了大概20ms。
效果总结一下：移动端 INP 从340ms降到85ms，CrUX 数据在6周内从"需要改进"跳到了"良好"。Google 那边大概过了2个月左右，3个站的自然流量平均涨了11%，CTR 涨了0.8个百分点。别小看这0.8%，日均 UV 2000以上的站，一个月多出来将近500个点击。
如果你刚开始搞 INP 优化，我的建议是：先别碰代码，花半天时间把 RUM 监控搭起来。Web Vitals 库5分钟就能接入，关键是要把 attribution 参数打开，这样你能看到每次 INP 事件具体是被哪个 DOM 元素触发的、耗时花在了哪个阶段（输入延迟、处理时间、渲染延迟）。没数据盲调是大忌，我头两天就是吃了这个亏。
另外，2026年 Google 已经明确表态 INP 会作为移动端排名的重要信号之一。按目前的数据看，INP 低于150ms 的页面和高于300ms 的页面之间，排名差异在竞争度中等的关键词上能拉开2-4个位置。不是虚的，是真金白银的流量差距。
标签： Core Web Vitals INP优化 seo技术 网站性能 页面体验
还木有评论哦，快来抢沙发吧~