Lighthouse 是一款自动化的开源工具,用于提升网页质量。您可以针对任何公开网页或需要身份验��的网页��������。它包含对性能、无障碍功能、渐进式 Web 应用、搜索引擎优化 (SEO) 等方面的审核。
您可以在 Chrome 开发者工具中、从命令行运行 Lighthouse,也可以将其作为节点模块运行。您为 Lighthouse 提供一个要审核的网址,它会对此页面运行一系列审核,然后生成有关页面性能的报告。然后,将失败的评估作为改进网页的指标。每项审核都有一个参考文档,说明此次审核的重要性以及解决方法。
您还可以使用 Lighthouse CI 来防止网站出现回归。
观看 Google I/O 大会上的以下视频,详细了解如何使用 Lighthouse 并为其做贡献。
开始使用
选择最适合您的 Lighthouse 工作流:
- 在 Chrome 开发者工具中。轻松审核需要身份验证的网页,并以方便用户使用的格式阅读报告。
- 通过命令行。通过 Shell 脚本自动执行 Lighthouse。
- 作为节点模块。将 Lighthouse 集成到您的持续集成系统中。
- 通过网页界面。无需安装任何程序即可运行 Lighthouse 并关联到报告。
在 Chrome 开发者工具中运行 Lighthouse
Lighthouse 在 Chrome 开发者工具中拥有自己的面板。要生成报告,请执行以下操作:
- 下载桌面版 Google Chrome。
- 在 Google Chrome 中,转到您要审核的网址。您可以审核网络上的任何网址。
- 打开 Chrome 开发者工具。
点击 Lighthouse 标签页。
点击分析网页加载情况。开发者工具会显示审核类别列表。将它们全部保留启用状态。
点击运行审核。30 到 60 秒后,Lighthouse 会在页面上为您提供一份报告。
安装并运行 Node 命令行工具
如需安装 Node 模块,请执行以下操作:
- 下载桌面版 Google Chrome。
- 安装 Node 的当前长期支持版本。
- 安装 Lighthouse。
-g
标记将其安装为全局模块。
npm install -g lighthouse
如需运行审核,请执行以下操作:
lighthouse <url>
如需查看所有选项,请执行以下操作:
lighthouse --help
以编程方式运行 Node 模块
如需查看以节点模块形式以编程方式运行 Lighthouse 的示例,请参阅以编程方式使用。
运行 PageSpeed Insights
要在 PageSpeed Insights 上运行 Lighthouse,请执行以下操作:
- 访问 PageSpeed Insights。
- 输入网页网址。
点击分析。
将 Lighthouse 作为 Chrome 扩展程序运行
如需安装该扩展程序,请执行以下操作:
- 下载桌面版 Google Chrome。
- 从 Chrome 应用商店安装 Lighthouse Chrome 扩展程序。
如需运行审核,请执行以下操作:
- 在 Chrome 中,前往您要审核的网页。
点击 Lighthouse。该按钮应位于 Chrome 地址栏的旁边。如果没有,请打开 Chrome 的扩展程序菜单,然后从中访问此扩展程序。点击后,系统会展开 Lighthouse 菜单。
点击生成报告。Lighthouse 针对当前聚焦的页面运行审核,然后打开一个包含结果报告的新标签页。
在线共享和查看报告
使用 Lighthouse 查看器可在线查看和分享报告。
以 JSON 格式分享报告
Lighthouse 查看器需要 Lighthouse 报告的 JSON 输出。以下列表介绍了如何获取 JSON 输出,具体取决于您使用的 Lighthouse 工作流:
- Lighthouse 报告。打开右上角的 菜单,然后点击 另存为 JSON
- 命令行。运行:
shell lighthouse --output json --output-path <path/for/output.json>
若要查看报告数据,请按以下步骤操作:
- 打开 Lighthouse 查看器。
- 将 JSON 文件拖动到查看器中,或点击查看器中的任意位置以打开文件导航器,然后选择该文件。
以 GitHub Gists 身份共享报告
如果您不想手动传递 JSON 文件,还可以以 Secret 要点的形式共享您的报告。gists 的一个好处是免费的版本控制。
如需将报告作为 gist 从报告中导出,请执行以下操作:
- (如果查看器中已有,请跳过此步骤)打开右上角的 菜单,然后点击 在查看器中打开。报告会在查看器 (
https://googlechrome.github.io/lighthouse/viewer/
) 中打开。 - 在查看器中,打开右上角的 菜单,然后点击 Save as Gist。首次执行此操作时,系统会显示一个弹出式窗口,请求获得访问您的基本 GitHub 数据以及读取和���入 gist 的权限。
如需从 CLI 版本的 Lighthouse 将报告导出为 gist,请手动创建 gist,然后将报告的 JSON 输出复制并粘贴到 gist 中。包含 JSON 输出的 gist 文件名必须以 .lighthouse.report.json
结尾。如需查看有关如何通过命令行工具生成 JSON 输出的示例,请参阅以 JSON 格式分享报告。
如需查看已保存为 gist 的报告,请执行以下操作:
- 将
?gist=<ID>
添加到 Viewer 的网址,其中<ID>
是 gist 的 ID。text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
- 打开查看器,然后将 gist 的网址粘贴到其中。
Lighthouse 可扩展性
Lighthouse 旨在为所有 Web 开发者提供相关且切实可行的指南。为此,我们为您提供了两项功能,以便您根据自己的特定需求定制 Lighthouse。
堆叠
开发者使用多种不同的技术(后端/CMS/JavaScript 框架)构建其网页。Lighthouse 现在能够根据所使用的工具提供更相关且切实可行的建议,而不是只显示一般性建议。
“堆栈包”允许 Lighthouse 检测您的网站是在什么平台上构建的,并显示基于堆栈的特定推荐。这些建议由来自社区的专家定义和挑选。
如需贡献堆栈包,请查看贡献准则。
Lighthouse 插件
借助 Lighthouse 插件,网域专家可针对其社区的特定需求扩展 Lighthouse 的功能。您现在可以利用 Lighthouse 收集的数据来创建新的审核。从本质上讲,Lighthouse 插件是一个节点模块,用于实现一组检查,这些检查将由 Lighthouse 运行并作为新类别添加到报告中。
如需详细了解如何创建自己的插件,请参阅 Lighthouse GitHub 代码库中的插件手册。
集成 Lighthouse
如果您所在的公司或个人正在将 Lighthouse 集成到您所提供的产品 / 服务中,首先要做的就是,我们非常高兴!我们希望让尽可能多的人使用 Lighthouse,这份集成 Lighthouse 的指南和品牌资源旨在让您一目了然地看到 Lighthouse 在保护我们的品牌的同时处于后台。
为 Lighthouse 做贡献
Lighthouse 是开源的,欢迎贡献内容!请查看代码库的问题跟踪器,找出您可以修复的 bug,或者您可以创建或改进的审核项目。问题跟踪器也非常适合讨论性能指标、新审核的建议或任何其他与 Lighthouse 有关的内容。