Bitbucket Pipeline中Lighthouse-CI无法生成Cumulative Layout Shift值

在Bitbucket Pipeline环境运行Lighthouse-CI时，所有URL的**Cumulative Layout Shift（累积布局偏移）**审计结果均返回NaN，其余指标可正常生成数值。该问题仅出现在Bitbucket Pipeline环境中，预期所有URL都能正常输出该指标的有效结果。

相关配置文件 #

Lighthouserc.js #

ci: {
    collect: {
      settings: {
        chromeFlags: '--no-sandbox --headless',
      },
      startServerCommand: 'yarn start',
      startServerReadyPattern: 'ready on',
      url: [
        'http://localhost:3000/calculadoras/calculadora-dias-uteis',
        'http://localhost:3000/cartao-de-credito/lista-de-cartoes',
        'http://localhost:3000/cartao-de-credito/comparador-de-cartoes',
        'http://localhost:3000/categoria/negocios',
      ],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'largest-contentful-paint': ['error', {maxNumericValue: 4000}],
        'cumulative-layout-shift': ['error', {maxNumericValue: 0.1}],
        'speed-index': ['error', {maxNumericValue: 5000}],
      },
    },
  },
}

Bitbucket Pipeline日志 #

1 result(s) for http://localhost:3000/calculadoras/calculadora-dias-uteis :
  ✘  cumulative-layout-shift failure for maxNumericValue assertion
       Cumulative Layout Shift
       https://web.dev/cls/
       Audit did not produce a value at all. "maxNumericValue" might not be a valid assertion for this audit.
        expected: <=0.1
           found: NaN
      all values: NaN, NaN, NaN
1 result(s) for http://localhost:3000/cartao-de-credito/comparador-de-cartoes :
  ✘  cumulative-layout-shift failure for maxNumericValue assertion
       Cumulative Layout Shift
       https://web.dev/cls/
       Audit did not produce a value at all. "maxNumericValue" might not be a valid assertion for this audit.
        expected: <=0.1
           found: NaN
      all values: NaN, NaN, NaN

Bitbucket-pipeline.yml #

pull-requests:
    '**':
      - step:
          caches:
            - node
          name: Test and Build
          script:
            - yarn
            - yarn build
          artifacts:
            - .next/**
      - step:
          image: cypress/browsers:node14.15.0-chrome86-ff82
          caches:
            - node
          services:
            - docker
          name: Lighthouse Checks
          script:
            - yarn test:lighthouse

解决方案 #

针对Bitbucket Pipeline环境下CLS返回NaN的问题，可尝试以下修复手段：

• 升级Chrome版本
  当前使用的Chrome 86版本较旧，无头模式下对CLS指标的采集存在兼容性缺陷。更换为更高版本的Chrome镜像，比如cypress/browsers:node18.16.0-chrome114，新版本对Core Web Vitals的支持更完善。

• 调整Chrome启动参数
  在chromeFlags中添加--disable-dev-shm-usage和--disable-gpu，避免容器环境的资源限制导致采集异常：

  chromeFlags: '--no-sandbox --headless --disable-dev-shm-usage --disable-gpu'
  

• 延长页面加载等待时间
  Pipeline环境中页面加载速度较慢，Lighthouse可能在页面完全稳定前结束采集。在collect.settings中添加等待参数：

  settings: {
    chromeFlags: '--no-sandbox --headless --disable-dev-shm-usage --disable-gpu',
    maxWaitForFcp: 15000,
    maxWaitForLoad: 15000
  }
  

• 验证服务器启动状态
  确认startServerReadyPattern匹配的日志字符串是否精准，比如改为ready on http://localhost:3000，确保服务器完全启动后Lighthouse才开始采集。

• 切换为生产环境服务器
  当前使用的开发服务器（yarn start）带有热重载等特性，可能干扰CLS采集。改为启动生产服务器：先执行yarn build，再用yarn start:prod（需对应项目脚本）启动，确保环境与生产一致。

内容的提问来源于stack exchange，提问作者Renan Bessa