What's Lighthouse 6.0 的新功能

新指標、成效評分更新、新稽核作業等等。

Connor Clark
Connor Clark
X GitHub

今天我們要發布 Lighthouse 6.0！

Lighthouse 是一項自動化網站稽核工具，可協助開發人員找出改善網站使用者體驗的機會，並提供相關診斷資訊。可在 Chrome 開發人員工具、npm (做為 Node 模組和 CLI) 或瀏覽器擴充功能 (在 Chrome 和 Firefox 中) 中使用。許多 Google 服務都採用這項技術，包括 PageSpeed Insights。

Lighthouse 6.0 現已在 npm 和 Chrome Canary 中推出。其他採用 Lighthouse 的 Google 服務也會在本月底前收到更新。這項功能將於 Chrome 84 穩定版 (7 月中旬) 推出。

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

這個版本的 Lighthouse 包含大量變更，請參閱 6.0 版變更記錄。本文將介紹重點。

新指標

Lighthouse 6.0 指標。

Lighthouse 6.0 在報表中加入了三個新指標。其中兩項新指標 (最大內容繪製時間 (LCP) 和累積版面配置位移 (CLS)) 是 Core Web Vitals 的實驗室導入項目。

最大內容繪製 (LCP)

最大內容繪製 (LCP) 是用來評估使用者感知的載入體驗。在網頁載入期間，標示主要 (或「最大」) 內容已載入且可供使用者查看的時間點。LCP 是首次顯示內容所需時間 (FCP) 的重要補充指標，後者只會擷取載入體驗的開頭。LCP 可向開發人員提供信號，說明使用者實際上能多快看到網頁內容。LCP 分數低於 2.5 秒視為「良好」。

如需更多資訊，請觀看 Paul Irish 的這部 LCP 深入分析影片。

累計版面配置位移 (CLS)

累計版面配置位移 (CLS) 是視覺穩定性的評估指標。它會量化網頁內容在視覺上移動的程度。CLS 分數低，表示開發人員的使用者不會遇到不當的內容轉換；如果 CLS 分數低於 0.10，則視為「良好」。

研究室環境中的 CLS 會在網頁載入結束時進行評估。不過，在實地測試中，您可以測量 CLS 至首次使用者互動，或納入所有使用者輸入內容。

如需更多資訊，請觀看 Annie Sullivan 的這部深入探討 CLS 的影片。

總封鎖時間 (TBT)

總封鎖時間 (TBT) 會量化載入回應速度，測量主執行緒封鎖的總時間，以防止輸入內容無法回應。TBT 會測量首次顯示內容所需時間 (FCP) 和互動準備時間 (TTI) 之間的總時長。這項指標是 TTI 的伴隨指標，可更精確地量化阻止使用者與網頁互動的主執行緒活動。

此外，TBT 與 Core Web Vitals 的First Input Delay (FID) 指標高度相關。

更新績效分數

Lighthouse 中的效能分數是根據多個指標的加權混合值計算而得，用於概略表示網頁的速度。以下是 6.0 版效能分數的公式。

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

雖然我們新增了三項指標，但也移除了三項舊指標：第一個有意義的 Paint、第一個 CPU 閒置時間和最大潛在 FID。我們已修改其他指標的權重，以強調主執行緒的互動性和版面配置可預測性。

以下是第 5 版的得分方式，供您比較：

階段 指標名稱 重量
初期 (23%) First Contentful Paint (FCP) 23%
中 (34%) 速度指數 (SI) 27%
首次有效顯示所需時間 (FMP) 7%
已完成 (46%) 互動準備時間 (TTI) 33%
首次 CPU 閒置時間 (FCI) 13%
主執行緒 FID 最大預估值 0%

Lighthouse 評分在 5 和 6 版之間有所變更。

Lighthouse 5 版和 6 版之間的評分變更重點如下：

  • TTI 的權重已從 33% 降至 15%。這項變更是直接回應使用者針對 TTI 變化情形，以及指標最佳化不一致性所提供的意見回饋，進而改善使用者體驗。TTI 仍可用於判斷網頁是否已完全可供互動，但搭配使用 TBT 可減少變化性。我們希望這項評分機制異動能更有效地鼓勵開發人員針對使用者互動性進行最佳化調整。
  • FCP 的權重已從 23% 降至 15%。只在第一次繪製像素時進行評估 (FCP) 無法提供完整的情況。結合評估使用者何時能夠看到自己最可能感興趣的內容 (LCP)，更能反映載入體驗。
  • FID 最大預估值 已淘汰。這項資訊不再顯示在報表中，但仍可在 JSON 中使用。建議您現在使用 TBT 來量化互動性，而非 mpFID。
  • 「畫面首次有效顯示所需時間」已淘汰。這項指標變化太大，而且實作方式僅適用於 Chrome 轉譯內部，因此無法標準化。雖然部分團隊認為在自家網站上使用 FMP 時間是值得的，但指標不會因此獲得額外改善。
  • 首次 CPU 閒置時間已淘汰，因為它與 TTI 的差異不明顯。目前，TBT 和 TTI 是互動性指標的首選。
  • 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 執行稽核時，報表會附上計算機的連結，並填入您的結果。

