Lighthouse：Chrome 和 DevTools 中包含的强大工具

本文最初发表于Dareboost 的博客。

Lighthouse 于 2016 年作为 Chrome 扩展程序发布，现在也可以直接在 Chrome 开发者工具的“审核”选项卡中使用。对于关注 Web 性能和质量的开发者来说，Lighthouse 是一个非常棒的工具。

灯塔概览

如果您熟悉 Chrome 开发者工具，使用 Lighthouse 审核网页非常简单。使用 Chrome 浏览器访问该网页，打开开发者工具（根据您的系统，快捷键为 Ctrl+Shift+i 或 ⌥+⌘+i），然后转到“审核”部分。 点击“执行审核”后，您可以根据自己的需求配置审核级别（性能、SEO、可访问性等）。 您将看到页面加载和重新加载的过程，稍等片刻，一个新窗口将显示您的审核报告。

如果您的 Chrome 版本低于 69（撰写本文时的最新版本为 67），此操作将触发 Lighthouse 2。您可以使用 Chrome 应用商店中的 Lighthouse 扩展程序来测试 Lighthouse 3。本次测试中，我们使用了该扩展程序。因此，以下内容均针对 Lighthouse 3。

注意：在使用Lighthouse 3.0.0-beta.0进行测试时，屏幕截图不符合预期的视口，可能会影响速度指数的计算。

当 Lighthouse 完成对您页面的评估后，您将获得一份审核报告，该报告首先列出几个分数（分数数量与审核配置期间选择的类别数量相同）。

性能评分根据您的速度测试结果计算得出，将您的网站速度与其他网站进行比较。100 分表示受测网页的速度比 98% 或以上的网页更快。50 分表示网页的速度比 75% 的网页更快。[来源]

其他分数取决于页面是否符合相关的最佳实践（您可能会注意到“最佳实践”类别：这个名称有点误导性，因为其他类别也提供了一些最佳实践，“其他”可能更合适）。

在我们的示例中，显示的是问号而不是分数。当某些相关测试未正确执行并被标记为“错误！”时，就会出现这种情况。

在分数概览之后，您将看到 6 项指标的性能结果，并附有工具提示以提供快速说明：

• 首次内容绘制：首次内容绘制标志着第一个文本/图像被绘制的时间。
• 首次有效绘制：首次有效绘制衡量页面主要内容何时可见。
• 速度指数：速度指数显示页面内容可见填充的速度。
• 首次 CPU 空闲：首次 CPU 空闲标志着页面主线程首次足够空闲以处理输入。
• 交互时间：交互时间是指页面完全可交互的时间点。
• 输入延迟预估：以上数值预估的是您的应用在页面加载最繁忙的 5 秒窗口期内响应用户输入所需的时间（以毫秒为单位）。如果您的延迟高于 50 毫秒，用户可能会感觉您的应用运行缓慢。

请注意，其中一些指标仍处于早期阶段。例如，正如其初始规范中所述：首次有效绘制时间 (First Meaningful Paint) 在 198 个页面中，有 77% 与用户感知的首次有效绘制时间相符。Lighthouse V2 和 V3 之间收集的指标发生了显著变化。我们将在下一篇文章中详细介绍。如果您仍然想了解更多信息，可以查看更新公告。

在报告中，您接下来会看到一个幻灯片：页面加载过程的逐步图像。这对于确认页面是否按预期加载尤为有用。例如，在我们的基准测试中，我们收到了一份存在差异的报告。多亏了幻灯片，我们才能确认出现了问题： 遗憾的是，我们无法进一步了解问题所在。在使用 Lighthouse 进行复杂工作时，缺乏详细信息可能会令人遗憾。如果没有页面加载瀑布图，就无法深入了解问题所在。

在性能概览之后，您将获得每个类别的最佳实践。大多数技巧都非常技术性，报告本身并未详细阐述，但您可以在“了解更多”链接下找到非常有价值的资源。Lighthouse 之所以成为一款出色的审核工具，还在于其拥有近百项自动化控制功能。此外，Lighthouse 还会突出显示一些“需要手动检查的其他项目”，这些项目将为您提供宝贵的提醒（例如，在辅助功能类别中，“页面具有合理的 Tab 键顺序”）。

