Lighthouse 10 新功能

Brendan Kenny
Brendan Kenny

Lighthouse 是網站稽核工具,可協助開發人員找出改善網站使用者體驗的機會,並提供相關診斷資訊。

Lighthouse 10 現已可透過 npm 指令列Chrome Canary 立即使用。這項功能會在 Chrome 112 的 Chrome 穩定版和 PageSpeed Insights 中推出,時間為未來幾週。

評分變更

在 Lighthouse 10 中,我們將移除久負盛名的互動準備時間 (TTI) 指標,結束 Lighthouse 8 開始淘汰的程序。TTI 的 10% 評分權重將轉移至累計版面配置位移 (CLS),後者現在將占整體成效分數的 25%。

TTI 會標示某個時間點,但其定義方式會對異常網路要求和長時間工作過於敏感。與有效網路要求數量相比,最大內容繪製 (LCP)速度指數 通常是更能判斷網頁內容是否已載入的最佳演算法。總封鎖時間 (TBT) 則可更穩健地處理長時間工作和主執行緒可用性,雖然不是直接的 Proxy,但在實地測試中,與 網站體驗核心指標 的相關性較高。

CLS 的加重權重與 TTI 的移除無關,但更能反映其作為 Core Web Vitals 的重要性,並可針對仍會造成不必要版面配置位移的網站,提高重點。

我們預期這項功能可改善大部分網頁的效能分數,因為大部分網頁的 CLS 分數通常比 TTI 分數高。在最新的 HTTP 存檔執行作業中,我們分析了 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,並在失敗時列出原因。

範例結果:列出因網頁中開放的 IndexDB 連線和卸載處理常式而發生的失敗

詳情請參閱 bfcache 審核說明文件

防止貼上內容的輸入內容

舊版最佳做法稽核項目「允許使用者貼到密碼欄位」已擴大,現在會檢查是否可將內容貼到任何 (非唯讀) 輸入欄位。對於大多數網站而言,禁止貼上內容會導致使用者體驗變差,並阻礙合法安全性和無障礙工作流程。

新的稽核項目現在是「允許使用者在輸入欄位中貼上內容」(paste-preventing-inputs)

節點使用者

如果您將 Lighthouse 用作 Node 程式庫,則可能需要考量本版本中幾項程式設計重大變更。詳情請參閱 10.0 版變更記錄

Lighthouse 10 也提供完整的 TypeScript 型別宣告!從 lighthouse 匯入的所有內容現在都應已輸入,如果您要編寫 Lighthouse 使用者流程的指令碼,這項功能應該會特別實用。

以 Node 指令碼匯入 Lighthouse 做為函式,說明傳入函式的選項物件現在會由 TypeScript 進行型別檢查

請試用這些類型,如果在使用過程中遇到任何問題,請與我們聯絡。

執行 Lighthouse

Lighthouse 可在 Chrome 開發人員工具npm (做為 Node 模組和 CLI 工具) 中使用,也可以在 ChromeFirefox 中以瀏覽器擴充功能的形式使用。也支援多項 Google 服務,包括 PageSpeed Insights

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

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

與 Lighthouse 團隊聯絡

如要討論 Lighthouse 10 版本的新功能、異動,或其他與 Lighthouse 相關的內容,請前往: