如何准确监控页面首屏加载时间？

博主振莉提问于 2026-03-31 12:38:16 阅读 3

前端

我在做性能优化时想监控用户看到首屏内容的时间，但不确定该用哪个 Performance API。试过 performance.timing.domContentLoadedEventEnd，但这好像只代表 DOM 加载完，图片可能还没出来。

也查了 LCP（最大内容绘制），但不确定怎么在真实用户监控中稳定采集。有没有推荐的做法？比如是不是应该监听 first-contentful-paint？

目前代码是这样写的：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'largest-contentful-paint') {
      console.log('LCP:', entry.startTime);
    }
  }
});
observer.observe({ entryTypes: ['largest-contentful-paint'] });

但有时候在低端机上拿不到数据，是不是还要加个兜底方案？比如用 DOMContentLoaded 或 load 事件？

我来解答赞 2 收藏

反馈

1 条解答

一志丹 Lv1

首屏加载时间确实不太好测，我的做法是结合几个指标来保证准确性。LCP确实是个好选择，但像你说的，低端机上可能拿不到数据。

你现在的代码已经监听了 LCP，这是个不错的开始。我建议再加上 first-paint 和 first-contentful-paint 作为补充：

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

  list.getEntries().forEach(entry => {

    if (entry.name === 'largest-contentful-paint') console.log('LCP:', entry.startTime);

    else if (entry.entryType === 'paint' && entry.name === 'first-contentful-paint')

      console.log('FCP:', entry.startTime);

  });

});

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

确实需要加兜底方案，在页面完全加载时记录一个时间点：

let loadTime = Date.now();

window.addEventListener('load', () => {

  loadTime = Date.now() - performance.timeOrigin;

});

最后在上报数据时可以这样处理：如果有 LCP 数据就用它，没有的话依次退到 FCP 和 load 时间。这个组合基本能覆盖大部分情况了。

做性能监控真不容易，各种设备和网络环境都要考虑周全，祝你好运！

2026-03-31 13:09