2017 年 1 月的 Lighthouse 更新

Brendan Kenny
Brendan Kenny

Lighthouse 是一个开源自动化工具,用于提升 Web 应用的质量。您可以将其安装为 Chrome 扩展程序或作为 Node 命令行工具运行。当您为 Lighthouse 提供一个网址后,它会针对相应网页运行一系列测试,然后生成一份报告,说明该网页的性能并指出需要改进的方面。

Lighthouse 徽标
Lighthouse 徽标

今天,我们非常高兴地宣布 Lighthouse 的 1.5 版本,这是一个重大版本,拥有超过 128 个 PR。Lighthouse 1.5 包含许多重要的新功能、审核和常见的 bug 修复。您可以从 npm (npm i -g lighthouse) 安装此扩展程序,也可以从 Chrome 应用商店下载该扩展程序

新审计

CSS 使用情况审核会报告您页面中未使用的样式规则的数量以及移除这些规则所节省的费用/时间:

CSS 使用情况审核

优化图片审核会报告未优化的图片以及优化这些图片所节省的费用/时间:

优化图片受众群体

自适应图片审核会报告过大的图片,以及针对给定设备正确调整图片大小可能节省的费用/时间:

优化图片受众群体

如果您的网页使用的是已弃用的 API 或存在干预的功能,弃用和干预审核会列出来自 Chrome 的控制台警告:

弃用和干预审核

报告个人信息变更

如您所见,我们通过添加表格数据、隐藏不相关的帮助文本,以及添加可让用户更轻松地浏览数据的新功能,专注于降低报告视觉干扰。

模拟设置

人们很容易忘记对特定 Lighthouse 运行使用了哪些限制和模拟设置。Lighthouse 报告现在包含用于创建报告的运行时模拟设置;这是一项耗时的功能请求

模拟设置

更实用的轨迹数据

系统会模拟“首次有效渲染”“可交互时间”等 Lighthouse 指标,因为 User Timing 会进行测量,并将其注入回使用 --save-assets 标志保存的轨迹数据。

如果您使用 --save-assets 标志,现在可以将轨迹拖放到开发者工具中,或在 DevTools Timeline Viewer 中打开轨迹。您将能够在具有页面加载的完整跟踪记录的上下文中查看关键指标。

跟踪记录数据

Lighthouse 查看器

在 HTML 报告中,您会看到一个新按钮,其中包含用于以不同格式导出报告的选项。其中的一个选项是“在查看器中打开”。点击此按钮会将报告发送给在线 Viewer,您可以在其中与 GitHub 用户进一步分享报告。

“在查看器中打开”按钮
在查看器结果中打开

在后台,Viewer 会通过 OAuth 获取您的权限,以创建 GitHub Secret gist 并将报告保存在此处。由于报告是作为 Gist 完成的,因此您可以完全控制报告的共享,并且可以随时将其删除。您可以在 GitHub 设置下撤消 Viewer 创建 gist 的权限。

效果实验

Performance Experimental 项目的第一个版本已发布 1.5.0 版。这样,您就可以实验网页加载性能,以交互方式测试在开发期间屏蔽或延迟关键路径中的资源的效果。

在使用 --interactive 标志运行 Lighthouse 时,系统会生成一份特殊的报告,允许以交互方式选择开销高昂的页面资源。然后,实验服务器会在该页面上重新运行 Lighthouse,并屏蔽这些资源。

切换运行时设置

详细了解 Lighthouse 中的性能实验。

新文档

最后但同样重要的一点是,我们对 developers.google.com/web/tools/lighthouse/ 上的文档进行了现代化改造,并添加了新的审核参考资料。

新文档

暂时就介绍这些吧!

如需详细了解 Lighthouse 中的最新功能,请参阅 GitHub 上的完整版本说明。与往常一样,欢迎与我们联系报告 bug、提交功能请求,或就您希望接下来看到的内容集思广益想法