使用 Google Lighthouse 提高应用性能

2025-06-07

使用 Google Lighthouse 提高应用性能

介绍

随着网站和 Web 应用程序变得越来越复杂，有必要衡量和跟踪它们的整体质量，以便为客户提供无缝的浏览体验。虽然还有其他一些工具可以实现此目的，但 Google Lighthouse 在 Web 开发者中非常受欢迎，主要是因为它是 Chrome DevTools 的一部分。

如果 Chrome DevTools 中的 Google Lighthouse 无法满足您的需求，您也可以通过 Node 软件包或命令行实用程序轻松获取。您可以使用它来审核网站的性能、最佳实践、可访问性、渐进式 Web 应用 (PWA) 和搜索引擎优化 (SEO)。

您将在本文中探索 Google Lighthouse 的不同使用方式。您还将学习如何解决性能测量中突出显示的一些问题，以及如何在持续集成 (CI) 工作流中使用 Google Lighthouse。

我们将介绍的步骤：

必备工具

根据您打算如何使用 Google lighthouse，您需要拥有以下部分或全部工具。

什么是 Google Lighthouse

Google Lighthouse 是一款由 Google 开发和维护的开源 Apache 许可工具。它主要作为 Chrome DevTools 和其他基于 Chromium 的浏览器（例如 Opera、Brave 和 Edge）的一部分分发。

您可以用它来审核网页或浏览器扩展程序，主要针对性能、最佳实践、可访问性、PWA 和 SEO。它以百分比形式呈现测试结果，并进一步提供可操作的技巧，帮助您修复指定类别中已发现的问题。

虽然使用 Google Lighthouse 最简单的方式是通过 Chrome DevTools，但您也可以将其作为 Chrome 扩展程序、命令行工具或 NPM 软件包运行。后续部分将介绍使用 Google Lighthouse 的不同方式。

如何通过 Chrome DevTools 使用 Google Lighthouse

大多数基于 Chromium 的浏览器都将 Google Lighthouse 集成到其 DevTools 中，但本文将重点介绍 Chrome DevTools。在其他浏览器中的使用方法类似，但略有不同。

按照以下步骤开始在 Chrome DevTools 中使用 Google lighthouse。

步骤 1 - 导航到您要审核的网站

要在 Chrome DevTools 中使用 Google Lighthouse，请导航到您要审核的网站。  本文将使用优化的落地页进行演示。

第 2 步 - 打开 Chrome DevTools

按下 F12 键即可打开 Chrome DevTools。然后点击灯塔标签页。

开发者工具

步骤 3 - 选择要审核的类别

正如简介部分所述，您可以使用 Google Lighthouse 审核网站的性能、可访问性、最佳实践、SEO 和 PWA。您可以选择希望 Google Lighthouse 审核的不同类别。如果您的网站不以 PWA 形式运行，则无需保留 PWA 类别。

同样，您可以选择 Google lighthouse 在审核您的网站时是否应该模拟移动设备或桌面。

步骤 4 - 运行审计

您可以点击Analyze page load按钮开始审核网站。

步骤 5 - 解释审计结果

成功分析页面后，Google Lighthouse 会显示 Lighthouse 评分，并提供改进建议。 优化 落地页的 Lighthouse 评分如下图所示。

所有类别的灯塔评分

您可以从工具菜单复制并以 JSON 格式保存审计数据。

如上所述，Google Lighthouse 会在模拟移动设备或桌面设备的同时，审核网页的性能、最佳实践、可访问性、SEO 和 PWA。它会以百分比的形式显示每个类别的得分。此外，它还会详细解释特定类别的测试通过或未通过的原因。我们将在下面的小节中概述这些类别。


GitHub 支持横幅

最佳实践

在前端开发中，您需要遵循一些最佳实践。这些最佳实践包括：添加doctype到HTML元素、使用 HTTPS、以正确的宽高比显示图像以及以适当的分辨率提供图像。Google Lighthouse 会审核您的网站，以找出其中的一些最佳实践，并突出显示通过和未通过的测试。

表现

