Lighthouse 是一項網站稽核工具,可協助開發人員把握機會與診斷,改善網站的使用者體驗。
您可以透過指令列透過 npm 和 Chrome 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 TTI 值 (例如 CI 斷言),仍可在 Lighthouse JSON 輸出內容中保持不變,但分數權重為 0 且隱藏在 HTML 報表中。任何使用指令碼建立的 JSON 值存取應可在不變更的情況下繼續運作。
全新稽核
Lighthouse 10 執行了全新的效能稽核作業,並有重大變更。
往返快取
如要改善實際使用者的網頁效能,往返快取 (bfcache) 是最強大的工具之一。除了一般的瀏覽器快取之外,從 bfcache 載入的網頁幾乎會立即還原網頁版面配置和執行狀態,大體可以略過所有網頁載入活動,並在使用者來回瀏覽紀錄時立即顯示您的網頁。
然而,網頁可透過幾種方式阻止瀏覽器透過 bfcache 還原網頁。這項新的 Lighthouse 稽核實際上會離開測試頁面,然後再次確認該頁面是否可使用 Bfcache,並列出失敗的原因。
詳情請參閱 bfcache 稽核文件。
避免貼上內容
舊版的最佳做法稽核「允許使用者貼入密碼欄位」,現在可檢查貼入任何 (非唯讀) 輸入欄位是否正常運作。對大多數網站而言,避免貼上內容會帶來淨負面的使用者體驗,並阻礙了正當安全性和無障礙工作流程。
新版稽核報告現已改為「允許使用者將內容貼到輸入欄位」(paste-preventing-inputs
)。
節點使用者
如果您使用 Lighthouse 做為節點程式庫,這個版本可能需要考量一些程式輔助的破壞性變更。詳情請參閱 10.0 變更記錄。
此外,Lighthouse 10 還出貨了完整的 TypeScript 類型宣告!從 lighthouse
匯入的任何內容都應現在輸入,而如果您在編寫 Lighthouse 使用者流程指令碼時,這一點特別有幫助。
請試用類型,如果使用其中有任何問題,請通知我們。
運作中的燈塔
Lighthouse 可透過 Chrome 開發人員工具、npm (節點模組和 CLI 工具) 和瀏覽器擴充功能 (Chrome 和 Firefox) 提供使用。Google Cloud 也支援多項 Google 服務,包括 PageSpeed Insights。
如要試用 Lighthouse 節點 CLI,請使用下列指令:
npm install -g lighthouse
lighthouse https://www.example.com --view
與 Lighthouse 團隊聯絡
為討論新功能、Lighthouse 10 版本變更,或其他與 Lighthouse 相關的其他事項:
- 透過 Lighthouse GitHub Issue Tracker 回報問題或提交意見回饋。
- 前往 Lighthouse GitHub 論壇提問。
- 透過 Twitter @____lighthouse 與 Lighthouse 團隊聯絡。