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