如何使用Playwright+TypeScript获取React应用的LCP精确值？

问题描述 #

我需要获取React应用的Largest Contentful Paint（LCP）精确值以开展Web性能测试，参考官方JS测量方案并用TypeScript实现后，发现所得数值与浏览器性能面板中的数值存在差异，想咨询是否有其他可行方案。当前实现代码如下：

return page.evaluate(() => {
    return new Promise<PerformancePaintTiming>((resolve) => {
      new PerformanceObserver((entryList) => {
        const lcpEntry = entryList.getEntries().find(entry => entry.entryType === 'largest-contentful-paint');
        if (lcpEntry) resolve(lcpEntry as PerformancePaintTiming);
      }).observe({ type: 'largest-contentful-paint', buffered: true });
    });
  });

可行解决方案 #

• 等待最终LCP条目，而非第一个
  LCP并非固定值，页面加载过程中（比如图片加载完成、动态内容渲染）会不断更新，你的代码拿到第一个LCP条目就终止监听，但浏览器面板显示的是最终的LCP值。修改代码持续监听所有LCP条目，直到页面稳定后取最后一个：

return page.evaluate(() => {
  return new Promise<PerformancePaintTiming>((resolve) => {
    let latestLcpEntry: PerformancePaintTiming | null = null;
    const observer = new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries() as PerformancePaintTiming[];
      latestLcpEntry = entries[entries.length - 1];
    });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });

    // 等待页面稳定，延迟时间可根据业务调整
    setTimeout(() => {
      observer.disconnect();
      if (latestLcpEntry) resolve(latestLcpEntry);
    }, 3000);
  });
});

• 匹配React的渲染时机
  React单页应用的动态内容常在hydration完成后才渲染，若过早启动监听，可能错过后续更新的LCP值。可以在React组件内用useEffect挂载后再测量：

// React组件内的测量逻辑
useEffect(() => {
  let latestLcp: PerformancePaintTiming | null = null;
  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries() as PerformancePaintTiming[];
    latestLcp = entries[entries.length - 1];
  });

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

  // 页面卸载前获取最终LCP值
  const handleBeforeUnload = () => {
    if (latestLcp) {
      console.log('最终LCP值:', latestLcp.startTime);
      // 可在此处将数值上报至后端
    }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    observer.disconnect();
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []);

• 直接读取Performance API的完整条目
  页面加载完成后，直接通过performance.getEntriesByType获取所有LCP条目，取最后一个即为最终值：

return page.evaluate(() => {
  return new Promise<number>((resolve) => {
    const checkLcp = () => {
      const lcpEntries = performance.getEntriesByType('largest-contentful-paint') as PerformancePaintTiming[];
      if (lcpEntries.length > 0) {
        const finalLcp = lcpEntries[lcpEntries.length - 1];
        resolve(finalLcp.startTime);
      } else {
        setTimeout(checkLcp, 500);
      }
    };

    // 等待load事件完成后，再额外等待处理动态内容
    window.addEventListener('load', () => {
      setTimeout(checkLcp, 1000);
    });
  });
});

• 排除第三方资源干扰
  浏览器面板的LCP可能包含广告、统计脚本等第三方资源，若你的测试只关注自身业务内容，可过滤非同源条目：

const lcpEntry = entryList.getEntries().find(entry => {
  return entry.entryType === 'largest-contentful-paint' && 
         entry.url.includes(window.location.origin);
});

内容的提问来源于stack exchange，提问作者Rahul Krishna