Lighthouse 11 的新功能's

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse 是一項網站稽核工具，可協助開發人員找出改善網站使用者體驗的機會和診斷問題。

Lighthouse 11 可立即在透過 npm 的指令列、Chrome Canary 和 PageSpeed Insights 中使用。這項功能將在 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

除了新增稽核項目外，我們也更新了所有稽核項目的權重，以便更符合對應的 aXe 規則影響程度。如要進一步瞭解新的稽核項目和權重，請參閱 Lighthouse 無障礙工具評分說明文件。

手動稽核瀏覽權限

Lighthouse 一直包含一些無法自動測試的手動稽核，但仍會列入檢查清單，用於驗證重要功能。現在，如果所有自動稽核都通過，系統會自動展開手動稽核部分。

Lighthouse 報表，顯示無障礙功能類別中的手動稽核項目已展開

這表示即使通過所有自動化稽核，且無障礙分數達到 100 分，也不代表稽核頁面完全無障礙，手動測試仍不可或缺。手動稽核也經過重新排序，從最容易執行的檢查開始。

現有稽核作業的異動

Interaction to Next Paint (INP)

INP 不再是實驗指標，因此已從 experimental-interaction-to-next-paint 移至 interaction-to-next-paint。

Service Worker

在 Chrome 中，網頁不需 Service Worker 也能安裝為 PWA，因此 Lighthouse PWA 類別已移除 service-worker 檢查。

資源摘要

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

Lighthouse 可在 Chrome 開發人員工具、npm (做為 Node 模組和 CLI 工具) 中使用，也可做為瀏覽器擴充功能 (在 Chrome 和 Firefox 中)。此外，這項工具也支援多項 Google 服務，包括 PageSpeed Insights。

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

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

與 Lighthouse 團隊聯絡

如要討論新功能、Lighthouse 11 版本的異動，或任何其他與 Lighthouse 相關的事項，請前往：