Lighthouse 9.0 的新功能's

Brendan Kenny
Brendan Kenny

Lighthouse 是一項網站稽核工具,可協助開發人員掌握機會和診斷資訊,進而改善自家網站的使用者體驗。

Lighthouse 9.0 可立即顯示在指令列、Chrome CanaryPageSpeed Insights 中。而 Chrome 第 98 版將導入 Chrome 穩定版。

API 變更

在這個版本中,大多數使用者都不應遇到任何工作流程破壞性變更。如果您執行自訂 Lighthouse 稽核,或使用需要 Lighthouse 報告 JSON 詳細資料的工具,則 9.0 版可能有部分破壞性變更。

完整的異動清單請參閱 9.0 變更記錄

適用於使用者流程的燈塔

Lighthouse 提供新的使用者流程 API,可以在網頁效期內隨時進行研究室測試。

Puppeteer 會用來編寫頁面載入指令碼,並觸發合成使用者互動,而 Lighthouse 可在這些互動期間透過多種方式叫用,以擷取關鍵深入分析資訊。也就是說,您可以在網頁載入期間「以及」與網頁互動時評估成效。

Lighthouse 使用者流程報告,包括多個網站載入和互動步驟,以及每個步驟的 Lighthouse 稽核結果

詳情請參閱 Lighthouse 使用者流程教學課程和程式碼範例

報表重新整理

Lighthouse 報告經過更新,讓內容更清楚易讀,報表來源和執行方式也更加清楚。

最終螢幕截圖已嵌入報表頂端,方便你一眼掌握測試網頁是否已正確載入,且格式符合預期。

Lighthouse 9.0 報表會以更醒目的方式列出主要成效指標,並將網頁最終外觀的螢幕截圖嵌入成效報表

報表底部的摘要資訊也經過重新設計,能夠更妥善地說明 Lighthouse 的執行方式和收集的報表。

Lighthouse 報告的更新設定部分,現在提供各個項目的摘要,例如擷取網頁的時間、使用的頁面模擬類型,以及執行測試的 Chrome 版本。

如要查看新報告的實際運作情形,請造訪 Lighthouse 9.0 或參閱這份範例報告

常見的無障礙功能問題是,網頁中不應有重複的內容 (例如 aria-labelledby 屬性中參照的 ID 在多個元素中使用)。

Lighthouse 總是會針對這種情況發出警告,但系統只會針對具有重複 ID 的元素列出第一個例項,這常會造成混淆,因為有些使用者會假設這是造成問題的「所有」元素。由於 Lighthouse 只會顯示單一元素,因此會假設這是單一元素遭標記為重複的錯誤。

Lighthouse 9.0 現會列出所有共用該 ID 的元素:

「所有可聚焦元素」的 Lighthouse 稽核

這項「相關節點」功能是由 axe-core 提供,因此可能也會出現在其他無障礙功能稽核中。

詳情請參閱「收集使用者報告的問題」和「實作提取要求」。

奔跑的燈塔

Lighthouse 在 Chrome 開發人員工具、npm (節點模組和 CLI) 中皆可使用,以及以瀏覽器擴充功能的形式 (ChromeFirefox) 提供。支援多項 Google 服務,包括 web.dev/measurePageSpeed Insights

如要試用 Lighthouse 節點 CLI,請使用下列指令:

npm install -g lighthouse
lighthouse https://www.example.com --view

與 Lighthouse 團隊聯絡

如要討論新功能、9.0 版本中的變更,或是 Lighthouse 的其他相關事項: