{{< details >}}

  • Tier: 专业版, 旗舰版
  • Offering: JihuLab.com, 私有化部署

{{< /details >}}

如果您的应用程序提供了一个 Web 界面，并且您正在使用极狐GitLab CI/CD，您可以快速确定待处理代码更改在浏览器中的渲染性能影响。

{{< alert type=”note” >}}

您可以通过使用 Auto DevOps 自动化此功能到您的应用程序中。

{{< /alert >}}

概述

极狐GitLab 使用 Sitespeed.io，一个免费且开源的工具，用于测量网站的渲染性能。极狐GitLab 构建的 Sitespeed 插件输出每个被分析页面的性能得分到一个名为 browser-performance.json 的文件中，这些数据可以在合并请求中显示。

使用案例

考虑以下工作流程：

  1. 营销团队的一名成员尝试通过添加新工具来跟踪用户参与度。
  2. 通过浏览器性能指标，他们可以看到他们的更改如何影响终端用户的页面可用性。
  3. 指标显示更改后，页面的性能得分下降。
  4. 查看详细报告时，他们发现新的 JavaScript 库被包含在 <head> 中，这影响了页面加载速度。
  5. 他们向前端开发人员寻求帮助，后者将库设置为异步加载。
  6. 前端开发人员批准合并请求，并授权其部署到生产环境。

浏览器性能测试的工作原理

首先，在您的 .gitlab-ci.yml 文件中定义一个生成浏览器性能报告产物的作业。极狐GitLab 然后检查此报告，比较源分支和目标分支中每个页面的关键性能指标，并在合并请求中显示信息。

有关示例浏览器性能作业，请参阅配置浏览器性能测试。

{{< alert type=”note” >}}

如果浏览器性能报告没有可比较的数据，例如当您第一次在 .gitlab-ci.yml 中添加浏览器性能作业时，浏览器性能报告小部件将不会显示。它必须至少在目标分支（例如 main）上运行过一次，然后才会在针对该分支的合并请求中显示。此外，只有在合并请求的最新流水线中运行过作业时，小部件才会显示。

{{< /alert >}}

Browser Performance Widget

配置浏览器性能测试

{{< history >}}

  • 在极狐GitLab 16.6 中引入 SITESPEED_DOCKER_OPTIONS 变量的支持。

{{< /history >}}

此示例展示了如何通过使用极狐GitLab CI/CD 和 sitespeed.io 使用 Docker-in-Docker 来运行 sitespeed.io 容器来测试代码。

  1. 首先，使用Docker-in-Docker 构建设置极狐GitLab Runner。

  2. 在 .gitlab-ci.yml 文件中按如下配置默认的浏览器性能测试 CI/CD 作业：

    include:
  template: Verify/Browser-Performance.gitlab-ci.yml

browser_performance:
  variables:
    URL: https://example.com

上述示例：

  • 在您的 CI/CD 流水线中创建 browser_performance 作业，并针对您在 URL 中定义的网页运行 sitespeed.io 以收集关键指标。
  • 使用的模板不适用于 Kubernetes 集群。如果您使用的是 Kubernetes 集群，请使用 template: Jobs/Browser-Performance-Testing.gitlab-ci.yml 代替。

该模板使用极狐GitLab 的 sitespeed.io 插件，并将完整的 HTML sitespeed.io 报告保存为您可以稍后下载和分析的浏览器性能报告产物。此实现始终获取最新的浏览器性能产物。如果启用了 极狐GitLab Pages，您可以直接在浏览器中查看报告。

您还可以使用 CI/CD 变量自定义作业：

  • SITESPEED_IMAGE: 配置用于作业的 Docker 镜像（默认 sitespeedio/sitespeed.io），但不是镜像版本。
  • SITESPEED_VERSION: 配置用于作业的 Docker 镜像版本（默认 14.1.0）。
  • SITESPEED_OPTIONS: 根据需要配置任何额外的 sitespeed.io 选项（默认 nil）。
  • SITESPEED_DOCKER_OPTIONS: 配置任何额外的 Docker 选项（默认 nil）。

例如，您可以覆盖 sitespeed.io 在给定 URL 上运行的次数，并更改版本：

include:
  template: Verify/Browser-Performance.gitlab-ci.yml

browser_performance:
  variables:
    URL: https://www.sitespeed.io/
    SITESPEED_VERSION: 13.2.0
    SITESPEED_OPTIONS: -n 5

配置降级阈值

您可以配置降级警报的敏感度，以避免收到小幅度指标下降的警报。通过设置 DEGRADATION_THRESHOLD CI/CD 变量来完成此操作。在下面的示例中，只有当 Total Score 指标降级 5 分或更多时才会显示警报：

include:
  template: Verify/Browser-Performance.gitlab-ci.yml

browser_performance:
  variables:
    URL: https://example.com
    DEGRADATION_THRESHOLD: 5

在评审应用上进行性能测试

上述 CI YAML 配置非常适合针对静态环境进行测试，并且可以扩展到动态环境，但需要一些额外步骤：

  1. browser_performance 作业应在动态环境启动后运行。
  2. 在 review 作业中：
    1. 生成包含动态 URL 的 URL 列表文件。
    2. 将文件保存为产物，例如在作业的 script 中使用 echo $CI_ENVIRONMENT_URL > environment_url.txt。
    3. 将列表作为 URL 环境变量（可以是 URL 或包含 URL 的文件）传递给 browser_performance 作业。
  3. 现在，您可以针对所需的主机名和路径运行 sitespeed.io 容器。

您的 .gitlab-ci.yml 文件应如下所示：

stages:
  - deploy
  - performance

include:
  template: Verify/Browser-Performance.gitlab-ci.yml

review:
  stage: deploy
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    url: http://$CI_COMMIT_REF_SLUG.$APPS_DOMAIN
  script:
    - run_deploy_script
    - echo $CI_ENVIRONMENT_URL > environment_url.txt
  artifacts:
    paths:
      - environment_url.txt
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
      when: never
    - if: $CI_COMMIT_BRANCH

browser_performance:
  dependencies:
    - review
  variables:
    URL: environment_url.txt