試用新的 Lighthouse API,評估使用者流程中的效能和最佳做法。
Lighthouse 是測試網頁初始載入期間效能和最佳做法的絕佳工具。不過,使用 Lighthouse 分析網頁流程的其他方面並不容易,例如:
- 透過暖快取載入網頁
- 已啟用 Service Worker 的頁面
- 將潛在的使用者互動納入考量
這表示 Lighthouse 可能會遺漏重要資訊。Core Web Vitals 的評估依據是「所有」網頁載入資料,而不只是含有空白快取的網頁。此外,系統會測量「累計版面配置位移 (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 報告。
![顯示單一導覽的 Lighthouse 流程報表](https://web.dev/static/articles/lighthouse-user-flows/image/a-lighthouse-flow-report-293ba63cac8cb.png?hl=zh-tw)
如同 Lighthouse 的常見情況,此頁面會先經過快取或本機儲存空間清除,但真正造訪網站的真實使用者則會同時使用冷及快取的造訪。因此,這類冷載入以及使用者返回已暖化快取的網頁時,都可能會有極大的效能差異。
擷取暖負載
你也可以在這個指令碼中新增第二項導覽,這次停用 Lighthouse 預設在導覽期間清除快取和儲存空間的功能。下一個範例會在 web.dev 本身載入一篇文章,以瞭解快取帶來的效益:
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
const testUrl = 'https://web.dev/performance-scoring/';
const flow = await startFlow(page, {name: 'Cold and warm navigations'});
await flow.navigate(testUrl, {
stepName: 'Cold navigation'
});
await flow.navigate(testUrl, {
stepName: 'Warm navigation',
configContext: {
settingsOverrides: {disableStorageReset: true},
},
});
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
產生的流程報表如下所示:
![Lighthouse 流程報表,顯示兩種導覽方式:冷、一次,且效能分數較高](https://web.dev/static/articles/lighthouse-user-flows/image/a-lighthouse-flow-report-e9c6b061209b5.png?hl=zh-tw)
冷載入和暖載入結合使用,可讓您更全面地瞭解使用者的實際體驗。如果您的網站使用者在同一次造訪中載入了多個網頁,這或許能讓您更具體瞭解實際情境。
快照
快照是全新模式,可在單一時間點執行 Lighthouse 稽核。與一般的 Lighthouse 不同,系統不會重新載入頁面,這樣一來,您就能設定網頁並測試確切狀態,例如開啟下拉式選單或已填寫完畢的表單。
在本範例中,假設您想檢查 Squoosh 中進階設定的部分新 UI 通過自動化 Lighthouse 檢查。只有在載入圖片且展開選項選單以顯示進階設定時,系統才會顯示這些設定。
![Squoosh 進階設定選單](https://web.dev/static/articles/lighthouse-user-flows/image/the-squoosh-advanced-sett-5b47eadff9b96.png?hl=zh-tw)
這項程序可使用 Puppeteer 編寫,您可以在每個步驟中拍攝 Lighthouse 快照:
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
const flow = await startFlow(page, {name: 'Squoosh snapshots'});
await page.goto('https://squoosh.app/', {waitUntil: 'networkidle0'});
// Wait for first demo-image button, then open it.
const demoImageSelector = 'ul[class*="demos"] button';
await page.waitForSelector(demoImageSelector);
await flow.snapshot({stepName: 'Page loaded'});
await page.click(demoImageSelector);
// Wait for advanced settings button in UI, then open them.
const advancedSettingsSelector = 'form label[class*="option-reveal"]';
await page.waitForSelector(advancedSettingsSelector);
await flow.snapshot({stepName: 'Demo loaded'});
await page.click(advancedSettingsSelector);
await flow.snapshot({stepName: 'Advanced settings opened'});
browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
產生的報告會顯示結果大致上良好,但可能需要手動查看一些無障礙標準:
![顯示一組快照的 Lighthouse 流程報表](https://web.dev/static/articles/lighthouse-user-flows/image/a-lighthouse-flow-report-dd2916ee69336.png?hl=zh-tw)
時間範圍
實際環境 (例如 CrUX) 與研究室 (例如 Lighthouse) 中的效能結果最大的差異之一,就是缺乏使用者輸入內容。因此,最後一個使用者流程模式就是如此。
時間範圍會執行 Lighthouse 稽核一段時間,期間不一定包含導航。這個方法很適合用來擷取網頁在互動期間發生的情況。舉例來說,Lighthouse 預設會在網頁載入期間測量 CLS,但在欄位中預設測量 CLS,從初次瀏覽到關閉為止。如果使用者互動是 CLS 的原因,那麼 Lighthouse 先前無法擷取及協助修正。
您可前往這個測試網站模擬使用者在捲動時插入報導中,系統不會為文章預留空間的廣告。在一串資訊卡中,當版位進入可視區域時,偶爾會出現紅色正方形。由於沒有保留空間給這些紅色方塊,因此下方的資訊卡會移向相反,造成版面配置位移。
一般 Lighthouse 導航的 CLS 為 0。不過,頁面捲動頁面後,頁面會出現版面配置位移的問題,而且 CLS 值也會上升。
以下指令碼會產生包含這兩項動作的使用者流程報表,以便呈現差異。
async function captureReport() {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
// Get a session handle to be able to send protocol commands to the page.
const session = await page.target().createCDPSession();
const testUrl = 'https://pie-charmed-treatment.glitch.me/';
const flow = await startFlow(page, {name: 'CLS during navigation and on scroll'});
// Regular Lighthouse navigation.
await flow.navigate(testUrl, {stepName: 'Navigate only'});
// Navigate and scroll timespan.
await flow.startTimespan({stepName: 'Navigate and scroll'});
await page.goto(testUrl, {waitUntil: 'networkidle0'});
// We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture.
// https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture
await session.send('Input.synthesizeScrollGesture', {
x: 100,
y: 600,
yDistance: -2500,
speed: 1000,
repeatCount: 2,
repeatDelayMs: 250,
});
await flow.endTimespan();
await browser.close();
const report = await flow.generateReport();
fs.writeFileSync('flow.report.html', report);
open('flow.report.html', {wait: false});
}
captureReport();
這會產生一份報表,將一般導覽與包含瀏覽及捲動瀏覽的時間範圍相比較:
![顯示一組快照的 Lighthouse 流程報表](https://web.dev/static/articles/lighthouse-user-flows/image/a-lighthouse-flow-report-686ac2dd8baca.png?hl=zh-tw)
我們深入分析每個步驟,純導覽步驟會顯示 CLS 為 0。網站很棒!
![Lighthouse 報表只涵蓋網頁瀏覽和所有綠色指標](https://web.dev/static/articles/lighthouse-user-flows/image/the-lighthouse-report-cov-3f705ea0aab88.png?hl=zh-tw)
不過「瀏覽及捲動」講述另一個步驟的故事目前只有「Total Blocking Time」和「Cumulative Layout Shift」提供時間範圍資料,但這個頁面的延遲載入內容明確使網站的 CLS 處於明確配置。
![Lighthouse 報表包含網頁導覽和捲動,並附上失敗的 CLS](https://web.dev/static/articles/lighthouse-user-flows/image/the-lighthouse-report-cov-580a70af44a27.png?hl=zh-tw)
Lighthouse 原本無法找出這種有問題的 CLS 行為,不過在實際使用者體驗中卻幾乎可正常運作。對事先擬好腳本的互動能力測試可大幅提升研究室的保真度。
徵求意見回饋
Lighthouse 中的新使用者流程 API 有許多新功能,但評估使用者遇到的情況可能仍十分複雜。
如有任何疑問,請在 Lighthouse 論壇中與我們聯絡,並透過 Issue Tracker 回報錯誤或提出建議。