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)。支援 web.dev/measure 和 PageSpeed Insights 等多項 Google 服務。
如要試用 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 團隊聯絡。