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 會更加重視。
我們希望這種做法能改善大部分網頁的效能分數,因為大多數網頁在 CLS 上的分數通常都比 TTI 高。針對最近一次執行 HTTP Archive 時,1,300 萬次載入的網頁分析結果顯示,其中 90% 的網頁效能分數提升,其中 50% 的網頁效能改善超過 5 分。
如果您基於某些原因仍需要 Lighthouse TTI 值 (例如在 CI 斷言中),還是在 Lighthouse JSON 輸出中仍維持不變,只是分數權重為 0 且隱藏在 HTML 報表中。凡是透過指令碼編寫的 JSON 值,應該都能繼續運作,不需進行變更。
新稽核
Lighthouse 10 不僅提供全新的效能稽核功能,還有重大變化,
往返快取
往返快取 (bfcache) 是最適合用來提升實際使用者網頁效能的工具之一。除了一般瀏覽器快取之外,從 bfcache 載入的網頁會以近乎即時的速度還原網頁版面配置和執行狀態,在使用者瀏覽所有記錄時,通常會略過所有網頁載入活動,並立即讓網頁呈現在使用者眼前。
不過,有幾種方式可以防止瀏覽器將網頁從 Bufcache 還原。新的 Lighthouse 稽核功能實際上會離開測試頁面,然後再返回測試頁面,測試是否可快取,並列出失敗的原因。
詳情請參閱 bfcache 稽核的說明文件。
禁止貼上輸入內容
我們擴大了舊版最佳做法稽核的「允許使用者貼到密碼欄位」中,現在可檢查貼至任何 (非唯讀) 輸入欄位是否正常運作。對大多數網站而言,防止貼上會帶來負面的使用者體驗,並預防合法的安全工作流程。
新的稽核方式現已改為「允許使用者貼到輸入欄位 (paste-preventing-inputs
)」。
節點使用者
如果您是將 Lighthouse 做為 Node 程式庫使用,可能需要考量到這個版本的幾項程式輔助破壞性變更。詳情請參閱 10.0 變更記錄。
Lighthouse 10 也寄出了完整的 TypeScript 類型宣告!現在應輸入從 lighthouse
匯入的任何項目,這對於編寫 Lighthouse 使用者流程的指令碼特別實用。
請試試這些類型,並在使用時遇到問題嗎?
奔跑的燈塔
Lighthouse 可在 Chrome 開發人員工具、npm (節點模組和 CLI 工具) 中下載,也可做為瀏覽器擴充功能 (適用於 Chrome 和 Firefox)。同時也支援多項 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。