2017 年 1 月的 Lighthouse 更新

Lighthouse 是一款自动化的开源工具,用于提升 Web 应用的质量。您可以将其安装为 Chrome 扩展程序,也可以将其作为 Node 命令行工具运行。当您向 Lighthouse 提供网址后,它会对该网页运行一系列测试,然后生成一份报告,说明该网页的表现以及需要改进的地方。

Lighthouse 徽标
灯塔徽标

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

新审核

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

CSS 使用情况审核

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

优化图片审核

响应式图片审核会报告图片过大,以及针对给定设备正确调整图片大小可带来的潜在成本/时间节省:

优化图片审核

如果您的网页使用了已废弃的 API 或已干预的功能,废弃和干预审核会列出 Chrome 中的控制台警告:

弃用和干预审核

报告个人信息变更

正如您所见,我们致力于通过添加表格数据、隐藏多余的帮助文本以及添加新功能来简化报告的视觉呈现,让您更轻松地浏览数据。

模拟设置

很容易忘记特定 Lighthouse 运行作业使用了哪些节流和模拟设置。Lighthouse 报告现在包含用于创建报告的运行时模拟设置;这项功能请求已等待很长时间

模拟设置

更实用的轨迹数据

Lighthouse 指标(例如“首次有效渲染时间”“可交互时间”等)会被模拟为用户时间测算,并注入到使用 --save-assets 标志保存的轨迹数据中。

如果您使用 --save-assets 标志,现在可以将轨迹拖放到 DevTools 中,或在 DevTools 时间轴查看器中打开它。您将能够在网页加载的完整轨迹中查看关键指标。

跟踪记录数据

Lighthouse Viewer

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

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

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

效果实验

效果实验项目的第一个版本已发布到 1.5.0 版。这样,您就可以在开发过程中对页面加载性能进行实验,以互动方式测试在关键路径中屏蔽或延迟资源的影响。

使用 --interactive 标志运行 Lighthouse 时,系统会生成一份特殊报告,以便您以互动方式选择耗费资源较多的网页资源。然后,实验服务器会在屏蔽这些资源的情况下,针对该网页重新运行 Lighthouse。

切换运行时设置

详细了解 Lighthouse 中的效果实验。

新文档

最后,我们更新了 developers.google.com/web/tools/lighthouse/ 中的文档,并添加了新的审核参考。

新文档

就介绍到这里!

如需详细了解 Lighthouse 的最新动态,请参阅 GitHub 上的完整版本说明。一如既往,您可以与我们联系报告 bug、提交功能请求,或就您希望我们接下来推出的想法进行头脑风暴。