Lighthouse 是一款网站审核工具,可为开发者提供机会和诊断信息,以改善其网站的用户体验。
Lighthouse 11 可立即在通过 npm 的命令行、Chrome Canary 和 PageSpeed Insights 中使用。它将在 Chrome 118 中纳入 Chrome 稳定版。
如需查看完整的更改列表,请参阅 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 一直包含一些无法自动测试的手动审核,但仍作为核对清单提供,用于验证重要功能。现在,当所有自动审核均通过后,“人工审核”部分会自动展开。
旨在强调,通过所有自动审核并在无障碍功能方面得分达到 100 分并不能保证审核的页面可访问;手动测试仍然很重要我们还对人工审核进行了重新排序,从最容易进行的检查开始。
现有审核的变化
Interaction to Next Paint (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
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 相关的任何其他内容,请执行以下操作:
- 在 Lighthouse GitHub 问题跟踪器中报告问题或提交反馈。
- 在 Lighthouse GitHub 论坛中提问。
- 请在 Twitter 上与 Lighthouse 团队联系:@____lighthouse。