Lighthouse 是一項網站稽核工具,可協助開發人員掌握商機和相關診斷,改善自家網站的使用者體驗。
可以立即在透過 npm 的指令列、Chrome Canary 和 PageSpeed Insights 中使用 Lighthouse 11。並在 Chrome 118 版中導入 Chrome 穩定版。
完整的變更項目清單請參閱「11.0 變更記錄」。
無障礙類別更新
類別更新包括新的自動稽核功能、改善加權,以及優先進行人工稽核,以便讓開發人員的網站更易於存取。
全新稽核與加權
自 Lighthouse 10.0 起,新增了 13 項無障礙功能稽核:
aria-allowed-role
aria-dialog-name
aria-text
html-xml-lang-mismatch
image-redundant-alt
input-button-name
label-content-name-mismatch
link-in-text-block
select-name
skip-link
table–duplicate-name
table-fake-caption
td-has-header
除了新的稽核以外,所有稽核的權重也已更新,能更符合相應的 aXe 規則影響等級。如要瞭解新的稽核項目和權重細節,請參閱 Lighthouse 無障礙功能評分說明文件。
手動稽核瀏覽權限
Lighthouse 一律會包含一些無法自動測試的手動稽核項目,但仍包含在檢查清單中,驗證重要功能。現在只要通過所有自動化稽核程序,系統就會自動展開手動稽核專區。
這強調的是通過所有自動化稽核,且無障礙功能評分達到 100,並不保證一定能存取稽核的網頁;手動測試仍相當重要。此外,人工審查作業也經過重新調整,以最易於執行的檢查為優先。
現有稽核項目異動
與下一個顯示的內容 (INP) 互動
INP 已不再實驗,因此指標已從 experimental-interaction-to-next-paint
移至 interaction-to-next-paint
。
Service Worker
網頁不再需要以 PWA 的形式安裝在 Chrome 中,因此 service-worker
檢查已從 Lighthouse PWA 類別中移除。
資源摘要
resource-summary
稽核已從 Lighthouse 報告中移除。您仍可使用隱藏的 network-requests
稽核功能編譯網路要求統計資料:
const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};
for (const request of networkRequests) {
let total = resourceSummary[request.resourceType] || 0;
total += request.resourceSize;
resourceSummary[request.resourceType] = total;
}
console.log(resourceSummary);
舊版導覽
已移除 CLI 的 --legacy-navigation
標記、Node API 的 legacyNavigation()
函式,以及開發人員工具面板中的「舊版導覽」核取方塊。這在 Lighthouse 基礎架構上進行了為期數年的轉換作業,以支援使用者流程。
奔跑的燈塔
Lighthouse 可在 Chrome 開發人員工具、npm (節點模組和 CLI 工具) 中下載,也可做為瀏覽器擴充功能 (適用於 Chrome 和 Firefox)。同時也支援多項 Google 服務,包括 PageSpeed Insights。
如要試用 Lighthouse 節點 CLI,請使用下列指令:
npm install -g lighthouse
lighthouse https://www.example.com --view
與 Lighthouse 團隊聯絡
如要討論新功能、Lighthouse 11 版本異動,或其他 Lighthouse 相關項目:
- 透過 Lighthouse GitHub Issue Tracker 回報問題或提交意見回饋。
- 前往 Lighthouse GitHub 論壇提問。
- 透過 Twitter 與 Lighthouse 團隊聯絡 @____lighthouse。