前端 Lighthouse CI：Web 应用的持续性能监控

在当今快节奏的数字环境中，网站性能至关重要。加载缓慢或优化不佳的网站会导致用户失望、参与度下降，并最终对您的业务产生负面影响。 这就是 Lighthouse CI 发挥作用的地方。本指南将引导您实施 Lighthouse CI 以进行持续性能监控，使您能够在性能瓶颈影响用户之前主动识别并解决它们。

什么是 Lighthouse CI？

Lighthouse CI 是一个开源的自动化性能测试工具，可无缝集成到您的持续集成和持续交付 (CI/CD) 流程中。它利用 Google 的 Lighthouse 审计工具，为您的网站性能、可访问性、SEO 和最佳实践提供可操作的见解。通过将 Lighthouse CI 纳入您的工作流程，您可以持续监控网站性能、跟踪回归问题，并确保每次代码更改都有助于提升用户体验。Lighthouse CI 不与任何特定的云提供商绑定，可以与不同的设置一起使用。例如，它可以在 Github Actions、Jenkins、CircleCI 等服务的 Docker 容器内运行。

为什么使用 Lighthouse CI？

实施 Lighthouse CI 带来了诸多好处：

• 及早发现性能回归：在新代码变更推向生产环境之前，识别其引入的性能问题。
• 提升网站性能：获得关于如何优化网站速度、可访问性和 SEO 的可操作见解。
• 增强用户体验：提供一个更快、更友好的网站，以保持访客的参与度。
• 降低跳出率：优化加载时间，减少用户挫败感，防止他们离开您的网站。
• 提高转化率：更快的网站通常会带来更高的转化率和更好的业务成果。
• 自动化性能测试：将性能测试集成到您的 CI/CD 流程中，实现持续监控。
• 数据驱动决策：基于具体的性能指标和见解来进行优化工作。
• 长期性能跟踪：长期监控您网站的性能，以识别趋势并衡量优化措施的影响。

Lighthouse CI 的主要特性

• 自动化审计：作为 CI/CD 流程的一部分，自动运行 Lighthouse 审计。
• 性能预算：设置性能预算，确保您的网站保持在可接受的性能阈值内。
• 回归跟踪：长期跟踪性能回归，使您能够识别导致问题的代码变更。
• 可操作的见解：提供详细报告，其中包含有关如何提升网站性能的可操作建议。
• 可自定义配置：根据您的特定需求和要求配置 Lighthouse CI。
• 与 CI/CD 工具集成：与 Jenkins、CircleCI、GitHub Actions 和 GitLab CI 等流行的 CI/CD 工具无缝集成。
• 开源：Lighthouse CI 是一个开源项目，意味着它可以免费使用和修改。

设置 Lighthouse CI：分步指南

以下是为您的项目设置 Lighthouse CI 的综合指南：

1. 安装 Lighthouse CI CLI

首先，您需要使用 npm 或 yarn 全局安装 Lighthouse CI 命令行界面 (CLI)：

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. 配置 Lighthouse CI

在您的项目根目录下创建一个 lighthouserc.js 文件来配置 Lighthouse CI。该文件定义了要审计的 URL、断言规则和其他配置选项。

这是一个 lighthouserc.js 文件的基本示例：

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

说明：

• collect.url：指定要由 Lighthouse 审计的 URL。在此示例中，我们审计的是运行在 localhost:3000 上的网站主页和“关于”页面。请记得将其替换为与*您*项目相关的 URL，其中可能包括预发布环境。
• assert.preset：使用 lighthouse:recommended 预设，它会根据 Lighthouse 的建议应用一组预定义的断言。这是一个很好的起点，但您可以根据需要自定义这些断言。
• upload.target：配置 Lighthouse CI 结果的上传位置。temporary-public-storage 对于测试和开发很有用，但对于生产环境，您通常需要使用更持久的存储解决方案（稍后讨论）。

