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 稽核作業都必須有不重複的「id」,且兩個元素都具有相同的 `id`

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

詳情請參閱收集使用者報表的問題導入提取要求

運作中的燈塔

Lighthouse 適用於 Chrome 開發人員工具、npm (節點模組和 CLI) 和瀏覽器擴充功能 (ChromeFirefox)。支援 web.dev/measurePageSpeed Insights 等多項 Google 服務。

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

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

與 Lighthouse 團隊聯絡

為討論新功能、9.0 版的變更內容,或任何與 Lighthouse 相關的其他事項: