Chrome 125 推出全新 Performance API，助力更好地监测 Web Vitals

Chrome 125 内置了全新的 Performance API，可对 Core Web Vitals 提供更深入的洞察，让开发者能够更高效地调试和优化网页性能。

全新的 Performance API

Long Animation Frames API

Long Animation Frames API 取代了 Long Tasks API，提供更全面的数据：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log({
      duration: entry.duration,
      renderTime: entry.renderTime,
      styleAndLayoutTime: entry.styleAndLayoutTime,
      scripts: entry.scripts.map(s => ({
        name: s.name,
        type: s.type,
        duration: s.duration,
        invoker: s.invoker,
      })),
    });
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

Navigation Activation API

提供有关导航如何被触发的洞察：

• 区分链接点击、表单提交和地址栏输入
• 单独追踪 BFCache 恢复
• 实现更精确的 CWV 归因

升级后的 PerformanceResourceTiming

增强的资源计时数据：

• 响应头大小信息
• 跨源重定向追踪
• 资源计时条目中的优先级提示（Priority Hints）
• 更细粒度的计时阶段

对 CWV 调试的影响

这些 API 能够实现：

1. LCP 调试：精确识别哪个资源是 LCP 元素以及它为何加载缓慢
2. INP 归因：精准定位是哪个事件处理函数导致了较差的 INP
3. CLS 来源识别：准确知道是哪个元素发生了位移以及原因

对 SEO 的影响

更好的调试工具意味着：

• 更快识别性能问题
• 更精准的优化工作
• 修复措施与排名变化之间的关联性更强
• 更有能力证明性能优化工作的投资回报率（ROI）

浏览器支持情况

开发者资源

• Chrome Developers 博客文章
• Web.dev 更新的 CWV 调试指南
• 全新的 Lighthouse 12 集成
• 更新的 web-vitals JavaScript 库 v5