自 Google I/O 以來,我們一直努力讓 Lighthouse 成為建構優質漸進式網頁應用程式的絕佳夥伴:
我們很高興在此宣布 Lighthouse 1.3 版正式推出。Lighthouse 1.3 包含許多重大新功能、稽核作業和一般錯誤修正。您可以從 npm (npm i -g lighthouse
) 安裝,或從 Chrome 線上應用程式商店下載擴充功能。
那麼有什麼新功能呢?
全新外觀和風格
如果您使用的是舊版 Lighthouse,可能會注意到新版的標誌!HTML 報表和 Chrome 擴充功能也已完成全面更新,讓評分更清晰,並讓稽核結果更一致。我們也新增了實用偵錯資訊,可在測試失敗時提供協助,並提供指標,指出建議的因應措施。

新的最佳做法
目前 Lighthouse 著重於效能指標和 PWA 品質。不過,這項專案的總體目標是為所有網頁開發作業提供指南。其中包含一般最佳做法的指導方針、效能和無障礙功能提示,以及製作優質應用程式的端到端說明。
「Do Better Web」是 Lighthouse 專案的一項努力,旨在協助開發人員改善網站。換句話說,協助他們將網頁應用程式改為新式架構並進行最佳化。網頁開發人員經常會使用過時的做法、反模式,或是遇到已知的效能陷阱,卻渾然不覺。舉例來說,眾所皆知,以 JS 為基礎的動畫應使用 requestAnimationFrame()
,而非 setInterval()
。不過,如果開發人員不知道較新的 API,他們的網頁應用程式就會遭受不必要的影響。
Lighthouse 1.3 提供 20 多項最佳做法建議,從 CSS 和 JavaScript 功能的現代化提示,到效能建議,例如:「減少轉譯阻斷素材資源的數量」、「使用被動事件監聽器來改善捲動效能」。

我們會持續新增更多最佳化建議。如果您有最佳做法建議,或想協助我們撰寫稽核報告,請在 GitHub 上回報問題。
報告檢視器
最後,我們很高興宣布 Lighthouse 結果的新網頁檢視器。前往 googlechrome.github.io/lighthouse/viewer,將 Lighthouse 執行作業的輸出結果拖曳並放置 (或點選上傳檔案),即可查看結果。「Insta」Lighthouse HTML 報表。

Lighthouse Viewer 也能讓您與他人分享報表。點選分享圖示即可登入 GitHub。我們會將報表儲存為帳戶中的秘密 gist,方便您日後刪除或更新共用報表。使用 GitHub 儲存資料,還可免費獲得版本控制功能!

Lighthouse Viewer 可在網址中加入 ?gist=GIST_ID
,重新載入現有報表:

如需 Lighthouse 最新版本的所有詳細資訊,請參閱 GitHub 上的完整版本資訊。如往常一樣,歡迎與我們聯絡,回報錯誤、提出功能要求,或是針對你希望下次看到的內容提出想法。