性能衡量是开发者使用 Google Lighthouse 的主要原因之一。Google Lighthouse 使用以下指标来估算最终的性能得分。

  • 首次内容绘制 - 导航到页面后渲染第一个 DOM 内容所需的时间（以秒为单位）。
  • 交互时间 - 页面完全交互所需的时间（以秒为单位）。
  • 速度指数 - 以秒为单位衡量页面加载过程中内容视觉显示的速度。
  • 总阻塞时间 - 页面无法响应用户输入（如鼠标点击）的总时间（以毫秒为单位）。
  • 最大内容绘制 - 浏览器绘制最大文本或图像的时间（以秒为单位）。
  • 累积布局偏移 - 测量视口内可见元素的移动。

最终得分是上述各项指标得分的加权平均值。此得分可以帮助您优化网站，以便用户能够更好地查看网站并与之互动。它还能突出显示加快页面加载速度的潜在机会。阅读文档， 了解 更多关于各项指标得分以及 Lighthouse 如何计算最终加权得分的信息。

无障碍设施

Google Lighthouse 可以审核您的网站，并突出显示可访问性问题，例如对比度、输入标签和标题元素。但是，它只能检测到一定比例的可访问性问题。您需要更进一步，手动检查一些可访问性问题。一个网页的可访问性得分可能为 100%，但仍然无法访问。

渐进式 Web 应用

渐进式 Web 应用（简称 PWA）可以为您的客户提供原生体验。您的 PWA 必须可安装，并且应从安全的来源提供服务。您可以使用 Google Lighthouse 测试您的 PWA 的一些基本功能和最佳实践。

搜索引擎优化

如今，针对搜索引擎优化网站已是必然趋势。Google Lighthouse 可以审核您的网站的 SEO 表现。它还能检查您的网站是否包含带有描述性文字的链接，以及是否可抓取。您可以利用测试结果来提升搜索排名。

值得一提的是，Google Lighthouse 的新版本以三种模式（用户流）运行。这些模式分别是导航模式、时间跨度模式和快照模式。

导航模式会分析单次页面加载，这是默认模式。本文将始终使用默认模式。时间跨度模式会分析任意时间段，通常是用户与页面交互时。另一方面，快照模式会分析页面处于特定状态时的快照。

每种模式都有其独特的用例、优势和局限性，  Lighthouse 文档 对此进行了详细的阐述。请务必查看。如果默认模式无法满足您的用例，您可以选择其他模式，然后再进行分析。


GitHub 支持横幅

如何使用 Google Lighthouse Node CLI

您可以灵活地将 Google Lighthouse 作为命令行工具运行。该命令行工具要求您安装 Node 14 或更高版本。如果您没有 Node，可以从 Node 下载页面为您的系统安装。

如果您已经安装了 Node，则可以从 NPM 包注册表安装 lighthouse，如下所示：

# NPM
npm install -g lighthouse

# Yarn
yarn global add lighthouse
Enter fullscreen mode Exit fullscreen mode

以下代码展示了使用命令行工具运行审核的常规语法。该lighthouse命令需要您要审核的页面的 URL。您还可以向该lighthouse命令传递可选参数。

lighthouse <url> <options>
Enter fullscreen mode Exit fullscreen mode

Google lighthouse 命令行工具具有全面的文档，可使用以下命令访问。

lighthouse --help
Enter fullscreen mode Exit fullscreen mode

命令行工具将默认生成审核报告并将其写入 HTML 文件。您可以将可选参数传递给 lighthouse 命令来更改默认行为。以下代码将审核 优化着陆页的可访问性，并将报告写入 JSON 文件。您可以使用lighthouse 查看器 查看 JSON 报告 。

lighthouse https://refine.dev/  --output=json --output-path=./report.json --only-categories=accessibility
Enter fullscreen mode Exit fullscreen mode

您可以阅读文档以获取传递给lighthouse命令的更多选项。

如何使用 Google Lighthouse Node 模块

除了将 Google Lighthouse 作为命令行工具运行之外，您还可以通过编程方式将其作为 Node 模块运行。您很可能需要从 NPM 软件包注册表中将 Lighthouse 安装为开发依赖项，如下所示：

# NPM

npm i -D lighthouse

# Yarn

yarn add --dev lighthouse
Enter fullscreen mode Exit fullscreen mode

通常，以编程方式运行 Lighthouse 时，您会在运行 Lighthouse 之前启动一个 Chrome 实例，如下例所示。下面，我们将使用该chrome-launcher软件包启动一个无头 Chrome 实例。它是一个从 Node 轻松启动 Google Chrome 的工具。查看 文档 以了解如何使用它。运行 Lighthouse 后，您可以将审核数据保存到文件并终止 Chrome 实例。

