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

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

前端

我在做性能监控，想采集 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 的监控方案现在该怎么处理？

我来解答赞 5 收藏

反馈

2 条解答

津孜🍀 Lv1

FMP确实已经被浏览器弃用了，现在没法直接拿到这个指标。其实不光是PerformanceObserver拿不到，Chrome DevTools里也早就不显示FMP了。

现在的主流做法是用LCP（Largest Contentful Paint）来代替FMP做性能监控。LCP能更准确反映页面主要内容渲染完成的时间点，而且各大浏览器都支持。

给你个简单的LCP采集代码：

let lcpObserved = false;

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

  const entries = entryList.getEntries();

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

  if (!lcpObserved) {

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

    lcpObserved = true;

  }

});

observer.observe({type: 'largest-contentful-paint', buffered: true});

注意这里要用 buffered: true 参数，这样才能获取到页面加载时的LCP数据。

另外提一句，除了LCP，建议你也关注一下CLS（Cumulative Layout Shift），这两个指标结合起来能更好地衡量用户体验。浏览器兼容性这块目前都挺好的，放心用就行。

2026-03-30 23:22

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