Lighthouse 10 新功能

Brendan Kenny
Brendan Kenny

Lighthouse 是一項網站稽核工具,可協助開發人員把握機會與診斷,改善網站的使用者體驗。

您可以透過指令列透過 npmChrome Canary 使用 Lighthouse 10。預計在未來幾週內,在 Chrome 112 和 PageSpeed Insights 中推出穩定版。

評分變更

我們即將在 Lighthouse 10 10 中移除具公信力的可互動時間 (TTI) 指標,結束了 Lighthouse 8 開始的淘汰程序。TTI 的 10% 分數經過調整的累計版面配置位移 (CLS),現在佔整體效能分數的 25%。

TTI 標示某個時間點,但其定義方式會讓離群的網路要求和長時間工作過度敏感。相較於作用中的網路要求數,最大內容繪製 (LCP)速度指數通常比較適合網頁內容的載入情況。總封鎖時間 (TBT) 代表可更穩健地處理長時間工作和主執行緒的可用性;雖然非直接 Proxy,但相較於實際運作的 Core Web Vitals,一般而言較為合適。

CLS 的權重不僅僅是當今 TTI 而一併移除,也更能反映其在 Core Web Vital 的重要性。在理想情況下,CLS 更能聚焦於會導致不必要的版面配置位移的網站。

我們希望這種做法能改善大多數網頁成效分數,因為大多數網頁的 CLS 分數往往比 TTI 高。根據對最近一次 HTTP Archive 執行作業進行 1,300 萬次的分析而言,這些網頁中有 90% 的 Lighthouse 效能分數有所提升,其中 50% 的網頁效能提升超過 5 分。

Lighthouse 分數表,按照總分指標 (FCP、SI、LCP、TBT 和 CLS) 細分

如出於某些原因,您仍然需要 Lighthouse TTI 值 (例如 CI 斷言),仍可在 Lighthouse JSON 輸出內容中保持不變,但分數權重為 0 且隱藏在 HTML 報表中。任何使用指令碼建立的 JSON 值存取應可在不變更的情況下繼續運作。

全新稽核

Lighthouse 10 執行了全新的效能稽核作業,並有重大變更。

往返快取

如要改善實際使用者的網頁效能,往返快取 (bfcache) 是最強大的工具之一。除了一般的瀏覽器快取之外,從 bfcache 載入的網頁幾乎會立即還原網頁版面配置和執行狀態,大體可以略過所有網頁載入活動,並在使用者來回瀏覽紀錄時立即顯示您的網頁。

然而,網頁可透過幾種方式阻止瀏覽器透過 bfcache 還原網頁。這項新的 Lighthouse 稽核實際上會離開測試頁面,然後再次確認該頁面是否可使用 Bfcache,並列出失敗的原因。

bfcache 稽核結果的示例,當中列出了由於 IndexDB 連線開放以及卸載處理常式導致的失敗

詳情請參閱 bfcache 稽核文件

避免貼上內容

舊版的最佳做法稽核「允許使用者貼入密碼欄位」,現在可檢查貼入任何 (非唯讀) 輸入欄位是否正常運作。對大多數網站而言,避免貼上內容會帶來淨負面的使用者體驗,並阻礙了正當安全性和無障礙工作流程。

新版稽核報告現已改為「允許使用者將內容貼到輸入欄位」(paste-preventing-inputs)

節點使用者

如果您使用 Lighthouse 做為節點程式庫,這個版本可能需要考量一些程式輔助的破壞性變更。詳情請參閱 10.0 變更記錄

此外,Lighthouse 10 還出貨了完整的 TypeScript 類型宣告!從 lighthouse 匯入的任何內容都應現在輸入,而如果您在編寫 Lighthouse 使用者流程指令碼時,這一點特別有幫助。

匯入 Lighthouse 做為函式的節點指令碼,表明傳遞至函式的選項物件現在由 TypeScript 檢查類型

請試用類型,如果使用其中有任何問題,請通知我們。

運作中的燈塔

Lighthouse 可透過 Chrome 開發人員工具npm (節點模組和 CLI 工具) 和瀏覽器擴充功能 (ChromeFirefox) 提供使用。Google Cloud 也支援多項 Google 服務,包括 PageSpeed Insights

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

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

與 Lighthouse 團隊聯絡

為討論新功能、Lighthouse 10 版本變更,或其他與 Lighthouse 相關的其他事項: