2018-03-17 18:26:18 +05:30
# Browser Performance Testing with the Sitespeed.io container
2018-05-09 12:01:36 +05:30
This example shows how to run the
[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 )
using Docker-in-Docker.
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
First, you need a GitLab Runner with the
[docker-in-docker executor ](../docker/using_docker_build.md#use-docker-in-docker-executor ).
Once you set up the Runner, add a new job to `.gitlab-ci.yml` , called
`performance` :
2018-03-17 18:26:18 +05:30
```yaml
2018-05-09 12:01:36 +05:30
performance:
2018-03-17 18:26:18 +05:30
stage: performance
image: docker:git
2018-05-09 12:01:36 +05:30
variables:
URL: https://example.com
2018-03-17 18:26:18 +05:30
services:
2018-10-15 14:42:47 +05:30
- docker:stable-dind
2018-03-17 18:26:18 +05:30
script:
- mkdir gitlab-exporter
2018-05-09 12:01:36 +05:30
- wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
2018-03-17 18:26:18 +05:30
- mkdir sitespeed-results
2018-05-09 12:01:36 +05:30
- 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-03-17 18:26:18 +05:30
- mv sitespeed-results/data/performance.json performance.json
artifacts:
paths:
- performance.json
- sitespeed-results/
```
2018-05-09 12:01:36 +05:30
The above example will:
1. Create a `performance` job in your CI/CD pipeline and will run
Sitespeed.io against the webpage you defined in `URL` .
1. The [GitLab plugin ](https://gitlab.com/gitlab-org/gl-performance ) for
Sitespeed.io is downloaded in order to export key metrics to JSON. The full
HTML Sitespeed.io report will also be saved as an artifact, and if you have
[GitLab Pages ](../../user/project/pages/index.md ) enabled, it can be viewed
directly in your browser.
For further customization options of Sitespeed.io, including the ability to
provide a list of URLs to test, please consult
[their documentation ](https://www.sitespeed.io/documentation/sitespeed.io/configuration/ ).
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
TIP: **Tip:**
For [GitLab Premium ](https://about.gitlab.com/pricing/ ) users, key metrics are automatically
extracted and shown right in the merge request widget. Learn more about
[Browser Performance Testing ](https://docs.gitlab.com/ee/user/project/merge_requests/browser_performance_testing.html ).
2018-03-17 18:26:18 +05:30
## Performance testing on Review Apps
2018-05-09 12:01:36 +05:30
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:
2018-03-17 18:26:18 +05:30
2018-05-09 12:01:36 +05:30
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.
1. You can now run the Sitespeed.io container against the desired hostname and
paths.
Your `.gitlab-ci.yml` file would look like:
2018-03-17 18:26:18 +05:30
```yaml
2018-05-09 12:01:36 +05:30
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:
2018-03-17 18:26:18 +05:30
stage: performance
image: docker:git
services:
2018-10-15 14:42:47 +05:30
- docker:stable-dind
2018-05-09 12:01:36 +05:30
dependencies:
- review
2018-03-17 18:26:18 +05:30
script:
- export CI_ENVIRONMENT_URL=$(cat environment_url.txt)
- mkdir gitlab-exporter
2018-05-09 12:01:36 +05:30
- wget -O ./gitlab-exporter/index.js https://gitlab.com/gitlab-org/gl-performance/raw/master/index.js
2018-03-17 18:26:18 +05:30
- 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 "$CI_ENVIRONMENT_URL"
- mv sitespeed-results/data/performance.json performance.json
artifacts:
paths:
2018-05-09 12:01:36 +05:30
- performance.json
- sitespeed-results/
2018-03-17 18:26:18 +05:30
```
2018-12-05 23:21:45 +05:30
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 ).