在我们的例子中，Lighthouse 将您要审核的网站的 URL 作为其第一个参数。如果您在 中运行 Lighthouse，则第一个参数是可选的auditMode。第二和第三个参数也是可选的。如果您不传递它们，Lighthouse 将使用默认值。

const fs = require("fs");
const chromeLauncher = require("chrome-launcher");
const lighthouse = require("lighthouse");

const launchChromeAndAudit = async (url) => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ["--headless"] });
  const result = await lighthouse(url, {
    output: "json",
    logLevel: "info",
    port: chrome.port,
    onlyCategories: ["accessibility"],
    screenEmulation: { mobile: true },
  });
  fs.writeFileSync(`${Date.now()}-audit-report.json`, result.report);
  chrome.kill();
};

launchChromeAndAudit("https://refine.dev/");
Enter fullscreen mode Exit fullscreen mode

上述代码将审核 精炼着陆页的 可访问性，并将报告保存为 JSON 格式的文件。之后，您可以将数据上传到 Lighthouse Viewer 并在浏览器中查看。省略该onlyCategories字段将审核网站的所有类别。

您还可以通过将输出字段的值设置为html而不是json，将审计报告保存为 HTML 文件，就像我们在上面的示例中所做的那样。上面提供的是一个简单的示例。  有关如何以编程方式运行 Google Lighthouse 的更多信息，请参阅文档。

如何使用 Google Lighthouse Chrome 浏览器扩展程序

Google Lighthouse 除了是 Chrome DevTools 的一部分外，还附带一个浏览器扩展程序。该浏览器扩展程序不支持测试本地站点和已验证的页面。因此，建议使用 Chrome DevTools 中的 Google Lighthouse，而不是浏览器扩展程序。

如果您有充分的理由使用该浏览器扩展程序，可以从 Chrome 网上应用店安装。安装后，请按照以下步骤使用 Lighthouse 浏览器扩展程序来审核任何网站。

步骤 1 - 导航到您要审核的网站

就像在 Chrome DevTools 中使用 Google Lighthouse 一样，首先导航到您要审核的网站。在本例中，导航到 优化目标网页。

第 2 步 - 打开扩展程序弹出窗口

点击 Chrome 工具栏中的扩展程序图标，打开 Google lighthouse chrome 扩展程序弹出窗口。

Lighthouse 扩展下拉菜单

步骤 3 - 选择要审核的类别

正如简介部分所述，您可以审核网站的性能、可访问性、最佳实践、SEO 和 PWA。在扩展程序弹出窗口中，您可以点击齿轮图标来选择要审核的类别和要模拟的设备。

步骤 4 - 生成报告

最后，点击“生成报告”按钮生成审计报告。该报告应该与我们在 Chrome DevTools 中运行 Google Lighthouse 后得到的报告类似。您也可以将数据保存为 HTML 或 JSON 格式。

如何使用 Google Lighthouse 审核渐进式 Web 应用

如上所述，Google Lighthouse 可以审核网站的性能、最佳实践、可访问性、SEO 和 PWA。除了可安装之外，渐进式 Web 应用还具备多项渐进式增强功能。您可以使用 Google Lighthouse 来验证网站是否可安装或是否针对 PWA 进行了优化。

如果您导航到Refine 的落地页并使用 Lighthouse 审核网站的 PWA 功能和最佳实践，您将获得类似下图的报告。由于Refine并非 PWA，因此大多数测试都会失败。Google Lighthouse 会高亮显示失败的测试，并提供解释该功能的文档链接。

灯塔 pwa

值得一提的是，PWA 拥有多项功能和最佳实践可供遵循。Google Lighthouse 只能审核其中的一小部分功能。您需要手动检查其中一些功能。Google Lighthouse 还会提示您需要手动检查的项目。

如何查看 Google 灯塔报告

通过 Chrome DevTools 或浏览器扩展程序使用 Google Lighthouse 将生成报告并立即显示在浏览器中。根据您使用 Google Lighthouse 的方式，您还可以将性能数据保存为 HTML 或 JSON 格式。

通过在浏览器中打开 HTML 文件或将 JSON 格式的数据上传到 Lighthouse Viewer来查看报告。使用 Lighthouse Viewer时，可以将 JSON 数据保存在 GitHub Gist 中，并使用 Gist URL，而不必从存储设备上传数据。

