Lighthouse 8.4 的新功能's

Brendan Kenny
Brendan Kenny
Lighthouse 是一項自動化網站稽核工具,可協助開發人員把握機會與診斷,改善網站的使用者體驗。您可以在 Chrome 開發人員工具、npm (Node 模組和 CLI) 或瀏覽器擴充功能 (ChromeFirefox) 中使用該功能。支援 web.dev/measurePageSpeed 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 稽核

Lighthouse 現在會偵測 LCP 元素是否為延遲載入的圖片,並建議移除其中的 loading 屬性。

詳情請參閱初始提案實作提取要求

設定行動版可視區域,提升「首次輸入延遲時間」

多年來,viewport 稽核一直是「最佳做法」類別的一部分,但 8.4 也歡迎您針對「成效」類別提出這項建議。

許多行動瀏覽器都支援「輕觸兩下即可縮放」功能要讓使用者輕鬆放大不適合在行動裝置螢幕上瀏覽的內容,也就是沒有明確行動裝置畫面的內容<meta name="viewport">。實際上,這表示瀏覽器必須在使用者輕觸後至少等待 300 毫秒,才能得知使用者是否會觸發第二次輕觸,以及網頁在這段時間內無法回應使用者初次輕觸的動作。這會轉換成失敗 FID 數百毫秒。

Lighthouse 報告中的行動可視區域稽核

我們最近研究了 HTTP 封存的資料,其中有超過一半的網站在 Lighthouse 獲得 90 分以上,但未通過至少一個 Core Web Vitals,但尚未設定行動裝置可視區域,導致 FID 失敗。因此,如果找不到合適的可視區域,Lighthouse 效能部分現在建議新增如下所示的可視區域:

<meta name="viewport" content="width=device-width">

詳情請參閱提案問題實作提取要求

與 Lighthouse 團隊聯絡

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