前端性能测试怎么测首屏加载时间？

胜楠~ 提问于 2026-03-12 22:46:17 阅读 4

前端

我在做项目优化，想测一下首屏加载时间，但不知道用什么工具或者方法比较准。试过用 performance.now() 手动打点，但感觉不太靠谱，因为首屏内容动态渲染的，怎么判断“首屏”到底什么时候算完成啊？

有没有推荐的自动化方案？比如能不能用 Lighthouse 或者 Web Vitals 来测？我看到别人提 FCP、LCP 这些指标，但不确定哪个才真正代表用户看到的“首屏”。

我来解答赞 3 收藏

反馈

1 条解答

Air-柯豫 Lv1

首屏加载时间这个问题确实挺多人纠结的，特别是动态渲染的场景下。

先说说 FCP 和 LCP 这两个东西的区别：FCP（First Contentful Paint）是页面首次渲染出任何内容的时间，不管这个内容是文字、图片还是canvas，哪怕一个loading图标出来了都算。这个其实不太能代表用户看到的"首屏"。

LCP（Largest Contentful Paint）是页面最大内容元素渲染完成的时间，通常是首屏最核心的那个元素（比如大图或者主要文本块）加载完的时间。这个更接近用户感知的"首屏"。

对于你的动态渲染场景，有几个方案：

方案一：直接用 Web Vitals

现在浏览器原生支持 PerformanceObserver，可以直接测 LCP：

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

  const entries = list.getEntries();

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

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

});

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

这个是浏览器实际渲染时记录的，比你手动打点准多了。

方案二：Lighthouse

命令行跑一下就知道：

lighthouse https://你的网址 --view --preset=desktop

报告会直接给出 LCP、FCP、TTI 这些指标，还有具体的优化建议。不过本地 lighthouse 跑出来的结果和网络环境关系很大，生产环境建议用 PageSpeed Insights 或者 Chrome UX Report 的数据更靠谱。

方案三：自动化方案

如果想集成到 CI 里，可以用 Puppeteer 配合 lighthouse-core：

const lighthouse = require('lighthouse');

const puppeteer = require('puppeteer');



(async () => {

  const browser = await puppeteer.launch();

  const result = await lighthouse('https://你的网址', {

    port: new URL(browser.wsEndpoint()).port,

    output: 'json',

  });

  console.log(result.lhr.audits['largest-contentful-paint'].numericValue);

  await browser.close();

})();

关于动态渲染怎么判断首屏完成

这个其实没有完美的通用方案，因为"首屏完成"这个概念本身就是业务相关的。你需要结合 LCP 来判断，如果你的首屏最大内容是动态渲染的，LCP 会自动捕捉到。

另一个思路是看你的主要内容渲染完成的时间点，比如你的列表数据渲染完了、主图加载完了，可以在那个Promise.all或者关键渲染节点打点记录时间。

总的来说，个人建议直接用 LCP 作为首屏指标，配合 Lighthouse 做常规检测，线上用 Chrome UX Report 或者自建监控采集真实用户数据。这样覆盖开发和线上场景基本就够了。

2026-03-12 23:08