@ember-performance-monitoring/tracerbench-compare-action
Commit over Commit Performance Analysis Automation for Web Applications.
Samples and Analysis are gathered using Tracerbench Compare
What is it?
Think "Lighthouse CI" but with statistical rigor and more meaningful data.
This library is general enough it could be used to benchmark any Web Application with any CI setup via Tracerbench; however, it comes finely tuned for benchmarking Ember applications and Addons via a Github Action.
Initial Setup
To use this, place markers with performance.mark(<markerName>)
in your
application at key points. You can then conigure tracerbench
to use a
subset (or all) of these markers to create a segmented analysis.
Currently, in order for Tracerbench to know when to stop analyzing your application
it needs to redirect to about:blank
after the Paint
event following the last
marker
you care about. Typically in an Ember Application this means adding the
following in whichever route is being benchmarked. This constraint may be removed
in the future.
class MyRoute extends Route {
afterModel() {
if (document.location.href.indexOf('?tracing') !== -1) {
endTrace();
}
}
}
function endTrace() {
// just before paint
requestAnimationFrame(() => {
// after paint
requestAnimationFrame(() => {
document.location.href = 'about:blank';
});
});
}
Usage as a GithubAction
You can use this action by adding it to an existing workflow or creating a new workflow in your project.
For example, the below adds a check for the users
route to all
pull requests to the master branch.
name: PerformanceCheck
on:
pull_request:
branches:
- master
jobs:
analyze-users-route:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
with:
fetch-depth: 0
- uses: ember-performance-monitoring/tracerbench-compare-action@master
with:
experiment-url: 'http://localhost:4201/users'
control-url: 'http://localhost:4200/users'
markers: 'end-users-model-load'
regression-threshold: 25
fidelity: high
Local Usage and Usage with other CI Systems
The GithubAction this project provides is actually a small wrapper that pipes
the configuration into the project's main
. This allows for easy use in any
setup (local or CI) by adding this action as a dependency.
yarn add @ember-performance-monitoring/tracerbench-compare-action
For example, you could mirror the above check in an Ember Application by doing the following.
{
"experiment-url": "http://localhost:4201/users",
"control-url": "http://localhost:4200/users",
"markers": "end-users-model-load",
"regression-threshold": 25,
"fidelity": "high"
}
const analyze = require('@ember-performance-monitoring/tracerbench-compare-action');
const config = require('./perf-test-config.json');
analyze(config);
Configuration Options
Option | Default | Description |
---|---|---|
build-control | true | Whether to build assets for the control case |
build-experiment | true | Whether to build assets for the experiment case |
control-dist | ./dist-control | The location of the control assets once a build has been performed (or if build-control is false the location they are already) |
experiment-dist | ./dist-experiment | The location of the experiment assets once a build has been performed (or if build-control is false the location they are already) |
control-sha | git rev-parse --short=8 origin/master | SHA to be built for the control commit |
experiment-sha | git rev-parse --short=8 HEAD | SHA to be built for the experiment commit |
experiment-ref | current branch or tag | The reference being built for the experiment |
control-build-command | ember build -e production --output-path ${control-dist} | command to execute to build control assets if build-control is true |
experiment-build-command | ember build -e production --output-path ${experiment-dist} | command to execute to build experiment assets if build-experiment is true |
use-yarn | true | When building control/experiment whether to use yarn for install (npm is used otherwise) |
control-serve-command | ember s --path=${control-dist} | command to execute to serve the control assets |
experiment-serve-command | ember s --path=${experiment-dist} | command to execute to serve the experiment assets |
clean-after-analyze | true if experiment-ref is preset, false otherwise | whether to try to restore initial repository state after the benchmark is completed. Useful for local runs. |
Tracerbench Config
The following options are supplied directly to the tracerbench compare
command that is run once the
assets for control and experiment are being served.
Option | Default | Description |
---|---|---|
control-url | http://localhost:4200?tracing=true | url to benchmark at which the control assets are being served |
experiment-url | http://localhost:4201?tracing=true | url to benchmark at which the experiment assets are being served |
fidelity | low | how many runs to perform. high (50) is recommended for CI |
markers | domComplete | comma separated list of markers to consider in the report |
runtime-stats | false | whether to analyze chrome runtime stats (expensive and degrades the rigor of the rest of the test) } |
report | true | whether to produce a report PDF |
headless | true | whether to run Chrome in headless mode |
regression-threshold | 50 | milliseconds of change at which to fail the test |