Browser Performance Testing

原文：https://docs.gitlab.com/ee/user/project/merge_requests/browser_performance_testing.html

Browser Performance Testing

Introduced in GitLab Premium 10.3.

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

Overview

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

Use cases

考虑以下工作流程：

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

How browser performance testing works

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

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

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

Browser Performance Widget

Configuring Browser Performance Testing

这个例子显示如何运行sitespeed.io 容器使用 GitLab CI / CD 上的代码和sitespeed.io使用泊坞窗功能于泊坞窗.

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

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

    1. include:
    2.   template: Verify/Browser-Performance.gitlab-ci.yml
    4. performance:
    5.   variables:
    6.     URL: https://example.com

注意：对于 12.4 之前的版本，请参阅旧版 GitLab的信息. 如果您正在使用 Kubernetes 集群，请使用template: Jobs/Browser-Performance-Testing.gitlab-ci.yml .

上面的示例在 CI / CD 管道中创建了一个performance作业，并针对您在URL定义的网页运行 sitespeed.io 以收集关键指标.

该示例使用的 CI / CD 模板自 12.4 起已包含在所有 GitLab 安装中，但不适用于 Kubernetes 集群. 如果您使用的是 GitLab 12.3 或更早版本，则必须手动添加配置

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

您还可以使用环境变量自定义作业：

  • SITESPEED_IMAGE ：配置要用于作业的 Docker 映像（默认为sitespeedio/sitespeed.io ），而不是映像版本.
  • SITESPEED_VERSION ：配置要用于作业的 Docker 映像的版本（默认13.3.0 ）.
  • SITESPEED_OPTIONS ：根据需要配置任何其他 sitespeed.io 选项（默认为nil ）. 有关更多详细信息，请参阅sitespeed.io 文档 .

For example, you can override the number of runs sitespeed.io makes on the given URL, and change the version:

  1. include:
  2.   template: Verify/Browser-Performance.gitlab-ci.yml
  4. performance:
  5.   variables:
  6.     URL: https://www.sitespeed.io/
  7.     SITESPEED_VERSION: 13.2.0
  8.     SITESPEED_OPTIONS: -n 5

Configuring degradation threshold

在 GitLab 13.0 中引入 .

您可以配置降级警报的敏感度，以避免针对度量指标的小幅下降获得警报. 这是通过设置DEGRADATION_THRESHOLD变量来完成的. 在以下示例中，仅当” Total Score指标下降 5 分或更多时，才会显示警报：

  1. include:
  2.   template: Verify/Browser-Performance.gitlab-ci.yml
  4. performance:
  5.   variables:
  6.     URL: https://example.com
  7.     DEGRADATION_THRESHOLD: 5

Total Score指标基于 sitespeed.io 的教练表现得分 . 在教练文档中有更多信息.

Performance testing on Review Apps

上面的 CI YAML 配置非常适合在静态环境下进行测试，并且可以扩展为动态环境，但是还需要一些额外的步骤：

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

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

  1. stages:
  2.   - deploy
  3.   - performance
  5. include:
  6.   template: Verify/Browser-Performance.gitlab-ci.yml
  8. review:
  9.   stage: deploy
  10.   environment:
  11.     name: review/$CI_COMMIT_REF_SLUG
  12.     url: http://$CI_COMMIT_REF_SLUG.$APPS_DOMAIN
  13.   script:
  14.     - run_deploy_script
  15.     - echo $CI_ENVIRONMENT_URL > environment_url.txt
  16.   artifacts:
  17.     paths:
  18.       - environment_url.txt
  19.   only:
  20.     - branches
  21.   except:
  22.     - master
  24. performance:
  25.   dependencies:
  26.     - review
  27.   variables:
  28.     URL: environment_url.txt

GitLab versions 12.3 and older

自推出以来，浏览器性能测试经历了几处更改. 在本节中，我们将详细介绍这些更改以及如何基于 GitLab 版本运行测试：

  • 在 GitLab 12.4 中提供了一个工作模板 .
  • 在 13.2 中，使用其他模板变量将该功能从Performance重命名为Browser Performance . 出于兼容性原因，模板中的作业名称仍然是performance ，但可以在以后的迭代中重命名以匹配.
  • 对于 11.5 至 12.3，没有可用的模板，必须按以下方式手动定义作业：
  1. performance:
  2.   stage: performance
  3.   image: docker:git
  4.   variables:
  5.     URL: https://example.com
  6.     SITESPEED_VERSION: 13.3.0
  7.     SITESPEED_OPTIONS: ''
  8.   services:
  9.     - docker:stable-dind
  10.   script:
  11.     - mkdir gitlab-exporter
  12.     - wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
  13.     - mkdir sitespeed-results
  14.     - docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:$SITESPEED_VERSION --plugins.add ./gitlab-exporter --outputFolder sitespeed-results $URL $SITESPEED_OPTIONS
  15.     - mv sitespeed-results/data/performance.json performance.json
  16.   artifacts:
  17.     paths:
  18.       - performance.json
  19.       - sitespeed-results/
  20.     reports:
  21.       performance: performance.json
  • 对于 11.4 和更早版本，应按以下方式定义作业：
  1. performance:
  2.   stage: performance
  3.   image: docker:git
  4.   variables:
  5.     URL: https://example.com
  6.   services:
  7.     - docker:stable-dind
  8.   script:
  9.     - mkdir gitlab-exporter
  10.     - wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
  11.     - mkdir sitespeed-results
  12.     - docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:6.3.1 --plugins.add ./gitlab-exporter --outputFolder sitespeed-results $URL
  13.     - mv sitespeed-results/data/performance.json performance.json
  14.   artifacts:
  15.     paths:
  16.       - performance.json
  17.       - sitespeed-results/

建议升级到最新版本并使用模板，以确保您收到最新更新，包括对 sitespeed.io 版本的更新.