页面”感觉”慢但LCP一直绿？今天Chrome把SPA性能测量的标准彻底变了——soft-navigation + interaction-contentful-paint

Chrome 151 引入了两套针对 SPA 的新性能指标，彻底改变了「页面跳了但URL没变」的体验衡量方式。

传统 LCP/FID/CLS 都基于导航事件，SPA 内部路由切换根本不触发，导致「用户点了没反应」的体验黑盒一直存在。你盯着 Lighthouse 分数绿，结果用户点完按钮等了三秒才动，投诉来了你还没数据。

问题出在哪？

SPA 里的「页面切换」有两种：

1. 硬导航（Hard Navigation）—— URL 变了，浏览器重新加载，LCP/CLS 正常触发
2. 软导航（Soft Navigation）—— URL 可能变了（history.pushState），但浏览器认为是同一个页面，经典性能指标集体哑火

这就导致：用户从首页点进列表页，LCP 记录的是首屏加载时间，而不是「列表页渲染完成」时间。你以为自己在优化列表页，其实 LCP 根本不看你优化了什么。

Chrome 151 怎么改的？

两个新指标：

Soft Navigation — 浏览器自己识别出的「逻辑页面切换」。Chrome 会追踪 pushState/replaceState + 后续 DOM 变化，当它认为「这是一个新页面」时，标记为 soft navigation。这让 Performance API 能区分「首次加载」和「SPA 内部跳转」。

Interaction Contentful Paint（ICP） — 逻辑页面内用户第一次可交互的时间。传统 INP 追踪所有交互的响应时间，ICP 则专注于「页面稳定到可操作」这个节点。两者结合：INP 告诉你每次点击快不快，ICP 告诉你「进门之后能不能马上点」。

怎么接进监控？

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.type === 'soft-navigation') {
      console.log('软导航发生:', entry.url, entry.startTime);
    }
  }
});
observer.observe({ type: 'navigation', buffered: true });

生产落地要注意什么？

1. ICP 不是 INP 的替代 — INP 覆盖所有交互，ICP 只看「页面稳定后第一次交互」，两者都要看
2. Soft Navigation 依赖 Chrome 151+ — 老版本浏览器 fallback，要做特性检测
3. SPA 路由要主动触发 — Chrome 靠 DOM 变化推测，不是所有框架都自动触发

下一步怎么走？

如果你现在用 Page Routing Performance 监控 SPA，建议把 soft-navigation 条目纳入采集，在 dashboard 里拆出「硬导航 vs 软导航」两个视角——你会发现某些「列表页」的实际 ICP 比首页 LCP 还高，这才是用户真正卡的地方。

Chrome 151 的 soft navigation 还在推进 Baseline，Safari/Firefox 尚未支持，生产使用前记得查 caniuse。