前端性能测试：集成 Lighthouse CI 以实现持续改进

在当今的数字时代，网站性能至关重要。缓慢的加载时间、可访问性问题和糟糕的 SEO 会严重影响用户体验，进而影响业务成果。前端性能测试已成为现代软件开发生命周期的重要组成部分，确保网站和 Web 应用程序为全球受众提供快速、可靠和用户友好的体验。本文深入探讨如何将强大的开源工具 Lighthouse CI 集成到您的持续集成 (CI) 流程中，以自动化前端性能测试并推动持续改进。

为什么前端性能测试如此重要？

在深入了解 Lighthouse CI 之前，让我们先理解为什么前端性能测试至关重要：

• 用户体验： 一个快速且响应迅速的网站能提供更好的用户体验，从而提高用户参与度并降低跳出率。想象一下，一位来自日本东京的潜在客户试图在一个加载缓慢的电子商务网站上购买产品。他们很可能会放弃该网站并寻找替代品。
• SEO 排名： 像谷歌这样的搜索引擎将网站速度和性能视为排名因素。速度更快的网站往往在搜索结果中排名更高，从而带来更多的自然流量。谷歌的“核心网页指标” (Core Web Vitals) 计划强调了最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS) 等因素对 SEO 的重要性。
• 可访问性： 性能改进通常会为残障用户带来更好的可访问性。优化的代码和图像可以改善依赖屏幕阅读器或带宽有限的用户的体验。
• 转化率： 更快的网站可以直接影响转化率。研究表明，即使页面加载时间延迟一秒，也可能导致转化率大幅下降。想一想，一位在印度孟买的用户试图预订航班。缓慢的预订过程可能会导致他们放弃购买并选择竞争对手。
• 资源优化： 性能测试有助于识别可以优化资源的领域，从而节省服务器基础设施和带宽使用方面的成本。

Lighthouse CI 简介

Lighthouse CI 是一个开源的自动化工具，旨在与您的 CI/CD 流程无缝集成。它运行由谷歌开发的流行审计工具 Lighthouse，并提供关于您网站的性能、可访问性、SEO、最佳实践和渐进式 Web 应用 (PWA) 合规性的见解。Lighthouse CI 帮助您：

• 自动化性能审计： 在每次提交或拉取请求时自动运行 Lighthouse 审计。
• 长期跟踪性能： 监控性能指标随时间的变化，并及早发现性能衰退。
• 设置性能预算： 定义性能预算，如果超出预算则构建失败。
• 与 CI/CD 系统集成： 与 GitHub Actions、GitLab CI、CircleCI 和 Jenkins 等流行的 CI/CD 系统集成。
• 协作解决性能问题： 分享 Lighthouse 报告，并与您的团队协作解决性能问题。

设置 Lighthouse CI

以下是在您的项目中设置 Lighthouse CI 的分步指南：

1. 安装 Lighthouse CI

使用 npm 或 yarn 全局安装 Lighthouse CI CLI：

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

              
                Copy
              
            
          

2. 配置 Lighthouse CI

在项目的根目录中创建一个 lighthouserc.js 文件来配置 Lighthouse CI。这是一个示例配置：

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

我们来分解一下这个配置：

• collect.url: 一个需要审计的 URL 数组。此示例审计了主页和关于页面。您应该包括网站的所有关键页面，并考虑不同的用例。例如，一个电子商务网站可能包括主页、产品列表页、产品详情页和结账流程。
• collect.startServerCommand: 启动您的开发服务器的命令。如果 Lighthouse CI 需要在本地开发环境中运行，则此项是必需的。
• collect.numberOfRuns: 对每个 URL 运行 Lighthouse 审计的次数。运行多次审计有助于减少网络条件和其他因素变化带来的影响。
• assert.assertions: 一组用于验证 Lighthouse 审计结果的断言。每个断言指定一个指标或类别以及一个阈值。如果未达到阈值，构建将失败。此示例为性能、可访问性、最佳实践和 SEO 类别设置了阈值。它还为首次内容绘制 (FCP)、最大内容绘制 (LCP)、总阻塞时间 (TBT) 和累积布局偏移 (CLS) 等具体指标设置了阈值。
• upload.target: 指定上传 Lighthouse 报告的位置。temporary-redirect 将报告上传到一个临时存储位置，并提供一个 URL 来访问它们。其他选项包括使用 Lighthouse CI 服务器或云存储解决方案，如 Google Cloud Storage 或 Amazon S3。

3. 与您的 CI/CD 系统集成

下一步是将 Lighthouse CI 集成到您的 CI/CD 流程中。以下是如何将其与 GitHub Actions 集成的示例：

在您的代码仓库中创建一个 .github/workflows/lighthouse.yml 文件：

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          
          npm run build
          lhci autorun

            

              
                Copy
              
            
          

此工作流程执行以下步骤：

• 检出代码。
• 设置 Node.js。
• 安装依赖项。
• 运行 Lighthouse CI。此步骤首先构建应用程序 (npm run build)，然后运行 lhci autorun，该命令执行 Lighthouse 审计并根据配置的阈值断言结果。

根据您的具体 CI/CD 系统和项目要求调整此工作流程。例如，如果您使用 GitLab CI，您将配置一个具有类似步骤的 .gitlab-ci.yml 文件。

4. 运行 Lighthouse CI

提交您的更改并将其推送到您的代码仓库。CI/CD 流程将自动运行 Lighthouse CI。如果任何断言失败，构建将失败，从而为开发人员提供有价值的反馈。Lighthouse CI 报告将通过 CI/CD 系统提供的 URL 查看。

高级配置与自定义

Lighthouse CI 提供了广泛的配置选项和自定义可能性。以下是一些高级功能：

1. 使用 Lighthouse CI 服务器

