What's Lighthouse 6.0 的新功能

包括全新指標、成效分數更新、新稽核等等。

Connor Clark

今天我們宣布推出 Lighthouse 6.0！

Lighthouse 是一項自動化網站稽核工具，可協助開發人員掌握商機和相關診斷，改善自家網站的使用者體驗。可在 Chrome 開發人員工具、npm (以節點模組和 CLI 形式) 或瀏覽器擴充功能 (Chrome 和 Firefox) 中取得。這項服務支援多項 Google 服務，包括 web.dev/measure 和 PageSpeed Insights。

Lighthouse 6.0 可立即在 npm 和 Chrome Canary 中使用。其他使用 Lighthouse 的 Google 服務會在月底前收到更新。並將在 Chrome 第 84 版中 (7 月中旬) 加入 Chrome 穩定版。

如要試用 Lighthouse 節點 CLI，請使用下列指令： bash npm install -g lighthouse lighthouse https://www.example.com --view

此版本的 Lighthouse 包含大量變更，列於 6.0 變更記錄中。我們將說明本文重點

• 新指標
• 成效分數更新
• 全新稽核功能
• Lighthouse CI
• 已重新命名 Chrome 開發人員工具面板
• 行動裝置模擬
• 瀏覽器擴充功能
• 預算
• 來源位置連結
• 即將
• 感謝你！

新指標

Lighthouse 6.0 在報表中推出了三項新指標。其中兩個新指標：最大內容繪製 (LCP) 和累積版面配置位移 (CLS) 是 Core Web Vitals 的研究室實作。

最大內容繪製 (LCP)

最大內容繪製 (LCP) 是評估感知載入體驗的指標。標示在網頁載入期間，主要 (或「最大」內容) 載入且使用者可以看到的時間點。LCP 是首次顯示內容繪製 (FCP) 的重要補充資源，僅會擷取載入體驗的一開始就進行。LCP 可讓開發人員瞭解使用者實際看到網頁內容的速度。LCP 分數低於 2.5 秒就會視為「良好」。

如需更多資訊，歡迎觀看 Paul Ireland 的 LCP 深入解析。

累計版面配置位移 (CLS)

累計版面配置位移 (CLS) 是測量視覺穩定性的指標。這個數據會量化頁面內容在視覺上移動的時間，CLS 分數偏低代表開發人員指出使用者並未遇到非不當內容轉移的情況；CLS 分數低於 0.10 即為「良好」。

研究室環境中的 CLS 會經過網頁載入結束計算。而在欄位中，您可以評估到最初使用者互動為止，或包括所有使用者輸入內容的 CLS。

如需更多資訊，請觀看 Annie Sullivan 製作的 CLS 深入解析影片。

總封鎖時間 (TBT)

總封鎖時間 (TBT) 會量化負載回應速度，評估主要執行緒遭封鎖時間足以阻止輸入回應的總時間長度。TBT 會測量首次顯示內容所需時間 (FCP) 和互動時間 (TTI) 之間的總時間。這是 TTI 的輔助指標，並且能將主要執行緒活動量化，導致使用者與網頁互動的功能受限。

此外，TBT 也與 First Input Delay (FID) 欄位指標密切相關，後者是 Core Web Vitals。

成效分數更新

Lighthouse 中的效能分數是由多項指標的加權混合計算而得，目的是總結網頁速度。6.0 效能分數公式會如下所示。

階段	指標名稱	指標權重
提早 (15%)	First Contentful Paint (FCP)	15%
中間值 (40%)	速度指數 (SI)	15%
	最大內容繪製 (LCP)	25%
遲交 (15%)	互動時間 (TTI)	15%
主要執行緒 (25%)	總封鎖時間 (TBT)	25%
可預測 (5%)	累計版面配置位移 (CLS)	5%

我們新增了三個新指標，並移除了三個舊指標：First Meaningful Paint、First CPU Idle 和 Max Potential FID。已修改其餘指標的權重，以加強主要執行緒互動性和版面配置可預測性。

以下為第 5 版的分數進行比較：

階段	指標名稱	重量
提早 (23%)	First Contentful Paint (FCP)	23%
中期 (34%)	速度指數 (SI)	27%
	首次有效繪製 (FMP)	7%
已完成 (46%)	互動準備時間 (TTI)	33%
	第一個 CPU 閒置 (FCI)	13%
主要執行緒	FID 最大潛力	0%

Lighthouse 第 5 和第 6 版之間評分變更的一些重點：

