Lighthouse 用户流

试用新的 Lighthouse API，衡量整个用户体验历程中的性能和最佳实践。

Brendan Kenny
Brendan Kenny
GitHub Bluesky

Lighthouse 是一款出色的工具，可用于测试初始网页加载期间的性能和最佳实践。不过，传统上，使用 Lighthouse 分析网页生命周期的其他方面一直很困难，例如：

  • 使用温缓存的网页加载
  • 已启用 Service Worker 的网页
  • 考虑潜在的用户互动

这意味着 Lighthouse 可能会错过重要信息。核心网页指标基于所有网页加载情况，而不仅仅是缓存为空的网页加载情况。此外，您还可以衡量 Cumulative Layout Shift (CLS) 等指标在网页打开期间的整个时间内的情况。

Lighthouse 提供了一个新的用户体验历程 API，可让您在网页生命周期的任何时间点进行实验室测试。Puppeteer 用于编写网页加载脚本并触发合成用户互动，您可以通过多种方式调用 Lighthouse，以便在这些互动期间捕获关键数据分析。也就是说，您可以在网页加载期间和与网页互动期间衡量性能。您可以在 CI 中运行无障碍功能检查，不仅仅在初始视图上，还可以在结账流程的深层运行，以确保没有任何问题出现回归。

现在，几乎所有为了确保用户体验流程正常而编写的 Puppeteer 脚本都可以在任意位置插入 Lighthouse，以便衡量性能并贯彻最佳实践。本教程将详细介绍新的 Lighthouse 模式，这些模式可衡量用户体验流程的不同部分：导航、快照和时间段。

设置

用户体验流程 API 目前仍处于预览阶段，但目前已在 Lighthouse 中提供。如需试用以下演示，您需要使用 Node 14 或更高版本。创建一个空目录，然后在其中运行以下命令：

# Default to ES modules.
echo '{"type": "module"}' > package.json

# Init npm project without the wizard.
npm init -y

# Dependencies for these examples.
npm install lighthouse puppeteer open

新的 Lighthouse“导航”模式实际上是对（到目前为止）标准 Lighthouse 行为的命名：分析网页的冷加载。此模式用于监控网页加载性能，但用户体验流程还可以带来新的分析洞见。

如需通过脚本让 Lighthouse 捕获网页加载情况，请执行以下操作：

  1. 使用 Puppeteer 打开浏览器。
  2. 启动 Lighthouse 用户体验流程。
  3. 前往目标网址。
import fs from 'fs';
import open from 'open';
import puppeteer from 'puppeteer';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const flow = await startFlow(page, {name: 'Single Navigation'});
  await flow.navigate('https://web.dev/performance-scoring/');

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

这是最简单的流程。打开后，该报告会显示仅包含单个步骤的摘要视图。点击该步骤即可显示相应导航的传统 Lighthouse 报告。