Lighthouse 是一項自動化網站稽核工具,可協助開發人員把握機會與診斷,改善網站的使用者體驗。您可以在 Chrome 開發人員工具、npm (Node 模組和 CLI) 或瀏覽器擴充功能 (Chrome 和 Firefox) 中使用該功能。支援 web.dev/measure 和 PageSpeed Insights 等多項 Google 服務。
Lighthouse 8.4 可立即透過指令列以及 Chrome Canary 下載。 即可在 Chrome 95 版中使用 Chrome 穩定版,一週內透過 PageSpeed Insights 存取。
如要試用 Lighthouse 節點 CLI,請使用下列指令:
npm install -g lighthouse
lighthouse https://www.example.com --view
如需完整的異動清單,請參閱 8.4 變更記錄。
全新稽核
請勿延遲載入最大內容繪製圖片
延遲載入圖片是延遲載入畫面外圖片的有效方式,可避免干擾載入不需捲動位置的內容。
不過,如果網頁的 LCP 元素是圖片,延遲載入可能會對 LCP 造成負面影響。瀏覽器可能會先將圖片排入佇列並擷取其他資源,而不是優先下載圖片,方便立即下載。一項近期針對 WordPress 延遲載入的研究發現,如果未延遲載入原始可視區域中的圖片,LCP 可提升部分網站的 LCP 提升高達 15%。
Lighthouse 現在會偵測 LCP 元素是否為延遲載入的圖片,並建議移除其中的 loading
屬性。
設定行動版可視區域,提升「首次輸入延遲時間」
多年來,viewport
稽核一直是「最佳做法」類別的一部分,但 8.4 也歡迎您針對「成效」類別提出這項建議。
許多行動瀏覽器都支援「輕觸兩下即可縮放」功能要讓使用者輕鬆放大不適合在行動裝置螢幕上瀏覽的內容,也就是沒有明確行動裝置畫面的內容<meta name="viewport">
。實際上,這表示瀏覽器必須在使用者輕觸後至少等待 300 毫秒,才能得知使用者是否會觸發第二次輕觸,以及網頁在這段時間內無法回應使用者初次輕觸的動作。這會轉換成失敗 FID 數百毫秒。
我們最近研究了 HTTP 封存的資料,其中有超過一半的網站在 Lighthouse 獲得 90 分以上,但未通過至少一個 Core Web Vitals,但尚未設定行動裝置可視區域,導致 FID 失敗。因此,如果找不到合適的可視區域,Lighthouse 效能部分現在建議新增如下所示的可視區域:
<meta name="viewport" content="width=device-width">
與 Lighthouse 團隊聯絡
為討論新功能、8.4 版的變更,或任何與 Lighthouse 相關的其他事項:
- 透過 Lighthouse GitHub 存放區回報問題或提交意見回饋。
- 透過 Twitter @____lighthouse 與 Lighthouse 團隊聯絡。