页面性能监控中如何准确获取首屏加载时间？

你说得对，load 和 DOMContentLoaded 确实不太准，它们只代表资源加载和 DOM 解析完成，但用户看到的内容可能还在加载中。

现在主流的做法是用 Performance Observer 监听 Paint 相关的指标。最关键的两个是 FCP (First Contentful Paint) 和 LCP (Largest Contentful Paint)。

FCP 是首次有内容绘制的时间点，LCP 是最大内容（通常是首屏最大的图片或文字块）绘制完成的时间。如果你的首屏主要是图片，那 LCP 会更准确；如果是文字为主，FCP 就够用了。

简单实现如下：

// 监听 FCP

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

  const entries = entryList.getEntries();

  const fcpEntry = entries.find(e => e.name === 'first-contentful-paint');

  if (fcpEntry) {

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

  }

});

fcpObserver.observe({ type: 'paint', buffered: true });



// 监听 LCP（更推荐，更接近"首屏"概念）

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

  const entries = entryList.getEntries();

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

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

});

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

如果你想更精细地控制"首屏"的定义，比如首屏有多个关键图片，可以手动埋点：

// 假设首屏有个关键的首图

const heroImg = document.querySelector('.hero-image');

if (heroImg) {

  if (heroImg.complete) {

    console.log('图片已加载，耗时:', performance.now());

  } else {

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

      console.log('首图加载完成:', performance.now());

    });

  }

}

另外提醒一下，LCP 在移动端会因为网络、图片大小等因素有波动，建议结合 navigationStart 一起算相对时间。还有，如果你的页面有懒加载，LCP 可能会统计到非首屏的内容，这点要注意过滤。

总的来说，现在最靠谱的方案就是 LCP，Chrome 的 Lighthouse 和 Web Vitals 扩展都是用这个指标。

首屏加载时间这个问题确实挺烦的，loadEventEnd 那帮子 timing 事件真不太靠谱。

你说的思路是对的，得结合 FCP 和 LCP 这两个指标。用 Performance Observer 来监听最稳：

// 监听 FCP（首次内容绘制）

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

  const entries = entryList.getEntries();

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

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

});

fcpObserver.observe({ type: 'paint', buffered: true });



// 监听 LCP（最大内容绘制），这个更接近"首屏可见"

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

  const entries = entryList.getEntries();

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

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

});

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

LCP 基本上就是用户看到主要内容的时间点了，比单纯等 load 事件靠谱得多。

如果你首屏有张大图特别关键，还想更精确点，可以单独监控那张图的加载时间：

// 找到首屏那张最重要的图

const heroImage = document.querySelector('.hero img');

if (heroImage) {

  if (heroImage.complete) {

    console.log('图片已加载');

  } else {

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

      console.log('首屏大图加载完成');

    });

  }

}

在 WordPress 里的话，你可以在主题的 functions.php 里挂个钩子，把这段监控代码 enqueue 进去就行。搞个简单的插件把这段 JS 注入到 footer也成。

总的来说，LCP 是目前最接近"首屏可见"体验的指标，比以前那些 domContentLoaded 靠谱多了。