試用新的 Lighthouse API，評估整個使用者流程的效能和最佳做法。
Lighthouse 是一項實用工具，可在網頁初始載入期間測試效能和最佳做法。不過，以往很難使用 Lighthouse 分析網頁生命週期的其他面向，例如：
- 使用快取的網頁載入作業
- 已啟用 Service Worker 的網頁
- 考量潛在的使用者互動
這表示 Lighthouse 可能會遺漏重要資訊。網站體驗核心指標是根據所有網頁載入作業計算，不只限於快取資料為空的網頁。此外，您也可以在網頁開啟的整個期間，評估累計版面配置位移 (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 擷取網頁載入情形的動作編寫成指令碼，請按照下列步驟操作：
- 使用 puppeteer 開啟瀏覽器。
- 啟動 Lighthouse 使用者流程。
- 前往目標網址。
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 報表。