What's Lighthouse 6.0 的新功能

新指標、效能分數更新、新版稽核等更多內容。

Connor Clark
Connor Clark
X GitHub

我們今天發布 Lighthouse 6.0 版！

Lighthouse 是一套自動化網站稽核工具， 協助開發人員把握機會和診斷，改善網站的使用者體驗。 您可以在 Chrome 開發人員工具、npm (節點模組和 CLI) 或瀏覽器擴充功能 (位於 Chrome 和 Firefox)。支援許多 Google 服務 服務，包括 web.dev/measure 和 PageSpeed 深入分析。

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 6.0 指標。

Lighthouse 6.0 為報表加入了三項新指標，其中兩項新指標是最大的 內容繪製 (LCP) 和累計版面配置位移 (CLS) 是指Core Web 的實驗室實作 Vitals。

最大內容繪製 (LCP)

Largest Contentful Paint (LCP) 是感知載入量的標準 無須專人管理這會指出載入網頁的主要 (或「最大」內容) 載入時的時間點， 不會向使用者顯示LCP 是 First Contentful Paint (FCP) 的重要補強，但 擷取一開始的載入體驗。LCP 可讓開發人員瞭解 表示使用者很快就能看到網頁內容如果 LCP 分數低於 2.5 秒， 視為「佳」。

如需更多資訊，請觀看 Paul Ireland 的這部 LCP 深入解析。

累計版面配置位移 (CLS)

累計版面配置位移 (CLS) 是用來評估視覺穩定性。這項服務 量化頁面內容在視覺上的變動幅度如果 CLS 分數偏低 開發人員指出使用者不會受到不當內容變動的情況低於 0.10 的 CLS 分數 視為「佳」。

研究室環境中的 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%

我們加入了三項新指標，並移除了以下三個舊指標：Firstaningful Paint、 第一個 CPU 閒置和最大 FID。剩餘指標的權重已修改為 強調主執行緒的互動性和版面配置可預測性。

為了進行比較，以下是版本 5 的評分：

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

第 5 至第 6 版之間的 Lighthouse 評分變化。

Lighthouse 版本 5 和 6 之間的評分差異如下：

  • TTI 的權重從 33% 減少為 15%。這是直接回覆使用者 提供 TTI 變異的相關意見，以及指標最佳化作業不一致，導致 使用者體驗也有所提升TTI 仍是網頁完整時實用的信號 但 TBT 為互動模式 互補度會降低。 這項分數改變後，我們希望更有效鼓勵開發人員進行最佳化， 以及使用者互動方式
  • FCP 的權重從 23% 減少至 15%。只有在第一個像素為 繪製圖片 (FCP) 無法提供完整的圖片再搭配評估使用者能 這樣就能更準確地反映載入體驗。
  • Max Potential FID 已淘汰。報表中不再顯示此項目， 仍會顯示在 JSON 中建議您查看 TBT 來量化互動性 而非 mpFID
  • 「Firstaningful Paint」已淘汰。這項指標過於變化版本，沒有可用指標 標準化的實作路徑專指 Chrome 轉譯的內部構造。雖然 部分團隊發現 FMP 在網站上運作的時間確實值得一試，在這種情況下， 而且效能提升
  • First CPU 閒置狀態已淘汰，因為這與 TTI 不夠獨特。待定和 TTI 是互動性的重要指標
  • CLS 的權重相對較低，但我們預計會在日後的主要版本中增加該權重。

分數變化

這些變更對實際網站的分數有何影響？我們已發布 分析 的分數變更使用兩個資料集：一般資料集 網站，以及 一組靜態網站 採用 Eleventy 打造而成總結來說，約有 20% 的網站明顯較高 大約有 30% 的分之一

分數變化可分為三個主要部分：

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

調整體重變化，並導入三項新指標，可提升整體分數 並輸入變更內容開發人員尚未進行最佳化調整的新指標，在第 6 版中已大幅提升 成效分數雖然第 5 版測試語料庫的平均效能分數約為 50 分，但新的「Total Blocking Time」和「Largest Contentful Paint」指標的平均分數約為 30 分。這兩項指標在 Lighthouse 第 6 版成效分數中佔了 50% 的權重，因此，對大多數網站來說，可說是降低比例。

修正基礎指標計算的錯誤可能會導致不同的分數。這會影響 網站相對較少，但在特定情況下可能帶來重大影響整體而言，約 8% 的網站 指標導入方式變動後，分數有所提升，而約 4% 的網站在分數中提升 且會因為指標導入方式變動而降低。約有 88% 的網站受到這些修正程式的影響。

個別分數曲線的變化也影響了整體分數轉移，但只會有輕微的調整。三 定期確保分數曲線與 HTTPArchive 中觀察到的指標一致 資料集。排除受到重大導入變更影響的網站 (小幅) 調整個別指標的分數曲線後，約有 3% 的網站分數 降低約 4% 網站的分數。約有 93% 的網站不受這項異動影響。

評分計算機

我們已發布評分計算機， 您會需要探索效能分數計算機還可讓您比較 Lighthouse 第 5 版和 6 分。使用 Lighthouse 6.0 執行稽核時，報告會附上計算機的連結 填入相關結果

Lighthouse Score 計算機。
非常感謝 Ana Tudor 協助升級成績！

全新稽核

未使用的 JavaScript

我們使用開發人員工具程式碼 涵蓋率 (全新稽核) 頁面：Unused (未使用) JavaScript：

