Help us learn about your current experience with the documentation. Take the survey.

浏览器性能测试

  • Tier: Premium, Ultimate
  • Offering: GitLab.com, GitLab Self-Managed, GitLab Dedicated

如果您的应用提供了 Web 界面，并且您正在使用 GitLab CI/CD，您就可以快速评估待处理的代码更改对浏览器渲染性能的影响。

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

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

用例

请参考以下工作流程：

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

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

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

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

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

Browser Performance Widget

配置浏览器性能测试

本示例展示了如何通过使用 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。

该模板使用了 sitespeed.io 的 GitLab 插件，并将完整的 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.io 文档。
  • SITESPEED_DOCKER_OPTIONS: 配置任何额外的 Docker 选项（默认为 nil）。详情请参阅 Docker 选项文档。

例如，您可以覆盖 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

Total Score（总分）指标基于 sitespeed.io 的 coach 性能分数。更多信息请参阅 coach 文档。

在 Review App 上进行性能测试

前面的 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