Lighthouse 演進:持續整合、新的效能分數公式等等

取得 2019 年 Chrome 開發人員高峰會的最新 Lighthouse 更新資訊和洞察資訊。

Elizabeth Sweeny
Elizabeth Sweeny

在 Chrome 開發人員高峰會 (CDS) 的「速度工具演進」講座中,Paul Ireland 和我介紹 Google 的最新產品和功能,協助您為所有使用者建構及維持極為快速的使用體驗。故事的核心是 Lighthouse 效能監控工具系列新入。

Lighthouse 團隊已推出新的持續整合產品 Lighthouse CI Alpha 版本,讓您可以在要推送至實際工作環境之前,在每個修訂版本上執行 Lighthouse。Lighthouse CI 會多次執行 Lighthouse、宣告靜態稽核或指標門檻,然後將 Lighthouse 報表上傳至伺服器,以呈現視覺差異和基本類別分數記錄。現有的 budgets.json 設定會與全新表達式語法順暢搭配運作,用於斷言「任何」Lighthouse 稽核或類別結果。

Lighthouse CI 報告。

Lighthouse CI 支援立即可用的 Travis CICircle CIGitHub Actions,以及任何 Ubuntu 或容器式持續整合服務 (某些設定)。您可以在內部部署環境中安裝 Lighthouse CI 伺服器,或使用Docker 映像檔進行即時設定。隨附的免費臨時 Lighthouse 報表儲存空間可做為立即使用的替代方案。

即將推出:成效分數更新

Lighthouse 效能分數第 6 版即將推出異動!在 2019 年 11 月 (截至 2019 年 11 月),Lighthouse 有五項指標加權和組合,可形成 0-100 的效能分數:First Contentful PaintSpeed IndexFirst Meaningful PaintTime to Interactive第一個 CPU 閒置

比較第 5 和第 6 版 Lighthouse 效能分數公式。

詳情請參閱「Lighthouse 效能評分」。

在 Lighthouse 第 6 版中,「最大內容繪製 (LCP)」和「總封鎖時間 (TBT)」將取代首次 CPU 閒置 (FCI) 和首次有效繪製 (FMP) 的新指標。這五個指標的權重會經過調整,以在負載和互動測量的不同階段取得更好的平衡。

Lighthouse 團隊仍在努力確保所有分數曲線經過微調,且指標已成熟且經過徹底測試。目標是在 2020 年 1 月提供 Lighthouse 第 6 版效能分數

Lighthouse 堆疊包

Lighthouse 可自動偵測網站是否使用架構或內容管理系統 (CMS),並在報告中納入堆疊專屬的建議。除了 Lighthouse 報告核心稽核之外,您也可以從 Stack Packs 新增由社群專家 (就像您一樣!) 精選的自訂建議。

Lighthouse 報告建議:在 React 應用程式中延遲載入畫面外圖片。

目前也有適用於 Angular、WordPress、Magento、React 和 AMP 的 Stack Pack。如要建立自己的 Stack Pack,請前往 GitHub 存放區與 Lighthouse 團隊聯絡

即將推出:Lighthouse 外掛程式 Chrome 擴充功能

Lighthouse 外掛程式圖示。

Lighthouse 外掛程式是另一個利用 Lighthouse 擴充能力的另一種方法。Lighthouse 核心稽核功能目前未涵蓋許多品質檢查,可能是因為這些功能僅適用於部分開發人員,或是團隊尚未擁有建立稽核所需的頻寬。

Lighthouse 外掛程式可讓社群專家實作一組新的檢查,Lighthouse 可執行這些檢查,並將其新增為報表類別。外掛程式目前只能在 Lighthouse CLI 運作,但目標也是為了在開發人員工具的「Audits」面板中啟用。

Chrome 開發人員工具「稽核」面板,提供用於執行 Google 發布商廣告和使用者體驗的 Lighthouse 外掛程式選項。
開發人員工具稽核面板中的社群外掛程式 (Beta 版)

當使用者從 Chrome 線上應用程式商店安裝 Lighthouse 外掛程式擴充功能時,開發人員工具會找出已安裝的外掛程式,並在「Audits」面板中提供選項。Lighthouse 團隊會在未來幾個月內建構對外掛程式方法的支援,因此請持續關注。在此期間,您可以立即建立外掛程式做為節點模組,並透過 CLI 供所有 Lighthouse 使用者存取!

瞭解詳情

如要進一步瞭解 Lighthouse 和 CDS 2019 的其他效能工具更新,請觀看 Speed Tool 進化的演講影片:

您的意見十分寶貴,可以讓 Lighthouse 更臻完善,因此您可以試試 Lighthouse CI、編寫 StackPack,或是建立 Lighthouse 外掛程式,並告訴我們您的想法。