3. 将 Lighthouse CI 集成到您的 CI/CD 流程中

下一步是将 Lighthouse CI 集成到您的 CI/CD 流程中。具体步骤将根据您的 CI/CD 提供商而有所不同，但一般过程包括在您的 CI/CD 配置中添加一个脚本来运行 Lighthouse CI 命令。

使用 GitHub Actions 的示例：

在您的仓库中创建一个名为 .github/workflows/lighthouse-ci.yml 的文件，并包含以下内容：

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

说明：

• on.push.branches：在推送到 main 分支时触发工作流。
• on.pull_request：在拉取请求时触发工作流。
• jobs.lighthouse.runs-on：指定作业要使用的操作系统（本例中为 Ubuntu）。
• steps：定义作业中要执行的步骤：
• actions/checkout@v3：检出仓库。
• actions/setup-node@v3：设置 Node.js。
• npm ci：安装依赖项。
• Run Lighthouse CI：运行 Lighthouse CI 命令：
• npm install -g @lhci/cli@0.11.x：全局安装 Lighthouse CI CLI。*重要提示*：始终建议锁定一个特定版本。
• lhci autorun：在“autorun”模式下运行 Lighthouse CI，它会自动收集审计、断言性能预算并上传结果。

CI/CD 集成的重要注意事项：

• 服务器启动：在运行 lhci autorun 之前，请确保您的 Web 服务器正在运行（例如，npm start）。您可能需要在 CI/CD 配置中添加一个步骤来在后台启动您的服务器。
• 数据库迁移：如果您的应用程序依赖于数据库，请确保在运行 Lighthouse CI *之前*，数据库迁移已作为 CI/CD 流程的一部分运行。
• 环境变量：如果您的应用程序需要环境变量，请确保这些变量在您的 CI/CD 环境中已正确配置。

4. 运行 Lighthouse CI

现在，每当您将更改推送到 main 分支或创建拉取请求时，Lighthouse CI 工作流将自动运行。结果将在 GitHub Actions 界面中可用。

5. 查看 Lighthouse CI 结果

Lighthouse CI 结果将被上传到您在 lighthouserc.js 文件中指定的位置（例如，temporary-public-storage）。您可以通过 CI/CD 输出中提供的链接访问这些结果。这些结果提供了有关您网站性能、可访问性、SEO 和最佳实践的详细信息。

配置断言和性能预算

Lighthouse CI 允许您配置断言和性能预算，以确保您的网站达到性能目标。断言是检查特定性能指标（例如，First Contentful Paint, Largest Contentful Paint）是否符合预定义阈值的规则。性能预算则为各种性能指标定义了可接受的限制。

以下是如何在您的 lighthouserc.js 文件中配置断言的示例：

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

说明：

• first-contentful-paint：为首次内容绘制 (FCP) 设置 2000 毫秒的警告阈值。
• largest-contentful-paint：为最大内容绘制 (LCP) 设置 2500 毫秒的警告阈值。
• cumulative-layout-shift：为累积布局偏移 (CLS) 设置 0.1 的警告阈值。
• total-blocking-time：为总阻塞时间 (TBT) 设置 500 毫秒的警告阈值。
• categories:performance：为整体性能类别分数设置 0.9 的警告阈值。
• categories:accessibility：为整体可访问性类别分数设置 0.8 的错误阈值。

断言级别：

• off：禁用断言。
• warn：如果断言失败，则显示警告。
• error：如果断言失败，则 Lighthouse CI 运行失败。

自定义断言：

您可以自定义断言以满足您的特定需求。例如，您可能希望为关键性能指标设置更严格的阈值，或禁用与您的应用程序无关的断言。

选择 Lighthouse CI 上传目标

您 lighthouserc.js 文件中的 upload.target 选项指定了 Lighthouse CI 结果的上传位置。temporary-public-storage 目标对于测试和开发很方便，但它不适合生产环境，因为数据不是持久的。

