Lighthouse 更新,2017 年 1 月更新

Lighthouse 是一項開放原始碼的自動化工具,可用來改善網頁應用程式的品質。您可以將其做為 Chrome 擴充功能安裝,也可以做為 Node 指令列工具執行。當您提供 Lighthouse 網址時,系統會對該網頁執行大量測試,然後產生報告,說明網頁的表現,並指出需要改善的部分。

Lighthouse 標誌
Lighthouse 標誌

今天,我們很高興宣布 Lighthouse 1.5 版,這是一項重大版本,包含超過 128 個 PR。Lighthouse 1.5 包含多項重大新功能、稽核作業和一般錯誤修正。您可以從 npm (npm i -g lighthouse) 安裝,也可以從 Chrome 線上應用程式商店下載擴充功能

新稽核

CSS 使用情況審查會回報網頁中未使用的樣式規則數量,以及移除這些規則可節省的成本/時間:

CSS 使用稽核

最佳化圖片稽核會回報未經最佳化的圖片,以及最佳化圖片可節省的成本/時間:

圖片最佳化稽核

回應式圖片稽核會回報過大的圖片,以及針對特定裝置正確調整圖片大小所能節省的潛在成本/時間:

圖片最佳化稽核

如果網頁使用已淘汰的 API 或含有干預功能,淘汰和干預稽核會列出 Chrome 的控制台警告:

淘汰和介入稽核

回報變更

如您所見,我們著重於讓報表的視覺效果更清晰,因此新增了表格資料、隱藏多餘的說明文字,並加入新功能,方便您瀏覽資料。

模擬設定

很容易忘記特定 Lighthouse 執行作業使用的節流和模擬設定。Lighthouse 報表現在會納入用於建立報表的執行階段模擬設定,這是長期功能要求

模擬設定

更實用的追蹤記錄資料

Lighthouse 指標 (例如「第一個有意義的繪製」和「互動時間」等) 會模擬為使用者時間測量資料,並插入使用 --save-assets 標記儲存的追蹤記錄資料。

如果您使用 --save-assets 標記,現在可以將追蹤記錄放入開發人員工具,或在 開發人員工具時間軸檢視器中開啟。您將能夠在頁面載入的完整追蹤記錄中,查看相關的重要指標。

追蹤記錄資料

Lighthouse Viewer

在 HTML 報表中,您會看到一個新的按鈕,其中提供各種匯出報表格式的選項。其中一個選項是「在檢視器中開啟」。按一下這個按鈕,系統就會將報表傳送至線上「檢視器」,您可以在該處進一步與 GitHub 使用者分享報表。

「在檢視器中開啟」按鈕
在檢視器中開啟結果

在幕後,檢視者會透過 OAuth 取得您的權限,以便建立 GitHub 祕密 gist,並將報表儲存在該 gist 中。由於這是您的 Gist,您可以完全掌控報表的分享權限,並隨時刪除報表。您可以在 GitHub 設定中,撤銷檢視者建立 gist 的權限。

成效實驗

效能實驗專案的第一個版本已在 1.5.0 中推出。這可讓您嘗試改善網頁載入效能,並在開發期間以互動方式測試在重要路徑中封鎖或延遲素材資源的效果。

當 Lighthouse 搭配 --interactive 標記執行時,系統會產生特殊報表,讓您以互動方式選取耗費高的網頁資源。實驗伺服器會在該頁面上重新執行 Lighthouse,並封鎖這些資源。

切換執行階段設定

進一步瞭解 Lighthouse 中的成效實驗。

新增說明文件

最後,我們已將 developers.google.com/web/tools/lighthouse/ 的說明文件改為新版格式,並新增稽核參考資料。

新增說明文件

以上就是目前的說明!

如需 Lighthouse 最新版本的所有詳細資訊,請參閱 GitHub 上的完整版本資訊。如往常一樣,歡迎與我們聯絡回報錯誤、提出功能要求,或集思廣益,討論想看到的下一個功能