這項稽核不是「完全」新的項目，而是新增於以下位置： 2017 年中，但 由於效能負擔，系統預設停用該功能，讓 Lighthouse 盡可能能快速 目前收集這項涵蓋範圍資料的效率已大幅提升，因此不用擔心， 就會自動更新。

無障礙稽核

Lighthouse 採用精美的 axe-core 程式庫， 無障礙類別我們在 Lighthouse 6.0 中，新增以下稽核項目：

可遮蓋圖示

遮罩圖示是全新的圖示格式，可用於建立 PWA 的圖示 影片在各種裝置上都能完美呈現。為了盡可能讓您的 PWA 呈現最佳效果，我們導入了 建立新的稽核，檢查 manifest.json 是否支援這種新格式。

字元集宣告

中繼字元集元素會宣告該使用何種字元編碼 可解讀 HTML 文件如果缺少此元素，或如果此元素在 文件，瀏覽器會使用數種經驗法則，猜測應使用哪種編碼。如果 瀏覽器猜錯，且發現延遲的中繼字元集元素時，剖析器通常會擲回 完整執行截至目前為止完成的所有工作，並且從頭開始，導致使用者體驗不佳。這項新功能 稽核會驗證頁面是否具備有效的字元編碼，而且是提前定義。

Lighthouse 持續整合

CDS 去年 11 月 我們推出了開放原始碼節點 Lighthouse CI 這個 CLI 和伺服器可在持續整合每個修訂版本中追蹤 Lighthouse 結果 而我們從 Alpha 發布後至今已有了長足的進步Lighthouse CI 現已支援 適用於許多持續整合供應商，包括 Travis、Circle、GitLab 和 GitHub Actions。可立即部署 docker 映像檔 輕而易舉，全面重新設計的資訊主頁，現在會顯示各類別和指標的趨勢 進行詳細的分析

請按照下列步驟操作，開始在專案中使用 Lighthouse CI 入門指南。

Lighthouse CI。
Lighthouse CI。
Lighthouse CI。

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

「Audits」面板已重新命名為「Lighthouse」面板。我得這麼說！

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

如要快速顯示面板，請按下 Command + 命令 選單：

  1. 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  2. 按下 Control+Shift+P (在 Mac 上則為 Command+Shift+P) 即可： 開啟「指令」選單。
  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。

隨附 Moto G4 的 Chrome 開發人員工具裝置模擬清單。

瀏覽器擴充功能

Lighthouse 適用的 Chrome 擴充功能 為當地執行 Lighthouse 的簡便方法。很抱歉，提供支援的過程相當複雜。 我們認為 Chrome 開發人員工具 Lighthouse 面板能提供更優質的體驗 (報告) 整合到其他面板），我們可以簡化 Chrome 。

擴充功能現在會使用 PageSpeed Insights 工具，而非在本機執行 Lighthouse API。我們瞭解 對於部分使用者來說 這無法派上用場主要差異如下：

  • PageSpeed Insights 是透過遠端執行，因此無法稽核非公開網站 而非本機 Chrome 執行個體如需稽核非公開網站，請使用 開發人員工具「Lighthouse」面板或 Node CLI。
  • PageSpeed Insights 不保證使用最新的 Lighthouse。如要使用 請使用 Node CLI瀏覽器擴充功能會在發布後大約 1 到 2 週內收到更新。
  • PageSpeed Insights 是 Google API，使用時代表接受《Google API 條款》 售後服務如果不想或無法接受服務條款，請使用開發人員工具「Lighthouse」面板。 或節點 CLI

好消息是，簡化產品故事之後，我們就能專心處理其他工程工作 如要解決關聯問題，可用 Apriori 這類關聯規則學習技術和演算法因此，我們推出了 Lighthouse Firefox 擴充功能！

預算

Lighthouse 5.0 推出了效能預算， 支援增加閾值 每種資源類型的 網頁可以放送

Lighthouse 6.0 增益集 預算指標支援 您現在可以設定 FCP 等特定指標的閾值目前只能設定預算 進入節點 CLI 和 Lighthouse CI

來源地點連結

Lighthouse 為網頁所發現的部分問題可以追溯到下列特定一行 原始程式碼，報表就會列出相關的確切檔案和行。為了方便起見 請在開發人員工具中探索，按一下報表指定的位置，即可開啟相關檔案 「來源」面板中。

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

地平線

Lighthouse 已開始測試收集來源地圖，以便提供以下新功能：

  • 偵測 JavaScript 套件中的重複模組。
  • 偵測傳送至新式瀏覽器的程式碼中過多的 polyfill 或轉換。
  • 增加未使用的 JavaScript 稽核，以提供模組層級的精細程度。
  • 樹狀圖視覺化呈現會醒目顯示需要處理的模組。
  • 針對包含「來源位置」的報表項目顯示原始原始碼。
，瞭解如何調查及移除這項存取權。
未使用的 JavaScript 顯示來源對應的模組。
使用來源對應進行未使用的 JavaScript 稽核，顯示特定組合模組中未使用的程式碼。

在未來的 Lighthouse 版本中，會預設啟用這些功能。目前您可以查看 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 稽核說明文件。
  • 祝你上網愉快！

Google 非常熱衷於網路網路，且樂於與開發人員社群合作打造工具， 協助提升網路品質Lighthouse 是一項開放原始碼專案，我們受惠於所有 貢獻一己之力，協助完成各種事務，包括錯字修正、重構文件，以及全新功能 稽核。 有興趣貢獻內容嗎？ 根據 Lighthouse GitHub 存放區進行滑動操作。