以下是一些替代的上传目标：

• Lighthouse CI 服务器：生产环境的推荐方法是使用 Lighthouse CI 服务器。Lighthouse CI 服务器为您的 Lighthouse CI 结果提供了一个持久的存储解决方案，以及一个用于查看和分析数据的用户界面。它可以部署到各种云提供商或托管在您自己的基础设施上。
• Google Cloud Storage：您可以将 Lighthouse CI 结果上传到 Google Cloud Storage 存储桶。这是一个经济高效且可扩展的数据存储解决方案。
• Amazon S3：与 Google Cloud Storage 类似，您可以将 Lighthouse CI 结果上传到 Amazon S3 存储桶。

设置 Lighthouse CI 服务器：

设置 Lighthouse CI 服务器涉及以下步骤：

1. 安装 Lighthouse CI 服务器：您可以使用 npm 或 yarn 安装 Lighthouse CI 服务器：

            npm install -g @lhci/server
yarn global add @lhci/server
            

              
                Copy
              
            
          

2. 配置数据库：Lighthouse CI 服务器需要一个数据库来存储其数据。您可以使用多种数据库，包括 PostgreSQL、MySQL 和 SQLite。在 .env 文件中配置数据库连接设置。
3. 启动 Lighthouse CI 服务器：使用 lhci server 命令启动 Lighthouse CI 服务器。
4. 配置 Lighthouse CI CLI 以使用服务器：更新您的 lighthouserc.js 文件，以使用 Lighthouse CI 服务器作为上传目标：

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

将 http://your-lhci-server.com 替换为您的 Lighthouse CI 服务器的 URL，并将 YOUR_LHCI_TOKEN 替换为您的项目的访问令牌。

使用 Lighthouse CI 的最佳实践

为了充分利用 Lighthouse CI，请遵循以下最佳实践：

• 在每次代码更改时运行 Lighthouse CI：将 Lighthouse CI 集成到您的 CI/CD 流程中，以便在每次代码更改时运行审计。这将帮助您及早发现性能回归。
• 设置性能预算：定义性能预算，以确保您的网站保持在可接受的性能阈值内。
• 监控性能趋势：长期跟踪您网站的性能，以识别趋势并衡量优化措施的影响。
• 优先处理优化工作：首先专注于优化最关键的性能指标。
• 使用真实世界的数据：使用真实世界的数据来指导您的优化工作。例如，您可以使用 Google Analytics 来识别用户最常访问的页面。
• 在真实设备上测试：在真实设备上测试您的网站，以确保它在真实世界的条件下表现良好。
• 定期审查 Lighthouse CI 结果：确保定期审查 Lighthouse CI 结果，并采取行动解决任何已识别的性能问题。
• 优化图像：优化您的图像以减小其文件大小而不牺牲质量。ImageOptim (macOS)、TinyPNG 和 ImageKit 等工具对此很有用。
• 压缩 CSS 和 JavaScript：压缩您的 CSS 和 JavaScript 文件以减小其大小。UglifyJS 和 CSSNano 等工具可以帮助您完成此项工作。
• 利用浏览器缓存：利用浏览器缓存来减少您的网站向服务器发出的请求数量。
• 使用内容分发网络 (CDN)：使用 CDN 将您网站的内容分发到世界各地的服务器。这可以改善不同地理位置用户的加载时间。Cloudflare 和 Amazon CloudFront 等服务是流行的 CDN。
• 延迟加载屏幕外图像：为屏幕上非立即可见的图像实施延迟加载。这可以显著改善初始页面加载时间。loading="lazy" 属性可用于简单的延迟加载。
• 消除渲染阻塞资源：识别并消除阻塞页面渲染的资源。这通常涉及内联关键 CSS 和延迟加载非关键 CSS 和 JavaScript。
• 减少 JavaScript 执行时间：分析您的 JavaScript 代码以识别和优化运行缓慢的函数。代码分割和摇树优化 (tree shaking) 等技术有助于减少需要下载和执行的 JavaScript 数量。

