Lighthouse 8.4 的新功能's

Lighthouse 是自動化網站稽核工具，可協助開發人員掌握機會和診斷資訊，進而改善自家網站的使用者體驗。可在 Chrome 開發人員工具、npm (以 Node 模組和 CLI 形式) 或瀏覽器擴充功能 (Chrome 和 Firefox) 中存取。支援多項 Google 服務，包括 web.dev/measure 和 PageSpeed Insights。

Lighthouse 8.4 可立即透過指令列和 Chrome Canary 使用。這個版本會在 Chrome 95 版中取得，並在一週內前往 PageSpeed Insights 網站下載。

如要試用 Lighthouse 節點 CLI，請使用下列指令：

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

完整的異動清單請參閱「8.4 變更記錄」。

新稽核

不要延遲載入最大內容繪製圖片

延遲載入圖片可以有效延後畫面外圖片，避免干擾載入不需捲動位置的內容。

不過，如果網頁的 LCP 元素是圖片，延遲載入會對 LCP 造成重大負面影響。瀏覽器可能會將圖片排入佇列，並優先擷取其他資源，而不是優先處理圖片，以便立即下載。近期有一項關於 WordPress 延遲載入的研究 發現，如果初始可視區域中的圖片並未延遲載入，某些網站的 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。