• TTI 的體重已從 33% 降為 15%。這主要是為了直接回應使用者對於 TTI 變數的寶貴意見，以及指標最佳化作業不一致的地方，進而改善使用者體驗。TTI 仍是網頁完全互動時的實用信號，但以 TBT 為例，可變性降低。這項評分變更過後，我們希望開發人員能夠更有效地改進使用者互動行為。
• FCP 的體重從 23% 降至 15%。只有在繪製第一個像素 (FCP) 時，才能評估無法全盤瞭解情況。再搭配評估指標，瞭解使用者何時能看到他們最關注的內容 (LCP) 更能反映載入體驗。
• Max Potential FID 已淘汰。但不會顯示在報表中，但仍可透過 JSON 格式取得。建議您以 TBT 為單位來量化互動，而非使用 mpFID。
• 「首次有效繪製」已淘汰。這項指標不是變化版本，而且無法進行標準化，因為實作僅適用於 Chrome 轉譯內部。雖然某些團隊確實認為 FMP 的時間能夠在網站上展現價值，但這項指標並不會改善。
• First CPU Idle 已淘汰，因為此版本與 TTI 不明顯。TBT 和 TTI 是現今互動性的重要指標
• CLS 的權重相對較低，但我們希望在日後推出的主要版本中會提高 CLS。

分數變化

這些異動對實際網站的分數有何影響？我們已發布分數變化的分析，會使用兩個資料集：一般網站組合和使用 Eleventy 建構的一組靜態網站。總而言之，約 20% 的網站的分數明顯較高，約 30% 則幾乎沒有任何變化，約有 50% 的網站則降到至少五分。

分數變化可細分為三個主要要素：

• 分數體重變化
• 修正基礎指標實作的錯誤
• 個人分數曲線變化

分數權重變更和採用三個新指標，大幅影響了整體分數變化。開發人員尚未進行最佳化調整，可在版本 6 效能分數中帶來顯著權重的新指標。雖然版本 5 的測試語料庫平均效能分數約為 50，但是新的「總封鎖時間」和「最大內容繪製」指標的平均分數約為 30 分。這兩個指標合計在 Lighthouse 第 6 版效能分數中佔 50%，因此很自然會發現有很大比例的網站出現下降幅度。

修正基礎指標計算錯誤可能會導致分數不同。影響範圍相對較小，但在某些情況下可能會對網站造成重大影響。整體而言，約 8% 的網站在導入指標後獲得分數提升，而約 4% 的網站因指標實作方式改變而降低分數。約有 88% 的網站未受這些修正措施影響。

個別分數曲線的變更也會影響整體分數的偏移，不過這個差異會略有微小。我們會定期確保分數曲線與 HTTPArchive 資料集中觀察到的指標一致。排除受到重大實作變更影響的網站後，個別指標的分數曲線經過微幅調整，可以改善約 3% 的網站分數，並降低約 4% 的網站分數。約有 93% 的網站未受到本次異動的影響。

計分計算機

我們發布了評分計算工具，協助您探索效能分數。計算機還可讓您比較 Lighthouse 第 5 版和 6 版的分數。使用 Lighthouse 6.0 執行稽核時，報告會提供計算機連結，並填入您的結果。

感謝 Ana Tudor 完成測量升級作業！

新稽核

未使用的 JavaScript

我們在新的稽核中運用開發人員工具的程式碼覆蓋情況：未使用的 JavaScript。

這項稽核並不是「完全」新增的狀態，而是 2017 年中旬推出的功能，但由於效能負擔，因此預設為停用，以盡可能使 Lighthouse 盡可能快速運作。收集這類涵蓋率資料目前的效率大幅提升，因此我們可以預設啟用此功能。

無障礙功能稽核

Lighthouse 使用效果出色的 axe-core 程式庫來驅動無障礙類別。Lighthouse 6.0 新增了下列稽核項目：

• aria-hidden-body
• aria-隱藏的焦點
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• heading-order
• Duplicate-id-active
• Duplicate-id-aria

可遮蓋的圖示

「遮罩圖示」是全新的圖示格式，可讓 PWA 的圖示在各種裝置上都能清楚顯示。為了讓 PWA 呈現最佳外觀，我們推出了新的稽核功能，檢查 manifest.json 是否支援這個新格式。

字元集宣告

中繼字元集元素會宣告應使用哪些字元編碼來解讀 HTML 文件。如果缺少這個元素，或是該元素在文件中延遲，瀏覽器會運用多種經驗法則，推測應使用哪一種編碼。如果瀏覽器猜錯，且找到延遲中繼字元集元素，剖析器通常會捨棄目前為止所有工作並從頭開始，進而導致使用者體驗不佳。這項新的稽核會驗證網頁是否具備有效的字元編碼，並在初期和前方定義。

Lighthouse CI

在 CDS 去年 11 月，我們宣布了 Lighthouse CI，這是一項開放原始碼 Node CLI 和伺服器，可在持續整合管道中的每個修訂版本上追蹤 Lighthouse 結果，且自 Alpha 版發布以來，我們已有長足的進展。Lighthouse CI 現在支援許多 CI 供應商，包括 Travis、Circle、GitLab 和 GitHub Actions。可部署的 docker 映像檔讓設定變得輕鬆簡單，重新設計的全面資訊主頁重新設計了 Lighthouse 中所有類別與指標的趨勢，方便您進行詳細分析。

請按照入門指南的說明，立即開始在專案中使用 Lighthouse CI。

已重新命名 Chrome 開發人員工具面板

「Audits」面板已重新命名為「Lighthouse」面板。夠了！

視您的開發人員工具視窗大小而定，面板可能位於 » 按鈕後方。您可以拖曳分頁來變更順序。