Lighthouse 分數計算機。
感謝 Ana Tudor 升級指標！

新稽核

未使用的 JavaScript

我們會在新的稽核作業中使用開發人員工具程式碼涵蓋率：未使用的 JavaScript。

這項稽核並非完全全新，而是在 2017 年中新增，但由於效能負擔，因此預設為停用，以便 Lighthouse 盡可能保持快速。收集這類涵蓋率資料的效率現在大幅提升，因此我們可以放心將其設為預設啟用。

無障礙稽核

Lighthouse 會使用出色的 axe-core 程式庫，為無障礙類別提供支援。在 Lighthouse 6.0 中，我們新增了以下稽核項目：

  • aria-hidden-body
  • aria-hidden-focus
  • 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

在去年 11 月的 CDS 中，我們宣布推出 Lighthouse CI，這是一款開放原始碼 Node CLI 和伺服器，可追蹤持續整合管道中每個提交的 Lighthouse 結果。自 Alpha 版發布以來，我們已取得長足進展。Lighthouse CI 現已支援多個 CI 供應商，包括 Travis、Circle、GitLab 和 GitHub Actions。可立即部署的 Docker 映像檔可輕鬆完成設定，而重新設計的綜合資訊主頁現在可顯示 Lighthouse 中每個類別和指標的趨勢，方便您進行詳細分析。

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

Lighthouse CI。
Lighthouse CI。
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 像素變更為 360x640 像素。
  • 使用者代理程式字串稍微變更，先前為 Nexus 5 Build/MRA58N 的裝置部分現在會變成 Moto G (4)。

自 Chrome 81 起，Chrome 開發人員工具的裝置模擬清單中也提供 Moto G4。

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 服務條款》。如果您不願意或無法接受服務條款，請使用 DevTools 的 Lighthouse 面板或 Node CLI。

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

預算

Lighthouse 5.0 推出了成效預算，可針對網頁可放送的每種資源類型 (例如程式碼、圖片或 CSS) 新增門檻。

Lighthouse 6.0 新增了預算指標支援功能，因此您現在可以為 FCP 等特定指標設定閾值。目前，預算功能僅適用於 Node CLI 和 Lighthouse CI。

來源位置連結

Lighthouse 在網頁中發現的部分問題可追溯至特定一行原始碼，而報表會指出相關的確切檔案和行號。為了讓您在開發人員工具中輕鬆探索，只要按一下報表中指定的位置，即可在「來源」面板中開啟相關檔案。

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

未來展望

Lighthouse 已開始嘗試收集原始碼對照圖，以支援新功能，例如：

  • 偵測 JavaScript 套件中的重複模組。
  • 偵測傳送至新式瀏覽器的程式碼中是否有過多的 polyfill 或轉換。
  • 擴充未使用的 JavaScript 稽核功能，提供模組層級的精細度。
  • 樹狀圖可視化資料，醒目顯示需要採取行動的模組。
  • 顯示含有「來源位置」的報表項目原始原始碼。
未使用的 JavaScript 顯示來源對應中的模組。
未使用的 JavaScript 稽核作業會使用來源對應，顯示特定套件模組中的未使用程式碼。

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

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

感謝您！

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

接下來該怎麼做？

  • 開啟 Chrome Canary，並試用 Lighthouse 面板。
  • 使用 Node CLI：npm install -g lighthouse && lighthouse https://yoursite.com --view。
  • 讓 Lighthouse CI 與專案一起執行。
  • 請參閱 Lighthouse 稽核說明文件。
  • 祝你享受打造更優質網路的樂趣！

我們熱愛網路，也樂於與開發人員社群合作，共同打造有助於改善網路的工具。Lighthouse 是開放原始碼專案，我們要向所有協作者致上誠摯的謝意，感謝他們協助修正錯字、重構文件，以及進行全新稽核。想貢獻內容嗎？ 歡迎前往 Lighthouse GitHub 存放區。