2019-06-11 12:39:26 -04:00
---
type: howto
---
2017-12-20 15:28:39 -05:00
2019-06-11 12:39:26 -04:00
# Browser Performance Testing with the sitespeed.io container
NOTE: **Note:**
2018-11-13 11:09:10 -05:00
The job definition shown below is supported on GitLab 11.5 and later versions.
It also requires the GitLab Runner 11.5 or later.
For earlier versions, use the [previous job definitions ](#previous-job-definitions ).
2018-03-29 03:30:39 -04:00
This example shows how to run the
2019-06-11 12:39:26 -04:00
[sitespeed.io container ](https://hub.docker.com/r/sitespeedio/sitespeed.io/ ) on
your code by using GitLab CI/CD and [sitespeed.io ](https://www.sitespeed.io )
2018-03-29 03:30:39 -04:00
using Docker-in-Docker.
2017-12-20 15:28:39 -05:00
2018-11-13 11:09:10 -05:00
First, you need GitLab Runner with
2019-07-30 04:31:58 -04:00
[docker-in-docker build ](../docker/using_docker_build.md#use-docker-in-docker-workflow-with-docker-executor ).
2018-11-13 11:09:10 -05:00
Once you set up the Runner, add a new job to `.gitlab-ci.yml` that
generates the expected report:
2017-12-20 15:28:39 -05:00
```yaml
2018-03-29 03:30:39 -04:00
performance:
2017-12-20 15:28:39 -05:00
stage: performance
image: docker:git
2018-03-29 03:30:39 -04:00
variables:
URL: https://example.com
2017-12-20 15:28:39 -05:00
services:
2018-04-13 15:43:09 -04:00
- docker:stable-dind
2017-12-20 15:28:39 -05:00
script:
2018-02-20 15:37:50 -05:00
- mkdir gitlab-exporter
2018-03-29 03:30:39 -04:00
- wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
2017-12-20 15:28:39 -05:00
- mkdir sitespeed-results
2018-03-29 03:30:39 -04:00
- docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:6.3.1 --plugins.add ./gitlab-exporter --outputFolder sitespeed-results $URL
2018-02-20 15:37:50 -05:00
- mv sitespeed-results/data/performance.json performance.json
2017-12-20 15:28:39 -05:00
artifacts:
paths:
2018-11-13 11:09:10 -05:00
- sitespeed-results/
reports:
performance: performance.json
2017-12-20 15:28:39 -05:00
```
2018-11-13 11:09:10 -05:00
The above example will create a `performance` job in your CI/CD pipeline and will run
2019-06-11 12:39:26 -04:00
sitespeed.io against the webpage you defined in `URL` to gather key metrics.
2018-11-13 11:09:10 -05:00
The [GitLab plugin ](https://gitlab.com/gitlab-org/gl-performance ) for
2019-06-11 12:39:26 -04:00
sitespeed.io is downloaded in order to save the report as a
2019-02-03 17:26:09 -05:00
[Performance report artifact ](../yaml/README.md#artifactsreportsperformance-premium )
2018-11-13 11:09:10 -05:00
that you can later download and analyze.
Due to implementation limitations we always take the latest Performance artifact available.
2018-03-29 03:30:39 -04:00
2019-06-11 12:39:26 -04:00
The full HTML sitespeed.io report will also be saved as an artifact, and if you have
2018-11-13 11:09:10 -05:00
[GitLab Pages ](../../user/project/pages/index.md ) enabled, it can be viewed
directly in your browser.
2018-03-29 03:30:39 -04:00
2019-06-11 12:39:26 -04:00
For further customization options for sitespeed.io, including the ability to
provide a list of URLs to test, please see the
[Sitespeed.io Configuration ](https://www.sitespeed.io/documentation/sitespeed.io/configuration/ ) documentation.
2017-12-20 15:28:39 -05:00
2018-03-29 03:30:39 -04:00
TIP: **Tip:**
For [GitLab Premium ](https://about.gitlab.com/pricing/ ) users, key metrics are automatically
2018-11-13 11:09:10 -05:00
extracted and shown right in the merge request widget.
2019-06-02 20:28:07 -04:00
[Learn more on Browser Performance Testing in merge requests ](../../user/project/merge_requests/browser_performance_testing.md ).
2017-12-20 15:28:39 -05:00
## Performance testing on Review Apps
2018-03-29 03:30:39 -04:00
The above CI YML is great for testing against static environments, and it can
be extended for dynamic environments. There are a few extra steps to take to
set this up:
2017-12-20 15:28:39 -05:00
2018-03-29 03:30:39 -04:00
1. The `performance` job should run after the dynamic environment has started.
1. In the `review` job, persist the hostname and upload it as an artifact so
it's available to the `performance` job (the same can be done for static
environments like staging and production to unify the code path). Saving it
as an artifact is as simple as `echo $CI_ENVIRONMENT_URL > environment_url.txt`
in your job's `script` .
1. In the `performance` job, read the previous artifact into an environment
variable, like `$CI_ENVIRONMENT_URL` , and use it to parameterize the test
URLs.
2019-06-11 12:39:26 -04:00
1. You can now run the sitespeed.io container against the desired hostname and
2018-03-29 03:30:39 -04:00
paths.
Your `.gitlab-ci.yml` file would look like:
2017-12-20 15:28:39 -05:00
```yaml
2018-03-29 03:30:39 -04:00
stages:
- deploy
- performance
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
only:
- branches
except:
- master
performance:
2017-12-20 15:28:39 -05:00
stage: performance
image: docker:git
services:
2018-04-13 15:43:09 -04:00
- docker:stable-dind
2018-03-29 03:30:39 -04:00
dependencies:
- review
2017-12-20 15:28:39 -05:00
script:
- export CI_ENVIRONMENT_URL=$(cat environment_url.txt)
2018-02-20 15:51:12 -05:00
- mkdir gitlab-exporter
2018-03-29 03:30:39 -04:00
- wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
2017-12-20 15:28:39 -05:00
- mkdir sitespeed-results
2018-02-20 15:51:12 -05:00
- docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:6.3.1 --plugins.add ./gitlab-exporter --outputFolder sitespeed-results "$CI_ENVIRONMENT_URL"
- mv sitespeed-results/data/performance.json performance.json
2017-12-20 15:28:39 -05:00
artifacts:
paths:
2018-03-29 03:30:39 -04:00
- sitespeed-results/
2018-11-13 11:09:10 -05:00
reports:
performance: performance.json
2017-12-20 15:28:39 -05:00
```
2018-02-20 15:37:50 -05:00
2018-09-26 11:39:27 -04:00
A complete example can be found in our [Auto DevOps CI YML ](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/lib/gitlab/ci/templates/Auto-DevOps.gitlab-ci.yml ).
2018-11-13 11:09:10 -05:00
## Previous job definitions
CAUTION: **Caution:**
Before GitLab 11.5, Performance job and artifact had to be named specifically
to automatically extract report data and show it in the merge request widget.
While these old job definitions are still maintained they have been deprecated
and may be removed in next major release, GitLab 12.0.
You are advised to update your current `.gitlab-ci.yml` configuration to reflect that change.
For GitLab 11.4 and earlier, the job should look like:
```yaml
performance:
stage: performance
image: docker:git
variables:
URL: https://example.com
services:
- docker:stable-dind
script:
- mkdir gitlab-exporter
- wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
- mkdir sitespeed-results
- docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:6.3.1 --plugins.add ./gitlab-exporter --outputFolder sitespeed-results $URL
- mv sitespeed-results/data/performance.json performance.json
artifacts:
paths:
- performance.json
- sitespeed-results/
2019-07-30 04:31:58 -04:00
```