如何使用「指令選單」快速顯示面板：

1. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
2. 按下 Control+Shift+P (或在 Mac 上為 Command+Shift+P) 開啟「Command」選單。
3. 開始輸入「Lighthouse」。
4. 按下 Enter 鍵。

行動裝置模擬

Lighthouse 秉持行動優先的理念。一般的行動條件下較明顯發生效能問題，但開發人員通常不會在這些情況下進行測試。這就是 Lighthouse 的預設設定會套用行動模擬的原因。模擬內容包括：

• 模擬緩慢網路和 CPU 狀況 (透過名為 Lantern 的模擬引擎)。
• 裝置螢幕模擬 (與 Chrome 開發人員工具相同)。

Lighthouse 從一開始就選擇使用 Nexus 5X 做為參考裝置。近年來，大多數的效能工程師一直使用 Moto G4 進行測試。現在 Lighthouse 已跟進 並將參考裝置變更為 Moto G4在實務上，這項變更不太明顯 但以下是網頁可偵測的所有變更：

• 螢幕大小已從 412x660 px 變更為 360x640 px。
• 使用者代理程式字串稍有變更，之前 Nexus 5 Build/MRA58N 的裝置部分現在會是 Moto G (4)。

自 Chrome 81 起，Chrome 開發人員工具裝置模擬清單也會提供 Moto G4 應用程式。

瀏覽器擴充功能

Lighthouse 適用的 Chrome 擴充功能是在本機執行 Lighthouse 最簡便的方式。不過，支援程序相當複雜。 我們認為，由於 Chrome 開發人員工具的 Lighthouse 面板效能較佳 (此報表會與其他面板整合)，可以簡化 Chrome 擴充功能以降低工程負擔。

擴充功能現在會使用 PageSpeed Insights API，而不在本機執行 Lighthouse。我們體認到這一點，不足以取代部分使用者。兩者的主要差異如下：

• PageSpeed Insights 是透過遠端伺服器執行，而非本機 Chrome 執行個體，因此無法稽核非公開網站。如果您需要稽核非公開網站，請使用開發人員工具的 Lighthouse 面板或 Node CLI。
• PageSpeed Insights 不保證使用最新的 Lighthouse 版本。如要使用最新版本，請使用 Node CLI。瀏覽器擴充功能會在發布後約 1-2 週取得更新。
• PageSpeed Insights 是 Google API，使用此 API 就構成接受《Google API 服務條款》。如果您不想或無法接受服務條款，請使用開發人員工具的 Lighthouse 面板或 Node CLI。

好消息是，簡化產品故事可讓我們專注於其他工程問題。因此，我們發布了 Lighthouse Firefox 擴充功能！

預算

Lighthouse 5.0 推出了「效能預算」，支援針對網頁可提供的每種資源類型 (例如指令碼、圖片或 CSS) 的數量新增門檻。

Lighthouse 6.0 新增了預算指標支援，因此您現在可以針對特定指標 (例如 FCP) 設定閾值。目前預算僅適用於 Node CLI 及 Lighthouse CI。

來源位置連結

Lighthouse 找到的網頁相關問題可追溯至某一行原始碼，報表則會明確指出相關的檔案和行。為了讓開發人員工具中輕鬆探索，按一下報表中指定的位置，即可在「Sources」面板中開啟相關檔案。

開發人員工具會顯示造成問題的確切程式碼行。

地平線

Lighthouse 已開始收集來源地圖來提供新功能，例如：

• 在 JavaScript 套件中偵測重複的模組。
• 在傳送至新型瀏覽器的程式碼中，偵測大量 polyfill 或轉換。
• 擴充未使用的 JavaScript 稽核，提供模組層級的精細程度。
• 樹狀圖視覺化功能會醒目顯示需要處理的模組。
• 針對含有「來源位置」的報表項目顯示原始原始碼。

使用來源對應進行未使用的 JavaScript 稽核，顯示特定封裝模組中未使用的程式碼。

日後的 Lighthouse 版本將預設啟用這些功能。目前，您可以使用下列 CLI 標記查看 Lighthouse 的實驗稽核功能：

lighthouse https://web.dev --view --preset experimental

感謝！

感謝您使用 Lighthouse 並提供意見回饋。您的意見回饋有助於我們改善 Lighthouse，希望 Lighthouse 6.0 能夠更輕鬆地改善網站效能。

接下來該怎麼做？

• 開啟 Chrome Canary 並開啟 Lighthouse 面板。
• 使用節點 CLI：npm install -g lighthouse && lighthouse https://yoursite.com --view。
• 讓 Lighthouse CI 隨著專案執行。
• 參閱 Lighthouse 稽核說明文件。
• 祝您上網愉快！

我們熱愛網路，也很喜歡與開發人員社群合作，共同打造能協助改善網路環境的工具。Lighthouse 是一項開放原始碼專案，而我們之所以能做到這點，感謝所有貢獻者協助處理各種問題，包括修正錯字、文件重構及全新的稽核。有興趣貢獻一己之力嗎？ 由 Lighthouse GitHub 存放區執行。