Puppeteer运行Lighthouse生成报告缺失LCP/TBT/CLS指标咨询

安全阿岳

2026-9-1

问题根因

Puppeteer脚本运行时调用的Lighthouse版本过低，和浏览器内置的Lighthouse版本不匹配。
Lighthouse 6.0及以上版本才正式将LCP、TBT、CLS列为核心Web指标，替换旧版的First CPU Idle、First Meaningful Paint、Max Potential First Input Delay指标。Chrome浏览器内置的Lighthouse会跟随Chrome版本自动更新，默认都是符合要求的高版本；而项目中通过Puppeteer调用的Lighthouse如果是6.0以下的旧版本，就只会输出旧版指标。

修复步骤

第一步：确认当前项目实际加载的Lighthouse版本，在项目根目录执行以下命令：
npm ls lighthouse
如果输出的版本号小于6.0.0，即可确认是版本问题。
第二步：升级Lighthouse依赖到最新稳定版：
npm install lighthouse@latest --save-dev
如果你是通过第三方封装包（比如puppeteer-lighthouse）调用能力，需要同步升级Puppeteer及相关封装包到最新版本，避免内置依赖锁定旧版Lighthouse：
npm install puppeteer@latest --save-dev
第三步：检查Lighthouse启动配置，不要使用legacy旧版预设，建议显式指定使用核心Web指标预设，参考配置：

const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const { port } = new URL(browser.wsEndpoint());
  // 配置项不要加preset: 'legacy'，优先用core-web-vitals预设
  const runnerResult = await lighthouse(
    '待检测页面URL',
    {
      port,
      output: 'html',
      preset: 'core-web-vitals',
      logLevel: 'info'
    }
  );
  // 自定义报告存储逻辑
  const reportHtml = runnerResult.report;
  fs.writeFileSync('lighthouse-report.html', reportHtml);
  await browser.close();
})();