如何将 Google Lighthouse 添加到 CI 工作流程

如果您的团队使用持续集成工作流程，您可以使用 Google Lighthouse CI 工具集将 Google Lighthouse 作为工作流程的一部分运行。根据 文档，Google Lighthouse CI 是一套工具，可简化在 CI 工作流程中运行 Google Lighthouse 评分的过程。

Lighthouse CI 可与 Circle CI、GitHub Actions 和 Travis CI 等 CI 提供商配合使用。请按照以下步骤了解如何将其与 GitHub Actions 结合使用。

步骤 1 - 创建 GitHub Actions 工作流目录

.github/workflow在项目目录的根目录下创建一个目录来存储您的 GitHub 工作流文件，以开始使用 GitHub 操作。

第 2 步 - 创建 GitHub Actions 工作流文件

创建一个 YAML 工作流文件，其中包含在特定事件发生时运行 Google Lighthouse CI 的代码。我们将在push或pull_request事件发生时运行 Google Lighthouse CI。请为该 YAML 文件指定一个描述性名称。我将其命名为lighthouse.yaml。

将以下代码复制并粘贴到您刚刚创建的 YAML 文件中。当您将更改推送到 Git 仓库或打开拉取请求时，该代码就会运行。我这里举个最简单的例子，即项目根目录下有一个 HTML 文件。如果您的项目需要构建步骤，您可以稍微修改一下工作流文件。

name: Run lighthouse CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Run lighthouse CI
        run: | 
          npm install -g @lhci/cli@0.3.x && lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./
Enter fullscreen mode Exit fullscreen mode

上述示例还假设您的项目目录根目录中没有配置文件。

步骤 3 - 将更改推送到 GitHub

上述代码会在您提交更改并将其推送到 GitHub 时运行 Google Lighthouse CI。每当有人打开拉取请求或推送提交时，GitHub Actions 都会运行指定的命令，以便您随时了解代码的回归情况。

GitHub 绝不是唯一的 CI 提供商。您可以将 Google Lighthouse 与其他 CI 工具（例如 Circle CI 和 Travis CI）一起运行。Google Lighthouse CI 文档介绍了所有受支持的 CI 提供商。

结论

您可以使用 Google Lighthouse 审核网站或应用程序的性能、可访问性、最佳实践、SEO 和 PWA。您可以根据自己的喜好，将 Chrome DevTools 用作 Chrome 扩展程序、命令行工具或 Node 模块。其他几款基于 Chromium 的浏览器（例如 Opera、Edge 和 Brave）也将 Google Lighthouse 集成到其 DevTools 中。

另一方面，值得一提的是，Google Lighthouse 只是一个工具。工具的好坏取决于用户。力争获得最高的 Google Lighthouse 评分固然值得称赞，但这还不够。Google Lighthouse 通常存在缺陷的一个很好的例子就是可访问性审核。一个拥有完美 Google Lighthouse 可访问性评分的网站，却无法访问，这种情况很常见。

因此，即使您的网站拥有完美的 Google Lighthouse 可访问性评分，也必须竭尽全力，让实际用户测试您的网站。我们在本文中介绍了 Google Lighthouse。请查看文档，获取更深入的指南。

编剧: 约瑟夫·马瓦


不和谐横幅

不受限制地构建基于 React 的 CRUD 应用程序

构建 CRUD 应用程序涉及许多重复性任务，耗费您宝贵的开发时间。如果您从头开始，则还必须为应用程序的关键部分（例如身份验证、授权、状态管理和网络）实现自定义解决方案。

如果您对具有强大架构且充满行业最佳实践的无头框架感兴趣，可以将其用于您的下一个 CRUD 项目，请查看refine 。


完善博客徽标

refine是一个基于 React 的开源框架，用于构建不受约束的 CRUD 应用程序。
它可以将您的开发时间加快3 倍，同时又不影响样式、自定义和项目工作流程的自由度。

refine在设计上是无头的，它可以开箱即用地连接30 多个后端服务，包括自定义 REST 和 GraphQL API。

访问完善的 GitHub 存储库以获取更多信息、演示、教程和示例项目。

文章来源：https://dev.to/refine/using-google-lighthouse-to-improve-app-performance-2bfn
Devto 翻译
PREV
Como escrever um README.md 在 Github 上引起轰动
NEXT
如何使用 Mantine 和 Strapi 构建 React 管理面板