Lighthouse 面板与性能面板：该用哪个做性能审核

核心洞察

LighthouseGoogle开源的自动化网页质量审计工具，用于检测性能、可访问性和SEO指标，是开源技术SEO技能的基础。 面板和性能面板Chrome 开发者工具中的一个面板，用于分析运行时性能，提供实时指标和详细的性能分析。的关系这几年变化挺大的。以前性能面板是给专家用的，Lighthouse 负责给普通人一个大概印象，现在性能面板自己也能出实时指标和洞察了，两个工具的定位开始重叠。但 Lighthouse 在无障碍、SEO、最佳实践这几个类别上仍然没有替代品，而且它在 DevTools 里跑的时候有一些其他工具没有的灵活性，比如时间跨度模式Lighthouse 的一种模式，在一段时间内运行评估，这段时间可能包含也可能不包含导航。和快照模式Lighthouse 的一种模式，允许在网页的当前状态下进行审核，而无需重新加载网页。，这个值得留意。

核心结论

1. Lighthouse 面板与性能面板的定位正在重叠：性能面板现在也能提供实时指标和洞察，但调试性能问题时仍建议优先使用性能面板，因为它提供更细、更深的调试能力。

2. Lighthouse 在无障碍、最佳实践和 SEO 三个类别上仍然没有替代工具，这是它区别于性能面板的核心价值。

3. DevTools 中的 Lighthouse 支持时间跨度模式和快照模式，可直接与网页互动来衡量用户流，比用 Puppeteer 写脚本方案更简单。

4. DevTools 中的 Lighthouse 允许选择设备类型和审核类别，而 PageSpeed InsightsGoogle 提供的一项服务，用于分析网页的性能并提供优化建议，可在服务器上运行 Lighthouse 审核。 等工具不提供这些选项，只关注特定类别时可加快审核速度。

5. Lighthouse 的审核结果受本机环境影响（设备负载、Chrome 扩展程序、Cookie 和本地存储等），因此无法直接比较两台不同机器上的审核结果；相比之下，PageSpeed Insights 或 CI 工具在独立服务器上运行，结果更干净、更一致、更好比较。

概览

用 Lighthouse 面板可以对网站做一轮全面审核。它会生成一份报告，覆盖这几个类别：

• 性能
• 无障碍
• 最佳做法
• 搜索引擎优化

每个类别都有得分，会标出潜在问题和改进建议。

想了解 Lighthouse 还能从哪些方面提升网站质量，可以翻一下 Lighthouse 的官方文档。

Lighthouse 与性能面板

Lighthouse 的一大用途是发现性能问题，但性能面板也能干这事。两个工具各自擅长什么？该用哪个？

以前性能面板被当成专家工具，Lighthouse 给的是高层概览，不需要太多 Web 性能知识就能看懂。

现在性能面板的视图好懂多了，有实时指标。进入轨迹视图后，你会看到 Lighthouse 传统上能发现的那类问题，性能分析也放进了数据分析边栏里，两边是共享的。

用开发者工具调试性能问题时，建议用性能面板而不是 Lighthouse，因为前者能提供更细、更深的调试能力。

不过 Lighthouse 在无障碍、最佳实践、SEO 这几个类别上还是很有用，性能类别也保留了，方便习惯用 Lighthouse 的人，也跟其他 Lighthouse 工具保持一致。

开发者工具中的 Lighthouse 与其他 Lighthouse 工具

跟其他 Lighthouse 工具比，不管是 PageSpeed Insights、自动化测试里的 Lighthouse CI一个用于在持续集成中运行 Lighthouse 的工具，可自动化审核流程。 还是第三方工具，DevTools 里的 Lighthouse 有一些额外的功能，也有一些需要注意的地方。

部分设置可以在启动审核前的界面上直接控制，更高级的选项默认藏着，点了设置按钮才会出现：

这些不是 Lighthouse 的全部配置选项，但覆盖了比较常用的那些。

更轻松的模式设置

除了默认的导航模式Lighthouse 的默认模式，针对新加载的网页运行审核报告。，也就是针对新加载的网页跑报告，Lighthouse 还提供时间跨度和快照模式，用来衡量用户流。

时间跨度模式会在一段时间内跑 Lighthouse 评估，这段时间里可能有导航，也可能没有。在开发者工具里用 Lighthouse，你可以在面板中启动时间跨度跟踪，然后直接跟网页互动。

快照模式类似，它让你在网页当前状态下做审核，不用重新加载。

这些模式都能用 Puppeteer 写脚本实现，但在开发者工具里设置特定场景更方便。直接跟网页互动，几乎总是比写脚本方案简单。

设备和类别选择

很多 Lighthouse 工具，比如 PageSpeed Insights，不提供选择设备类型或审核类别的选项，但在开发者工具里可以选。

如果你只关心某个特定类别，这能加快审核速度。

高级设置

点击设置按钮能看到更多选项：

• 清除存储空间：审核时清掉网站存储，更好地模拟干净的首次加载体验。
• 启用 JS 采样：提供更多采样数据，在性能面板里打开开发者工具轨迹时很有用。
• 节流下拉菜单：在 Lighthouse 模拟节流和开发者工具节流设置之间切换。前者速度更快，但性能数据会做缩放；后者意味着你在性能面板里打开轨迹时，数据会跟 Lighthouse 对得上。

Lighthouse 会受到你的设置影响

有一点很重要，Lighthouse 的结果会受你的环境影响，包括设备上的其他负载、Chrome 扩展程序，以及 Cookie、本地存储里的设备设置。

一般建议在无痕模式下跑 Lighthouse，但即使这样，结果还是可能受这些因素干扰。

这也意味着，你没法直接比较两台不同机器上跑出来的两次审核结果。

相比之下，在独立服务器上跑的 PageSpeed Insights 或 CI 工具，结果可能更干净、更一致，不同运行之间也更好比较。

运行后选项

跑完之后，设置按钮会变成三点菜单，里面有一些额外功能：

你可以打印、复制或保存审核详情，也可以在独立查看器里于 DevTools 之外打开。

另一种方式是在性能面板里查看轨迹，因为 Lighthouse 性能审核本质上就是一种性能面板轨迹，两者共用同一个轨迹引擎。

最后一个选项是切换 Lighthouse 报告的深色模式。

总结

开发者工具里的 Lighthouse 面板可以对你在 Chrome 中调试的网页跑 Lighthouse 报告，有些功能比其他 Lighthouse 工具更好用。

性能调试建议用性能面板，它提供的性能分析洞察跟 Lighthouse 类似，但详细程度更高。不过还是有人更习惯用 Lighthouse。

另外，Lighthouse 还提供其他评估，帮你发现和改进无障碍、SEO 和其他最佳实践方面的问题。

常见问题（FAQ）

Lighthouse 和性能面板到底有什么区别？

性能面板适合深度性能调试，提供更细粒度的分析；Lighthouse 则用于快速概览，并覆盖无障碍、SEO、最佳实践等类别。两者在性能分析上功能有重叠，但定位不同。

Lighthouse 的时间跨度模式和快照模式怎么用？

时间跨度模式在一段时间内评估用户流，可包含导航；快照模式审核网页当前状态，无需重新加载。两者都可在 DevTools 中直接与页面交互，比写脚本更方便。

为什么 Lighthouse 的审核结果每次都不一样？

Lighthouse 结果受设备负载、Chrome 扩展、Cookie 和本地存储等环境影响。建议在无痕模式下运行，但不同机器上的结果仍难以直接比较。