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。