高级 Lighthouse CI 技术

一旦您熟悉了 Lighthouse CI 的基础知识，就可以探索一些高级技术来进一步增强您的性能监控：

• 自定义 Lighthouse 审计：您可以创建自定义 Lighthouse 审计来测试与您的应用程序相关的特定性能问题。
• 无头 Chrome 配置：配置无头 Chrome 以使用特定的设备模拟或网络节流设置。
• 与监控工具集成：将 Lighthouse CI 与您现有的监控工具（例如，New Relic、Datadog）集成，以获得对您网站性能更全面的了解。
• 可视化回归测试：将 Lighthouse CI 与可视化回归测试工具结合使用，以检测可能影响性能的视觉变化。

面向全球受众的 Lighthouse CI：国际化网站的注意事项

当为面向全球受众的网站使用 Lighthouse CI 时，请考虑以下几点：

• 从多个地点进行测试：服务器响应时间会因用户位置而有显著差异。使用 CDN（内容分发网络）并考虑从不同地理区域运行 Lighthouse CI 审计，以便为您的国际用户获得更准确的性能概况。一些 CI/CD 提供商提供指定运行器地理位置的选项。
• 考虑网络条件：全球各地的网络速度和延迟差异很大。在您的 Lighthouse CI 审计期间模拟不同的网络条件，以了解您的网站在各种限制下的表现。Lighthouse 允许您对网络连接进行节流，模拟像 3G 这样的慢速连接。
• 内容本地化：确保您的本地化内容得到适当优化。这包括针对不同语言和字符集的图像优化，以及为避免显示问题而进行的正确编码。
• 字体加载：优化不同语言的字体加载。考虑使用 font-display: swap 来防止在字体加载期间文本不可见。
• 第三方脚本：注意第三方脚本，因为它们会显著影响性能，特别是对于网络连接较慢地区的用户。定期审计第三方脚本的性能，并考虑异步加载或自托管关键脚本。
• 移动端优化：移动设备的使用在世界许多地区都很普遍。确保您的网站针对移动设备进行了优化，并且您的 Lighthouse CI 审计包括针对移动设备的测试。

Lighthouse CI 常见问题故障排除

以下是您在使用 Lighthouse CI 时可能遇到的一些常见问题及其解决方法：

• Lighthouse CI 因“超时”错误而失败：如果您的网站加载时间过长，或者 Lighthouse CI 无法连接到您的网站，可能会发生这种情况。尝试增加 lighthouserc.js 文件中的超时值，或检查您网站的服务器日志以查找错误。
• Lighthouse CI 报告不一致的结果：由于网络条件或其他因素，Lighthouse 的结果在每次运行之间可能会有轻微差异。运行多次审计以获得更稳定的平均值。
• Lighthouse CI 无法上传结果：检查您的 upload.target 配置，并确保您的 Lighthouse CI 服务器正在运行且可访问。同时，验证您是否配置了正确的访问令牌。
• Lighthouse CI 报告意外的性能回归：调查在检测到回归之前所做的代码更改。使用 Lighthouse CI 报告来确定哪些特定性能指标出现了回归，并将您的优化工作集中在这些领域。

结论

前端 Lighthouse CI 是一个用于对 Web 应用进行持续性能监控的强大工具。通过将 Lighthouse CI 集成到您的 CI/CD 流程中，您可以主动识别和解决性能问题，确保您的网站提供最佳的用户体验。请记住，为了给世界各地的用户创造最佳体验，您需要根据全球受众调整您的设置、断言规则和测试地点。

通过遵循本指南中概述的步骤和最佳实践，您可以显著提高网站的性能、降低跳出率、提高转化率，并最终实现您的业务目标。立即开始实施 Lighthouse CI，释放您 Web 应用的全部潜力。