概览

Lighthouse 是一款自动化的开源工具,用于提升网页质量。您可以针对任何公开网页或需要身份验证的网页运行它。它包含对性能、无障碍功能、渐进式 Web 应用、搜索引擎优化 (SEO) 等方面的审核。

Lighthouse 徽标

您可以在 Chrome 开发者工具中、从命令行运行 Lighthouse,也可以将其作为节点模块运行。您为 Lighthouse 提供一个要审核的网址,它会对此页面运行一系列审核,然后生成有关页面性能的报告。然后,将失败的评估作为改进网页的指标。每项审核都有一个参考文档,说明此次审核的重要性以及解决方法。

您还可以使用 Lighthouse CI 来防止网站出现回归。

观看 Google I/O 大会上的以下视频,详细了解如何使用 Lighthouse 并为其做贡献。

开始使用

选择最适合您的 Lighthouse 工作流:

在 Chrome 开发者工具中运行 Lighthouse

Lighthouse 在 Chrome 开发者工具中拥有自己的面板。要生成报告,请执行以下操作:

  1. 下载桌面版 Google Chrome
  2. 在 Google Chrome 中,转到您要审核的网址。您可以审核网络上的任何网址。
  3. 打开 Chrome 开发者工具
  4. 点击 Lighthouse 标签页。

    Chrome 开发者工具的 Lighthouse 面板
    左侧是将要审核的页面所在的视口。右侧是 Chrome 开发者工具的 Lighthouse 面板,该面板由 Lighthouse 提供支持

  5. 点击分析网页加载情况。开发者工具会显示审核类别列表。将它们全部保留启用状态。

  6. 点击运行审核。30 到 60 秒后,Lighthouse 会在页面上为您提供一份报告。

    Chrome 开发者工具中的 Lighthouse 报告
    Chrome 开发者工具中的 Lighthouse 报告

安装并运行 Node 命令行工具

如需安装 Node 模块,请执行以下操作:

  1. 下载桌面版 Google Chrome
  2. 安装 Node 的当前长期支持版本。
  3. 安装 Lighthouse。-g 标记将其安装为全局模块。
npm install -g lighthouse

如需运行审核,请执行以下操作:

lighthouse <url>

如需查看所有选项,请执行以下操作:

lighthouse --help

以编程方式运行 Node 模块

如需查看以节点模块形式以编程方式运行 Lighthouse 的示例,请参阅以编程方式使用

运行 PageSpeed Insights

要在 PageSpeed Insights 上运行 Lighthouse,请执行以下操作:

  1. 访问 PageSpeed Insights
  2. 输入网页网址。
  3. 点击分析

    PageSpeed Insights 界面
    PageSpeed Insights 界面

将 Lighthouse 作为 Chrome 扩展程序运行

如需安装该扩展程序,请执行以下操作:

  1. 下载桌面版 Google Chrome
  2. 从 Chrome 应用商店安装 Lighthouse Chrome 扩展程序

如需运行审核,请执行以下操作:

  1. 在 Chrome 中,前往您要审核的网页。
  2. 点击 Lighthouse 扩展程序 icion Lighthouse。该按钮应位于 Chrome 地址栏的旁边。如果没有,请打开 Chrome 的扩展程序菜单,然后从中访问此扩展程序。点击后,系统会展开 Lighthouse 菜单。

    Lighthouse 扩展程序
    Lighthouse 扩展程序面板

  3. 点击生成报告。Lighthouse 针对当前聚焦的页面运行审核,然后打开一个包含结果报告的新标签页。

    Lighthouse 扩展程序报告
    扩展程序中的 Lighthouse 报告

在线共享和查看报告

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

Lighthouse 查看器
Lighthouse 查看器

以 JSON 格式分享报告

Lighthouse 查看器需要 Lighthouse 报告的 JSON 输出。以下列表介绍了如何获取 JSON 输出,具体取决于您使用的 Lighthouse 工作流:

  • Lighthouse 报告。打开右上角的 “菜单”图标 菜单,然后点击 “另存为 JSON”按钮 另存为 JSON
  • 命令行。运行:shell lighthouse --output json --output-path <path/for/output.json>

若要查看报告数据,请按以下步骤操作:

  1. 打开 Lighthouse 查看器
  2. 将 JSON 文件拖动到查看器中,或点击查看器中的任意位置以打开文件导航器,然后选择该文件。

以 GitHub Gists 身份共享报告

如果您不想手动传递 JSON 文件,还可以以 Secret 要点的形式共享您的报告。gists 的一个好处是免费的版本控制。

如需将报告作为 gist 从报告中导出,请执行以下操作:

  1. (如果查看器中已有,请跳过此步骤)打开右上角的 “菜单”图标 菜单,然后点击 “在查看器中打开”按钮 在查看器中打开。报告会在查看器 (https://googlechrome.github.io/lighthouse/viewer/) 中打开。
  2. 在查看器中,打开右上角的 “菜单”图标 菜单,然后点击 “在查看器中打开”按钮 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 有关的内容。