Chrome-Lighthouse

Lighthouse是一个开源的自动工具，用于提高网页的质量。你可以针对任何网页运行它，无论是公共的还是需要认证的。它可以对性能、可访问性、渐进式网络应用程序、搜索引擎优化等进行检测。

你可以在Chrome DevTools中运行Lighthouse，也可以从命令行中运行，或者作为一个Node模块。你给Lighthouse一个需要审计的URL，它就会对该页面进行一系列的审计，然后生成一份关于该页面表现的报告。在此基础上，你可以将失败的审计结果作为改善页面的指标。每个审计都有一个参考文档，解释为什么该审计很重要，以及如何修复它。

你还可以使用Lighthouse CI来防止你的网站出现退步。

请看下面这段来自Google I/O的视频，了解更多关于如何使用Lighthouse并为之做出贡献。

开始工作

选择最适合你的Lighthouse工作流程。

• 在Chrome DevTools中。轻松审核需要认证的页面，并以用户友好的格式阅读你的报告。
• 在命令行中。通过Shell脚本自动运行Lighthouse。
• 作为一个Node模块。将Lighthouse集成到你的持续集成系统中。
• 从Web UI。运行Lighthouse并链接到报告，无需安装任何东西。

CLI和Node工作流程要求你在机器上安装一个Google Chrome浏览器实例。

在Chrome DevTools中运行Lighthouse

Lighthouse在Chrome DevTools中拥有自己的面板。要运行一个报告：

1. 下载桌面版谷歌浏览器。
2. 在谷歌浏览器中，转到你想审计的URL。你可以审计网络上的任何URL。
3. 打开Chrome DevTools。
4. 点击Lighthouse标签。
5. 左边是将被审计的页面的视口。右边是Chrome DevTools的Lighthouse面板，它是由Lighthouse提供的。
6. 单击 “Analyze page load“。DevTools会向你显示一个审计类别的列表。让它们全部启用。
7. 点击Run audit。30至60秒后，Lighthouse会给你一份关于该页面的报告。

安装并运行Node命令行工具

要安装Node模块：

• 下载桌面版谷歌浏览器。
• 安装当前长期支持版本的Node。
• 安装Lighthouse。 -g 标志将其作为一个全局模块安装。

npm install -g lighthouse

要运行一个检测：

lighthouse <url>

要看到所有的选项：

lighthouse --help

以编程方式运行Node模块

关于以编程方式运行Lighthouse（作为Node模块）的例子，请参见以编程方式使用。

运行PageSpeed Insights

要在PageSpeed Insights上运行Lighthouse：

1. 导航到PageSpeed Insights。
2. 输入一个网页的URL。
3. 单击 “Analyze“。

将Lighthouse作为Chrome扩展程序运行

注意事项：除非您有特殊原因，否则您应该使用Chrome DevTools工作流程而不是这个Chrome扩展工作流程。DevTools工作流程允许测试本地网站和经过验证的页面，而该扩展程序不允许。

安装扩展程序:

1. 下载[Google Chrome for Desktop][desktop]。
2. 从Chrome Webstore安装Lighthouse Chrome扩展。

要运行一个检测：

1. 在Chrome浏览器中，进入你想要检测的页面。
2. 点击Lighthouse图标。它应该在Chrome地址栏的旁边。如果没有，请打开Chrome的扩展菜单，从那里进入。点击后，Lighthouse菜单会展开。
3. 单击 “Generate report“。Lighthouse会根据当前的重点页面进行检测，然后打开一个新的标签页，上面有一份结果报告。

在线分享和查看报告

使用Lighthouse Viewer在线查看和分享报告。

使用JSON分析报告

Lighthouse Viewer需要Lighthouse报告的JSON输出。下面的列表解释了如何获得JSON输出，这取决于你所使用的Lighthouse工作流程：

• Lighthouse报告。打开右上角的三个点菜单然后点击Save as JSON
• 命令行。运行:

  lighthouse --output json --output-path <path/for/output.json>

   

查看报告数据:

1. 打开Lighthouse Viewer.
2. 将JSON文件拖到查看器上，或者点击查看器中的任何地方，打开你的文件导航器并选择该文件。

以GitHub Gists的形式分享报告

如果你不想手动传递JSON文件，你也可以将你的报告作为秘密的GitHub gists来分享。gists的一个好处是免费的版本控制。

要从报告中导出一个报告作为gist：

1. (如果已经在查看器上，跳过这一步）打开右上方的三个点菜单然后点击Open In Viewer。该报告在查看器中打开，位于 https://googlechrome.github.io/lighthouse/viewer/.
2. 在查看器中，打开右上方的三个点菜单然后点击Save as Gist。第一次这样做时，会有一个弹出窗口，要求允许访问你的GitHub基本数据，以及读写你的gists。

要从Lighthouse的CLI版本将报告导出为gist，需要手动创建一个gist，并将报告的JSON输出复制粘贴到gist中。包含JSON输出的gist文件名必须以 .lighthouse.report.json结尾。关于如何从命令行工具中生成JSON输出的例子，请参见分享报告为JSON。

要查看已保存为要点的报告：

• Addto the Viewer’s URL, where <ID> is the ID of the gist.在查看器的URL中添加 ?gist=<ID> ，其中<ID> 是gist的ID。

  https://googlechrome.github.io/lighthouse/viewer/?gist=

• 打开查看器，并将gist的URL粘贴到其中。

Lighthouse的可扩展性

Lighthouse旨在为所有网站开发人员提供相关的、可操作的指导。为此，Lighthouse有两个功能，可以让你根据自己的具体需要来定制Lighthouse。

Stack Packs

开发人员使用许多不同的技术（后端/CMS/JavaScript框架）来构建他们的网页。Lighthouse现在能够根据所使用的工具，提供更有针对性和可操作性的建议，而不是只提供一般建议。

“Stack Packs” 使Lighthouse能够检测到你的网站是在什么平台上建立的，并显示基于堆栈的具体建议。这些建议是由社区的专家定义和策划的。

要想贡献一个Stack Pack，请查看贡献指南。

Lighthouse 插件

Lighthouse 插件允许领域专家根据其社区的具体需求扩展Lighthouse的功能。你现在能够利用Lighthouse收集的数据来创建新的审计。Lighthouse插件的核心是一个节点模块，它实现了一组检查，将由Lighthouse运行，并作为一个新的类别添加到报告中。

有关如何创建自己的插件的更多信息，请查看Lighthouse GitHub repo中的《插件手册》。

整合Lighthouse

如果你是一家公司或个人，正在将Lighthouse作为你所提供的产品/服务的一部分，首先，我们很高兴你能这样做！我们希望尽可能多的人能够使用Lighthouse。我们希望尽可能多的人使用Lighthouse，本《整合Lighthouse的指南和品牌资产》旨在让你在保护我们的品牌的同时，直接展示Lighthouse在引擎中的作用。

为Lighthouse做贡献

Lighthouse是开源的，欢迎大家做出自己贡献。你可以查看存储库的问题追踪器，找到你可以修复的错误，或者你可以创建或改进的审计。问题追踪器也是一个讨论性能指标、新审计想法或其他与Lighthouse有关的问题的好地方。