Lighthouse 简介

Lighthouse ���������可帮助���提高网页质量的开源自动化工具。您可以在任何网页(公开网页或需要身份验证的网页)上运行该脚本。它针对性能、无障碍功能、渐进式 Web 应用、搜索引擎优化 (SEO) 等进行审计。

您可以在 Chrome DevTools 中、通过命令行或作为 Node 模块运行 Lighthouse。为 Lighthouse 提供一个要审核的网址,它会对此页面运行一系列审核,然后生成有关该网页性能的报告。您可以将失败的审核作为指标,了解如何改进网页。每项审核都有参考信息,说明该审核的重要性以及如何解决问题。

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

开始使用

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

在 Chrome 开发者工具中运行 Lighthouse

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

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

    左侧是待审核网页的视口。右侧是 Chrome 开发者工具的 Lighthouse 面板。

  5. 点击分析网页加载情况。DevTools 会显示审核类别列表。 请将其全部保持启用状态。

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

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

安装并运行 Node 命令行工具

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

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

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

lighthouse <url>

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

lighthouse --help

以编程方式运行 Node 模块

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

运行 PageSpeed Insights

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

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

    PageSpeed Insights 网站。

将 Lighthouse 作为 Chrome 扩展程序运行

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

  1. 下载适用于桌面的 Google Chrome
  2. 从 Chrome 应用商店安装 Chrome 扩展程序“Lighthouse”

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

  1. 在 Chrome 中,前往您要审核的网页。
  2. 点击 Chrome 地址栏旁边或 Chrome 的扩展程序菜单中的 Lighthouse。 点击后,Lighthouse 菜单会展开。

    扩展程序会提示您生成报告。

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

    通过扩展程序生成的 Lighthouse 报告。

在线共享和查看报告

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

Lighthouse 查看器

以 JSON 格式分享报告

Lighthouse 查看器需要 Lighthouse 报告的 JSON 输出。生成 JSON 输出,如下所示:

  • 根据 Lighthouse 报告。点击 打开菜单,然后点击 Save as JSON(另存为 JSON)
  • 命令行。运行:shell lighthouse --output json --output-path <path/for/output.json>

如需查看报告数据,请执行以下操作:

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

以 GitHub Gists 形式共享报告

如果您不想手动传递 JSON 文件,也可以作为 Secret GitHub gists 共享报告。代码段的一个好处是免费提供版本控制功能。

如需将报告导出为摘要,请执行以下操作:

  1. 点击 菜单,然后点击 Open In Viewer(在查看器中打开)。该报告位于 https://googlechrome.github.io/lighthouse/viewer/
  2. 在查看器中,点击 菜单,然后点击 另存为 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 有关的任何其他内容。