Lighthouse 是一項網站稽核工具,可協助開發人員掌握機會和診斷資訊,進而改善自家網站的使用者體驗。
Lighthouse 9.0 可立即顯示在指令列、Chrome Canary 和 PageSpeed Insights 中。而 Chrome 第 98 版將導入 Chrome 穩定版。
API 變更
在這個版本中,大多數使用者都不應遇到任何工作流程破壞性變更。如果您執行自訂 Lighthouse 稽核,或使用需要 Lighthouse 報告 JSON 詳細資料的工具,則 9.0 版可能有部分破壞性變更。
完整的異動清單請參閱 9.0 變更記錄。
適用於使用者流程的燈塔
Lighthouse 提供新的使用者流程 API,可以在網頁效期內隨時進行研究室測試。
Puppeteer 會用來編寫頁面載入指令碼,並觸發合成使用者互動,而 Lighthouse 可在這些互動期間透過多種方式叫用,以擷取關鍵深入分析資訊。也就是說,您可以在網頁載入期間「以及」與網頁互動時評估成效。
詳情請參閱 Lighthouse 使用者流程教學課程和程式碼範例。
報表重新整理
Lighthouse 報告經過更新,讓內容更清楚易讀,報表來源和執行方式也更加清楚。
最終螢幕截圖已嵌入報表頂端,方便你一眼掌握測試網頁是否已正確載入,且格式符合預期。
報表底部的摘要資訊也經過重新設計,能夠更妥善地說明 Lighthouse 的執行方式和收集的報表。
如要查看新報告的實際運作情形,請造訪 Lighthouse 9.0 或參閱這份範例報告。
相關無障礙元素
常見的無障礙功能問題是,網頁中不應有重複的內容 (例如 aria-labelledby
屬性中參照的 ID 在多個元素中使用)。
Lighthouse 總是會針對這種情況發出警告,但系統只會針對具有重複 ID 的元素列出第一個例項,這常會造成混淆,因為有些使用者會假設這是造成問題的「所有」元素。由於 Lighthouse 只會顯示單一元素,因此會假設這是單一元素遭標記為重複的錯誤。
Lighthouse 9.0 現會列出所有共用該 ID 的元素:
這項「相關節點」功能是由 axe-core
提供,因此可能也會出現在其他無障礙功能稽核中。
詳情請參閱「收集使用者報告的問題」和「實作提取要求」。
奔跑的燈塔
Lighthouse 在 Chrome 開發人員工具、npm (節點模組和 CLI) 中皆可使用,以及以瀏覽器擴充功能的形式 (Chrome 和 Firefox) 提供。支援多項 Google 服務,包括 web.dev/measure 和 PageSpeed Insights。
如要試用 Lighthouse 節點 CLI,請使用下列指令:
npm install -g lighthouse
lighthouse https://www.example.com --view
與 Lighthouse 團隊聯絡
如要討論新功能、9.0 版本中的變更,或是 Lighthouse 的其他相關事項:
- 透過 Lighthouse GitHub Issue Tracker 回報問題或提交意見回饋。
- 前往 Lighthouse GitHub 論壇提問。
- 透過 Twitter 與 Lighthouse 團隊聯絡 @____lighthouse。