Lighthouse CI 服务器提供了一个集中的仪表板，用于长期跟踪性能指标、管理项目以及协作解决性能问题。要使用 Lighthouse CI 服务器，您需要设置一个实例并配置您的 lighthouserc.js 文件，将报告上传到该服务器。

首先，部署服务器。有多种部署选项可用，包括 Docker、Heroku 以及像 AWS 和 Google Cloud 这样的云提供商。有关部署服务器的详细说明，请参阅 Lighthouse CI 文档。

服务器运行后，更新您的 lighthouserc.js 文件以指向该服务器：

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

将 YOUR_LHCI_SERVER_URL 替换为您的 Lighthouse CI 服务器的 URL，并将 YOUR_LHCI_SERVER_TOKEN 替换为服务器生成的令牌。该令牌用于在您的 CI 流程与服务器之间进行身份验证。

2. 设置性能预算

性能预算定义了特定指标的可接受阈值。Lighthouse CI 允许您设置性能预算，并在超出这些预算时使构建失败。这有助于防止性能衰退，并确保您的网站保持在可接受的性能限制内。

您可以在 lighthouserc.js 文件中使用 assert.assertions 属性定义性能预算。例如，要为首次内容绘制 (FCP) 设置性能预算，您可以添加以下断言：

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

如果 FCP 大于 2500 毫秒，此断言将导致构建失败。

3. 自定义 Lighthouse 配置

Lighthouse CI 允许您自定义 Lighthouse 配置以满足您的特定需求。您可以配置各种 Lighthouse 设置，例如：

• onlyAudits: 指定要运行的审计列表。
• skipAudits: 指定要跳过的审计列表。
• throttling: 配置网络节流设置以模拟不同的网络条件。
• formFactor: 指定要模拟的设备类型（桌面或移动设备）。
• screenEmulation: 配置屏幕模拟设置。

要自定义 Lighthouse 配置，您可以向 lhci autorun 命令传递一个 --config-path 标志，指向一个自定义的 Lighthouse 配置文件。有关完整的配置选项列表，请参阅 Lighthouse 文档。

4. 审计需要身份验证的页面

审计需要身份验证的页面需要一种稍微不同的方法。您需要在运行审计之前为 Lighthouse CI 提供一种进行身份验证的方式。这可以通过使用 cookie 或编写登录过程的脚本来实现。

一种常见的方法是使用 --extra-headers 标志将身份验证 cookie 传递给 Lighthouse CI。您可以在登录网站后从浏览器的开发者工具中获取这些 cookie。

或者，您可以使用 Puppeteer 脚本来自动化登录过程，然后在经过身份验证的页面上运行 Lighthouse 审计。这种方法提供了更大的灵活性，并允许您处理复杂的身份验证场景。使用 Lighthouse CI 进行前端性能测试的最佳实践

为了最大限度地发挥 Lighthouse CI 的优势，请遵循以下最佳实践：

• 定期运行 Lighthouse CI： 将 Lighthouse CI 集成到您的 CI/CD 流程中，以便在每次提交或拉取请求时自动运行审计。这可以确保及早发现并迅速解决性能衰退问题。
• 设置切合实际的性能预算： 定义具有挑战性但可实现的性能预算。从保守的预算开始，随着网站性能的提高逐步收紧。根据页面的复杂性和重要性，考虑为不同类型的页面设置不同的预算。
• 关注关键指标： 优先考虑对用户体验和业务成果影响最大的关键性能指标。谷歌的“核心网页指标”（LCP、FID 和 CLS）是一个很好的起点。
• 调查并解决性能问题： 当 Lighthouse CI 发现性能问题时，请彻底调查并实施适当的解决方案。使用 Lighthouse 报告来确定问题的根本原因，并优先处理影响最大的修复。
• 长期监控性能： 长期跟踪性能指标以识别趋势和模式。使用 Lighthouse CI 服务器或其他监控工具来可视化性能数据并确定改进领域。
• 教育您的团队： 确保您的团队了解前端性能的重要性以及如何有效使用 Lighthouse CI。提供培训和资源，帮助他们提高技能和知识。
• 考虑全球网络状况： 在设置性能预算时，请考虑世界不同地区的网络状况。互联网速度较慢地区的用户体验可能与速度较快地区的用户不同。在测试期间使用工具模拟不同的网络条件。
• 优化图像： 图像优化是前端性能的一个关键方面。使用像 ImageOptim、TinyPNG 或在线转换器等工具来压缩和优化图像，而不损失质量。使用现代图像格式如 WebP，它比传统的 JPEG 和 PNG 格式提供更好的压缩和质量。对视口中非立即可见的图像实施延迟加载。
• 压缩和精简代码： 精简您的 HTML、CSS 和 JavaScript 代码以减小文件大小。使用 UglifyJS、Terser 或在线精简工具。在您的服务器上启用 Gzip 或 Brotli 压缩，以进一步减小传输文件的大小。
• 利用浏览器缓存： 配置您的服务器为图像、CSS 和 JavaScript 文件等静态资源设置适当的缓存头。这允许浏览器缓存这些资源，避免重复下载。

结论

将 Lighthouse CI 集成到您的开发工作流程中，是构建高性能、可访问且 SEO 友好的网站的关键一步。通过自动化前端性能测试并长期跟踪性能，您可以及早发现并解决性能问题，改善用户体验，并推动业务成果。拥抱 Lighthouse CI，并将持续的性能改进作为您开发过程中的核心价值观。请记住，网站性能不是一次性的工作，而是一个需要持续关注和优化的持续过程。考虑文化和地区因素，以确保为所有用户提供无缝体验，无论他们身在何处或使用何种设备。通过遵循本文概述的最佳实践，您可以确保您的网站为全球用户提供快速、可靠和愉快的体验。