Lighthouse 更新,2017 年 1 月更新

Brendan Kenny
Brendan Kenny

Lighthouse 是一項開放原始碼這項自動化工具,可改善網頁應用程式的品質。您可以將這個應用程式安裝為 Chrome 擴充功能,或將其做為節點指令列工具執行。提供網址給 Lighthouse 時,系統會針對網頁執行多種測試,然後產生報表來說明網頁效能,並指出有待改進的部分。

Lighthouse 標誌
Lighthouse 標誌

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

新稽核

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

CSS 用量稽核

最佳化映像檔稽核功能會回報未經最佳化的映像檔,以及最佳化映像檔可省下的成本/時間:

最佳化圖片 AudiT

回應式圖片稽核會回報過大的圖片,並能為指定裝置正確調整圖片尺寸,因此可能節省費用/時間:

最佳化圖片 AudiT

如果您的網頁使用已淘汰的 API 或需要介入措施的功能,「淘汰與幹預稽核」會列出來自 Chrome 的控制台警告:

淘汰與介入稽核

回報變更

如您所見,我們主要著重於新增表格資料、隱藏多餘的說明文字,以及加入新功能來更輕鬆地瀏覽資料,讓報表更井然有序。

模擬設定

我們很容易忘記特定 Lighthouse 執行作業使用的節流和模擬設定。Lighthouse 報表現在包含建立報表時使用的執行階段模擬設定,以及長時間功能要求

模擬設定

更實用的追蹤記錄資料

像是「FirstEffective paint」、「Time to Interactive」等 Lighthouse 指標會模擬出來,並呈現出「使用者載入時間」指標,並插入透過 --save-assets 旗標儲存的追蹤記錄資料。

如果您使用 --save-assets 標記,現在可以將追蹤記錄拖放至開發人員工具,或是在開發人員工具時間軸檢視器中開啟。透過網頁載入的完整追蹤記錄,您將能瞭解重要指標。

追蹤資料

Lighthouse 檢視者

在 HTML 報表中,您會注意到一個新按鈕,當中包含以不同格式匯出報表的選項。其中一個選項是「在檢視器中開啟」。按一下這個按鈕會將報表傳送到線上檢視者,方便您進一步與 GitHub 使用者分享報表。

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

「檢視者」會在背景透過 OAuth 取得您的權限,以建立 GitHub Secret gist 並儲存報告,由於報表的共用身分是您的 Gist,您擁有完整的報表分享控制權,也可以隨時刪除報表。您可以在 GitHub 設定底下撤銷檢視者權限建立 Gist 的權限。

成效實驗

Performance Experiment 專案第一個版本在 1.5.0 版中推出。這可讓您測試網頁載入效能,以互動方式測試在開發期間的關鍵路徑中封鎖或延遲資產的效果。

當 Lighthouse 搭配 --interactive 旗標執行時,會產生一份特殊報表,允許互動式選取昂貴的網頁資源。然後,實驗伺服器會在該網頁上重新執行 Lighthouse,其中資源遭到封鎖。

切換執行階段設定

進一步瞭解 Lighthouse 效能實驗。

新增說明文件

最後,我們更新了 developers.google.com/web/tools/lighthouse/ 中的說明文件,並新增了稽核參考資料。

新增說明文件

說明到此結束!

如需 Lighthouse 最新功能的所有詳細資料,請參閱 GitHub 上的完整版本資訊。一如往常,請隨時與我們聯絡回報錯誤、提出功能要求,或腦力激盪出想法