请注意，某些最佳实践在多个类别中重复出现，例如，与混合内容相关的控制既存在于“渐进式 Web 应用”类别中，也存在于“最佳实践”类别中。

能力越大，责任越大

Lighthouse 绝对是一个很棒的工具，它能提供性能指标和质量控制，而且由于可以直接在 Chrome 浏览器中使用，所以随时可用。
但这个优势也可能成为你最大的敌人！
当你在台式电脑上进行性能测试时，你会依赖本地环境中的许多参数，因此很难获得足够稳定的结果：

• 网络连接：您确定没有后台应用程序占用带宽吗？如果您与他人共享连接，您确定没有人干扰您的测试吗？您的互联网服务提供商提供的连接是否足够稳定？
• CPU：您确定您的其他计算机使用情况不会影响您正在进行的测试吗？
• Chrome 扩展程序：正如Aymen Loukil 指出的那样，它们可能会对你的搜索结果产生重大影响。尤其要注意与广告拦截相关的扩展程序！
• 用户状态：您确定 Lighouse 测试是从干净状态开始的吗？您的 cookie、本地存储状态、打开的套接字（您可以在 chrome://net-internals/#sockets 中查看）等状态如何？
• Lighthouse 版本： Lighthouse 可能在您上次报告后已更新，您是否查看过更新日志？请注意，该扩展程序默认自动更新，因此 Chrome 更新时，开发者工具中显示的版本也会更新。

前两点已由最新版本的 Lighthouse (3.0) 处理，并新增了“模拟性能审计限流（更快） ”模式。Lighthouse 现在不再依赖 Chrome DevTools 进行流量整形，而是使用全新的内部审计引擎 Lantern。它旨在降低性能指标的波动性，同时尽可能减少精度损失。这种方法非常值得关注。更多详情，请参阅公开概述和详细分析。让我们拭目以待，看看它在大规模应用中的可靠性如何！
无论您使用的是哪个版本的 Lighthouse，都请务必考虑本地环境和条件的影响。

作为一款综合监控解决方案，Dareboost深知这些风险。在 Dareboost 上进行的每一项测试，我们都会创建一个全新的 Chrome 用户配置文件并启动一个新的 Chrome 实例。我们所有的测试区域都使用完全相同的基础设施和网络条件。为了避免任何相互依赖或瓶颈，我们不会在虚拟机上并行运行测试。

如果您仍然不相信运行性能测试需要一个专用环境，我们已经进行了一项小型实验。

我们从办公室（光纤连接，到 Apache.org 的平均 ping 值为 40 毫秒）对 Apache.org 进行了 3 次 Lighthouse 安全审计。以下是 Lighthouse 结果的中位数：

同样的操作，但这次我们将连接速度限制在 500 毫秒以内（使用 tc Unix 命令）：

在第二个上下文中，性能得分波动了 21%，而速度指数则翻了一番还多。而且，我们是在 Lantern 模式（模拟 Lighthouse 限速）下获得这些结果的，该模式旨在缓解本地网络波动的影响。

希望你的网络延迟不会有这么大的波动。但请记住，延迟只是你本地环境中众多可变参数之一！

如果您有临时需求，Dareboost 提供免费版本，让您享受稳定可靠的测试环境，每月最多可进行 5 次性能测试。不妨一试！

使用 Lighthouse 时，如果您想比较多个报告，请记住您的背景可能会发生变化，并可能存在相关的偏见！

一些额外的专业提示

• Lighthouse 是一个开源项目，可在GitHub 代码库中找到。您可以深入研究代码以了解更多信息，其 bug 跟踪系统也非常实用。
• 该工具还可以通过命令行界面执行。
• 您可以使用HTTP Archive收集数千个页面的数据，从而在网络规模上探索 Lighthouse 的结果。
• 如果您使用的是 Lighthouse v2（限速连接而非 Lantern 模拟），请注意您使用的是 Chrome 开发者工具的流量整形功能。延迟是在 HTTP 层注入的，这与 Dareboost 或 WebPageTest 在 TCP 层注入延迟不同。因此，Chrome 开发者工具不会在 TCP 连接或 SSL 握手期间增加延迟。

总而言之，Lighthouse 是一款实用且前景广阔的工具。与之前测试过的其他两款谷歌工具一样，它或许能够揭示谷歌在速度更新中的策略。