Lighthouse 11 的新功能's

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse 是一項網站稽核工具，可協助開發人員把握機會與診斷，改善網站的使用者體驗。

您可以透過 npm 指令列、Chrome Canary 和 PageSpeed Insights 中的 Lighthouse 11，立即下載這項工具。我們將在 Chrome 118 穩定版中推出。

完整異動清單請參閱 11.0 變更記錄。

無障礙類別最新消息

類別更新包括新的自動稽核、改善加權機制，以及優先進行人工稽核，協助開發人員提高網站的無障礙程度。

全新稽核與加權功能

自 Lighthouse 10.0 版本以來，新增了 13 項無障礙稽核項目：

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

除了新的稽核報告外，系統也更新了所有稽核的權重，以更符合對應的新版規則影響等級。如要進一步瞭解新的稽核項目和權重，請參閱 Lighthouse 無障礙評分說明文件。

手動稽核瀏覽權限

Lighthouse 一直包含無法自動測試的人工稽核項目，不過仍會納入驗證重要功能的檢查清單中。所有自動稽核程序都通過後，手動稽核專區就會自動展開。

一份 Lighthouse 報告，顯示展開的無障礙類別手動稽核

強調即使通過所有自動化稽核，無障礙設計分數達到 100，也無法保證稽核頁面可供存取；手動測試仍相當重要此外，手動稽核也已重新排序，由最容易上手的檢查開始。

現有稽核功能的異動

與下一個顯示的內容互動 (INP)

INP 不再處於實驗階段，因此該指標已從 experimental-interaction-to-next-paint 移至 interaction-to-next-paint。

Service Worker

在 Chrome 中以 PWA 的形式安裝網頁時，服務工作站已不再需要使用 Service Worker，因此該 service-worker 檢查已從 Lighthouse PWA 類別中移除。

資源摘要

resource-summary 稽核已從 Lighthouse 報告中移除。您仍可透過隱藏的 network-requests 稽核功能編譯網路要求統計資料：

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

舊版導覽

CLI 的 --legacy-navigation 旗標、Node API 中的 legacyNavigation() 函式，以及「舊版導覽」開發人員工具面板中的核取方塊已移除。這在 Lighthouse 基礎架構中經過多年轉換，以便支援使用者流程。

運作中的燈塔

Lighthouse 可透過 Chrome 開發人員工具、npm (節點模組和 CLI 工具) 和瀏覽器擴充功能 (Chrome 和 Firefox) 提供使用。Google Cloud 也支援多項 Google 服務，包括 PageSpeed Insights。

如要試用 Lighthouse 節點 CLI，請使用下列指令：

npm install -g lighthouse
lighthouse https://www.example.com --view

與 Lighthouse 團隊聯絡

為討論新功能、Lighthouse 11 版本變更，或其他與 Lighthouse 相關的其他事項：