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 一直包含無法自動測試的人工稽核項目,不過仍會納入驗證重要功能的檢查清單中。所有自動稽核程序都通過後,手動稽核專區就會自動展開。
強調即使通過所有自動化稽核,無障礙設計分數達到 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 相關的其他事項:
- 透過 Lighthouse GitHub Issue Tracker 回報問題或提交意見回饋。
- 前往 Lighthouse GitHub 論壇提問。
- 透過 Twitter @____lighthouse 與 Lighthouse 團隊聯絡。