運用 Lighthouse 打造更優質的網路

自 Google I/O 大會起,我們致力於讓 Lighthouse 成為建構優質漸進式網頁應用程式的絕佳夥伴:

今天,我們很高興宣布推出 Lighthouse 1.3。Lighthouse 1.3 內含多項重大新功能、稽核和一般錯誤修正。您可以透過 npm (npm i -g lighthouse) 安裝 npm,或是從 Chrome 線上應用程式商店下載擴充功能

有什麼新功能?

全新外觀和風格

如果您用過舊版 Lighthouse,可能會注意到標誌是新版!HTML 報表和 Chrome 擴充功能也經過全面重新整理,以更簡潔的方式呈現評分,且各項稽核結果的一致性也更加一致。我們還新增了一些實用的偵錯資訊,說明您在測試失敗時會如何解決,並附上建議解決方法的指標。

Lighthouse 報告

新的最佳做法

截至目前,Lighthouse 重視成效指標和 PWA 品質。 不過,這項專案的首要目標是為所有網路開發作業提供指南。包括一般最佳做法、效能和無障礙提示的指南,以及建構優質應用程式的端對端說明。

「行動改善網路」(Do Better Web) 是 Lighthouse 專案所推動的計畫,可協助開發人員提升網路服務品質。換句話說,請協助他們翻新網頁應用程式,並進行最佳化處理。網頁程式開發人員通常會使用過時的做法、反模式,或是在未實際處理的情況下遇到已知的效能陷阱。舉例來說,普遍知道 JS 動畫應使用 requestAnimationFrame() 完成,而非 setInterval()。不過,如果開發人員不知道較新的 API,他們的網頁應用程式無端發生了。

Lighthouse 1.3 提供超過 20 種新的最佳做法建議,範圍涵蓋翻新 CSS 和 JavaScript 功能的訣竅,以及效能建議,例如:「減少禁止轉譯的資產數量」、「使用被動事件監聽器改善捲動效能」。

改善網站的最佳做法。

我們日後會持續新增更多最佳化建議。如果您有最佳做法建議,或想協助我們編寫稽核作業,請在 GitHub 上提出問題

報告檢視器

最後,我們很高興宣布推出新的 Web 檢視器,提供 Lighthouse 結果。造訪 googlechrome.github.io/lighthouse/viewer,拖曳 Lighthouse 執行作業 (或按一下即可上傳檔案) 的輸出內容,然後執行指令。「Insta」 Lighthouse HTML 報表

檢舉檢視者。
報表檢視者

Lighthouse Viewer 還能與其他人分享報表。按一下分享圖示即可登入 GitHub。我們會將報告儲存在帳戶中,方便您日後輕鬆刪除或更新。有了 GitHub 做為資料儲存空間,您還能免費取得版本管控!

檢視者架構。
檢視者架構

只要在網址中加入 ?gist=GIST_ID,Lighthouse 檢視器即可重新載入現有報表:

檢視者架構 2.
檢視者架構 2

如需 Lighthouse 最新完整資訊,請前往 GitHub 參閱 完整版本資訊。一如往常,請與我們聯絡回報錯誤、提出功能要求,或腦力激盪出想法,說明您希望瞭解的後續做法。