FMP指标怎么测？为什么我用PerformanceObserver拿不到？

Mr-含含提问于 2026-03-12 15:02:21 阅读 39

前端

我在做性能监控，想采集 FMP（First Meaningful Paint）指标，但发现用 new PerformanceObserver 监听 paint 类型时，只拿到 fcp，根本没看到 fmp 的 entry。查了文档说 FMP 已被弃用，那现在还能测吗？还是说只能用 LCP 替代？

我试过这段代码：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(entry.name, entry.startTime);
  });
});
observer.observe({entryTypes: ['paint']});

控制台只输出了 first-contentful-paint，确实没有 first-meaningful-paint。是不是浏览器已经彻底移除了这个指标？那以前依赖 FMP 的监控方案现在该怎么处理？

我来解答赞 1 收藏

反馈

1 条解答

Zz利娜 Lv1

FMP确实被废弃了不是你代码的问题，浏览器早就把这个entry移掉了。

现在官方推荐用LCP（ Largest Contentful Paint）替代，LCP本质上是FMP的改良版，衡量的是最大内容渲染完成的时间，浏览器原生支持，API也稳定。

获取LCP的代码：

const observer = new PerformanceObserver((list) => {

  const entries = list.getEntries();

  const lastEntry = entries[entries.length - 1];

  console.log('LCP:', lastEntry.startTime);

});

observer.observe({entryTypes: ['largest-contentful-paint']});

不过LCP和FMP的衡量逻辑不太一样，FMP是看"有意义的内容"首次渲染，LCP是看最大元素的渲染时间。如果你必须复现FMP的逻辑（比如产品那边非要这个指标不可），可以自己算：监听所有元素的渲染时间，找一个"关键元素"首次渲染的时刻作为FMP。

简单说，现在直接用LCP就完事了，Chrome DevTools的Performance面板和Lighthouse都拿LCP说事儿，这个才是现在的主流方案。

2026-03-12 15:06