Merge branch '4404-browser-performance-testing-docs' into 'master'

Add Browser Performance Testing docs

Closes #4404

See merge request gitlab-org/gitlab-ee!3852

doc/ci/examples/README.md

@@ -62,6 +62,10 @@ Apart from those, here is an collection of tutorials and guides on setting up yo
 
 - [Scan your code for vulnerabilities](sast.md)
 
+### Browser Performance Testing with Sitespeed.io
+
+- [Analyze browser performance with Sitespeed.io](browser_performance.md)
+
 ### Other
 
 - [Using `dpl` as deployment tool](deployment/README.md)

doc/ci/examples/browser_performance.md

+# Browser Performance Testing with the Sitespeed.io container
+
+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.
+
+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`:
+
+```yaml
+  stage: performance
+  image: docker:git
+  services:
+    - docker: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 --plugins.add ./gitlab-exporter --outputFolder sitespeed-results https://my.website.com
+    - mv sitespeed-results/data/performance.json performance.json
+  artifacts:
+    paths:
+    - [performance.json]
+```
+
+This will create a `performance` job in your CI/CD pipeline and will run Sitespeed.io against the webpage you define. The GitLab plugin for Sitespeed.io downloaded in order to export the results to JSON. 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/).
+
+For GitLab [Enterprise Edition Premium](https://about.gitlab.com/gitlab-ee/) users, this information can be automatically
+extracted and shown right in the merge request widget. [Learn more on performance diffs in merge requests](../../user/project/merge_requests/browser_performance_testing.md).

doc/user/project/merge_requests/browser_performance_testing.md

+# Browser Performance Testing
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/3507) in [GitLab Enterprise Edition Premium](https://about.gitlab.com/gitlab-ee/) 10.3.
+
+## Overview
+
+If your application offers a web interface and you are using [GitLab CI/CD](../../../ci/README.md), you can quickly determine the performance impact of pending code changes. GitLab uses [Sitespeed.io](https://www.sitespeed.io), a free and open source tool for measuring the performance of web sites, to analyze the performance of specific pages.
+
+GitLab runs the [Sitespeed.io container](https://hub.docker.com/r/sitespeedio/sitespeed.io/) and compares the performance scores for each page between the source and target branches of a merge request. The [Sitespeed.io performance score](https://examples.sitespeed.io/6.0/2017-11-23-23-43-35/help.html#performanceAdvice) is a composite value based on best practices, and we will be expanding support for [additional metrics](https://gitlab.com/gitlab-org/gitlab-ee/issues/4370) in a subsequent release.
+
+The difference for each page is then shown right on the merge request:
+
+![Performance Widget](img/browser_performance_testing.png)
+
+## Use cases
+
+For instance, consider the following workflow:
+
+1. A member of the marketing team is attempting to track engagement by adding a new tool
+1. With browser performance metrics, they see how their changes are impacting the usability of the page for end users
+1. The metrics show that after their changes the performance score of the page has gone down
+1. When looking at the detailed report, they see that the new Javascript library was included in `<head>` which affects loading page speed
+1. They ask a front end developer to help them, who sets the library to load asynchronously
+1. The frontend developer approves the merge request and authorizes its deployment to production
+
+## How it works
+
+In order to easily consume the Sitespeed results across multiple pages, GitLab has built a simple [Sitespeed plugin](https://gitlab.com/gitlab-org/gl-performance) which outputs `performance.json`. This plugin outputs the performance score for each page that is analyzed. [Additional metrics](https://gitlab.com/gitlab-org/gitlab-ee/issues/4370) are planned to be supported in a future release.
+
+In order for the report to show in the merge request, you need to specify a
+`performance` job (exact name) that will analyze the code and upload the resulting
+`performance.json` as an artifact. GitLab will then check this file and show
+the information inside the merge request.
+
+Presently `performance.json` needs to be the only artifact file for the job. We are working on adding support to be able to [include other artifact files](https://gitlab.com/gitlab-org/gitlab-ee/issues/2877), like the broader HTML report, in a subsequent release.
+
+If the performance report doesn't have anything to compare to, no information
+will be displayed in the merge request area. That is the case when you add the
+`performance` job in your `.gitlab-ci.yml` for the very first time.
+Consecutive merge requests will have something to compare to and the performance
+report will be shown properly.
+
+For more information on how the `performance` job should look, check the
+example on [analyzing a project's performance with Sitespeed.io](../../../ci/examples/browser_performance.md).

doc/user/project/merge_requests/index.md

@@ -35,6 +35,7 @@ With **[GitLab Enterprise Edition][ee]**, you can also:
 - Request [approvals](#merge-request-approvals) from your managers (available in GitLab Enterprise Edition Starter)
 - [Squash and merge](#squash-and-merge) for a cleaner commit history (available in GitLab Enterprise Edition Starter)
 - Analyze the impact of your changes with [Code Quality reports](#code-quality-reports) (available in GitLab Enterprise Edition Starter)
+- Determine the performance impact of changes with [Browser Performance Testing](#browser-performance-testing) (available in GitLab Enterprise Edition Premium)
 
 ## Use cases
 
@@ -210,6 +211,16 @@ merge request widget area.
 
 [Read more about Static Application Security Testing reports.](sast.md)
 
+## Browser Performance Testing
+
+> Introduced in [GitLab Enterprise Edition Premium][products] 10.3.
+
+If your application offers a web interface and you are using [GitLab CI/CD][ci], you can quickly determine the performance impact of pending code changes. GitLab uses [Sitespeed.io][sitespeed], a free and open source tool for measuring the performance of web sites, to analyze the performance of specific pages.
+
+GitLab runs the [Sitespeed.io container][sitespeed-container] and displays the difference in overall performance scores between the source and target branches.
+
+[Read more about Browser Performance Testing.](browser_performance_testing.md)
+
 ## Live preview with Review Apps
 
 If you configured [Review Apps](https://about.gitlab.com/features/review-apps/) for your project,
@@ -342,3 +353,5 @@ git checkout origin/merge-requests/1
 [cc]: https://codeclimate.com/
 [cd]: https://hub.docker.com/r/codeclimate/codeclimate/
 [ee]: https://about.gitlab.com/gitlab-ee/ "GitLab Enterprise Edition"
+[sitespeed]: https://www.sitespeed.io
+[sitespeed-container]: https://hub.docker.com/r/sitespeedio/sitespeed.io/