diff --git a/.dockerignore b/.dockerignore index 552fe5a10..8ce97589b 100644 --- a/.dockerignore +++ b/.dockerignore @@ -2,4 +2,6 @@ !bin !lib !package.json +!LICENSE +!npm-shrinkwrap.json !docker diff --git a/.eslintignore b/.eslintignore index 10a3ed22e..d7d2a400b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,3 +4,6 @@ assets/* sitespeed-result/* lib/plugins/yslow/scripts/* lib/plugins/html/assets/js/* +bin/browsertimeWebPageReplay.js +test/data/* +test/prepostscripts/* diff --git a/.eslintrc.json b/.eslintrc.json index e9cc0cf4e..5e1e09a98 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,19 +5,27 @@ "es6": true }, "parserOptions": { - "ecmaVersion": 8 + "ecmaVersion": "latest", + "sourceType": "module" }, - "plugins": ["prettier"], - "extends": "eslint:recommended", + "plugins": ["prettier", "unicorn"], + "extends": ["eslint:recommended", "plugin:unicorn/recommended"], "rules": { "prettier/prettier": [ "error", { - "singleQuote": true + "singleQuote": true, + "trailingComma": "none", + "arrowParens": "avoid", + "embeddedLanguageFormatting": "off" } ], "require-atomic-updates": 0, "no-extra-semi": 0, - "no-mixed-spaces-and-tabs": 0 + "no-mixed-spaces-and-tabs": 0, + "unicorn/filename-case": 0, + "unicorn/prevent-abbreviations": 0, + "unicorn/no-array-reduce": 0, + "unicorn/prefer-spread":0 } } diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index b71461404..6bec2c1df 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -21,4 +21,4 @@ If you have an idea or something that you need sitespeed.io to handle, add an is Thanks for your time & support! -Peter, Tobias & Jonathan +Peter diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index a2467a20d..000000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,9 +0,0 @@ - - diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml new file mode 100644 index 000000000..ec906f668 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml @@ -0,0 +1,65 @@ +name: Bug Report +description: File a bug report +labels: [bug] +body: + - type: markdown + attributes: + value: Thanks for reporting issues back to sitespeed.io! + - type: checkboxes + id: Reproducable + attributes: + label: Have you read the documentation? + description: Please double check that this question hasn't already answered in the [documentation](https://www.sitespeed.io/documentation/sitespeed.io/) (use the `Search`). Also please read [how to make a good bug report](https://www.sitespeed.io/documentation/sitespeed.io/bug-report/) and check [how to debug your script](https://www.sitespeed.io/documentation/sitespeed.io/scripting/#debug). + options: + - label: Yes, I've read the [how to make a reproducable bug guide](https://www.sitespeed.io/documentation/sitespeed.io/bug-report/) + required: true + - label: Yes, I've read the [how to debug my script guide](https://www.sitespeed.io/documentation/sitespeed.io/scripting/#debug) + required: false + - type: input + id: url + attributes: + label: URL + description: What URL did you run sitespeed.io on? If you can't share your URL please make a minimial repro to a public location (e.g. https://glitch.com/, http://jsbin.com/, etc) + placeholder: https://example.com + validations: + required: true + - type: textarea + id: whaw + attributes: + label: What are you trying to accomplish + description: A brief description of what you tried to do and what went wrong. + validations: + required: true + - type: dropdown + id: browser + attributes: + label: What browser did you use? + description: Extra bonus if you try the issue in multiple browsers + multiple: true + options: + - Chrome + - Firefox + - Edge + - Safari Mac OS + - Safari iOS + - Chrome Android + - Firefox Android + - Other + validations: + required: true + - type: textarea + id: how-to-reproduce + attributes: + label: How to reproduce + description: Please copy and paste how you run so we can reproduce. This will be automatically formatted into code, so no need for backticks. Remember to follow the [how to make a good bug report guide](https://www.sitespeed.io/documentation/sitespeed.io/bug-report/)! + render: shell + validations: + required: true + - type: textarea + id: logs + attributes: + label: Log output + description: Please copy and paste the full log output from your test (please DO NOT take a screenshot of the log output). This will be automatically formatted into code, so no need for backticks. If the log output is large please use a [gist](https://gist.github.com)! + render: shell + validations: + required: false \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/FEATURE_IMPROVEMENT.yml b/.github/ISSUE_TEMPLATE/FEATURE_IMPROVEMENT.yml new file mode 100644 index 000000000..9e9e85cd9 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/FEATURE_IMPROVEMENT.yml @@ -0,0 +1,15 @@ +name: New feature or improvement +description: Suggest a new feature or something that can be improved +labels: [feature, improvement] +body: + - type: markdown + attributes: + value: | + Suggest a new feature or something that can be improved + - type: textarea + id: your-idea + attributes: + label: Feature/improvement + description: You can also disuss new features/improvements in the [sitespeed.io Slack channel](https://join.slack.com/t/sitespeedio/shared_invite/zt-296jzr7qs-d6DId2KpEnMPJSQ8_R~WFw). + validations: + required: true \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/QUESTION.yml b/.github/ISSUE_TEMPLATE/QUESTION.yml new file mode 100644 index 000000000..84eae216f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/QUESTION.yml @@ -0,0 +1,15 @@ +name: Question +description: Ask a question about sitespeed.io +labels: [question] +body: + - type: markdown + attributes: + value: | + Ask a question about sitespeed.io + - type: textarea + id: your-question + attributes: + label: Your question + description: Please double check that this question hasn't already answered in the [documentation](https://www.sitespeed.io/documentation/sitespeed.io/) (use the `Search`) or [old GitHub issues](https://github.com/sitespeedio/sitespeed.io/issues?q=is%3Aissue+is%3Aclosed). You can also ask questions in the [sitespeed.io Slack channel](https://join.slack.com/t/sitespeedio/shared_invite/zt-296jzr7qs-d6DId2KpEnMPJSQ8_R~WFw). And if your question is more like a bug, please [use the bug report form](https://github.com/sitespeedio/sitespeed.io/issues/new?assignees=&labels=bug&template=BUG_REPORT.yml) + validations: + required: true \ No newline at end of file diff --git a/.github/budget.json b/.github/budget.json new file mode 100644 index 000000000..5cc108f4e --- /dev/null +++ b/.github/budget.json @@ -0,0 +1,13 @@ +{ + "budget": { + "thirdParty": { + "requests": 0 + }, + "score": { + "bestpractice": 100, + "privacy": 100, + "performance": 98 + } + } + } + \ No newline at end of file diff --git a/.github/workflows/building-docker-autobuild.yml b/.github/workflows/building-docker-autobuild.yml new file mode 100644 index 000000000..a27677a69 --- /dev/null +++ b/.github/workflows/building-docker-autobuild.yml @@ -0,0 +1,29 @@ +name: Build autobuild container that runs tests on dashboard.sitespeed.io +on: + push: + branches: + - main +jobs: + docker: + runs-on: ubuntu-latest + steps: + - + name: Set up QEMU + uses: docker/setup-qemu-action@v3 + - + name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + - + name: Login to DockerHub + uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + - + name: Build and push sitespeed.io + uses: docker/build-push-action@v5 + with: + platforms: linux/amd64 + push: true + provenance: false + tags: sitespeedio/sitespeed.io-autobuild:main \ No newline at end of file diff --git a/.github/workflows/building-docker-release.yml b/.github/workflows/building-docker-release.yml new file mode 100644 index 000000000..f1adc691c --- /dev/null +++ b/.github/workflows/building-docker-release.yml @@ -0,0 +1,72 @@ +name: Build Docker containers on new tag +on: + push: + tags: + - 'v*.*.*' +jobs: + docker: + runs-on: ubuntu-latest + steps: + - + name: Checkout + uses: actions/checkout@v4 + - + name: Set up QEMU + uses: docker/setup-qemu-action@v3 + - + name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + - + name: Login to DockerHub + uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + - + name: Get the tag + id: tag + uses: dawidd6/action-get-tag@v1 + with: + strip_v: true + - + name: Build and push sitespeed.io + uses: docker/build-push-action@v5 + with: + context: . + platforms: linux/amd64,linux/arm64 + push: true + provenance: false + tags: sitespeedio/sitespeed.io:${{steps.tag.outputs.tag}},sitespeedio/sitespeed.io:latest + - + name: Build and push sitespeed.io+1 + uses: docker/build-push-action@v5 + with: + context: . + platforms: linux/amd64,linux/arm64 + file: ./docker/Dockerfile-plus1 + build-args: version=${{steps.tag.outputs.tag}} + push: true + provenance: false + tags: sitespeedio/sitespeed.io:${{steps.tag.outputs.tag}}-plus1 + - + name: Build and push sitespeed.io+wpt + uses: docker/build-push-action@v5 + with: + context: . + platforms: linux/amd64,linux/arm64 + file: ./docker/Dockerfile-webpagetest + build-args: version=${{steps.tag.outputs.tag}} + push: true + provenance: false + tags: sitespeedio/sitespeed.io:${{steps.tag.outputs.tag}}-webpagetest + - + name: Build and push sitespeed.io-slim + uses: docker/build-push-action@v5 + with: + context: . + platforms: linux/amd64,linux/arm64 + file: ./Dockerfile-slim + build-args: version=${{steps.tag.outputs.tag}} + push: true + provenance: false + tags: sitespeedio/sitespeed.io:${{steps.tag.outputs.tag}}-slim \ No newline at end of file diff --git a/.github/workflows/crux-test.yml b/.github/workflows/crux-test.yml new file mode 100644 index 000000000..ba1f7c29e --- /dev/null +++ b/.github/workflows/crux-test.yml @@ -0,0 +1,22 @@ +name: Test CRUX +on: + push: + branches: + - main + pull_request: + branches: + - main +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: '20.x' + - name: Install sitespeed.io + run: npm ci + - name: Run tests with CruX + run: bin/sitespeed.js -b chrome -n 1 --crux.key ${{ secrets.CRUX_KEY }} https://en.wikipedia.org/wiki/Main_Page --plugins.remove browsertime + \ No newline at end of file diff --git a/.github/workflows/docker-scan.yml b/.github/workflows/docker-scan.yml new file mode 100644 index 000000000..81c7ad5f9 --- /dev/null +++ b/.github/workflows/docker-scan.yml @@ -0,0 +1,28 @@ +name: Docker security scan +on: + push: + branches: + - main + pull_request: +jobs: + build: + name: Build + runs-on: ubuntu-20.04 + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Build an image from Dockerfile + run: | + docker buildx install + docker buildx build --load --platform linux/amd64 -t docker.io/sitespeedio/sitespeed.io:${{ github.sha }} . + + - name: Run Trivy vulnerability scanner + uses: aquasecurity/trivy-action@master + with: + image-ref: 'docker.io/sitespeedio/sitespeed.io:${{ github.sha }}' + format: 'table' + exit-code: '1' + ignore-unfixed: true + vuln-type: 'os,library' + severity: 'CRITICAL' \ No newline at end of file diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 5e84af2c6..686120296 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -10,19 +10,29 @@ jobs: build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Build Docker containers run: | - docker build -t sitespeedio/sitespeed.io . - docker build -t sitespeedio/sitespeed.io:slim --file Dockerfile-slim . + docker buildx install + docker buildx build --load --platform linux/amd64 -t sitespeedio/sitespeed.io . + docker buildx build --load --platform linux/amd64 -t sitespeedio/sitespeed.io:slim --file Dockerfile-slim . + - name: Install local HTTP server + run: npm install serve -g + - name: Start local HTTP server + run: (serve test/data/html/ -l 3001&) - name: Run test on default container for Chrome - run: docker run --rm sitespeedio/sitespeed.io https://www.sitespeed.io -n 1 -b chrome + run: docker run --rm -v "$(pwd)":/sitespeed.io --network=host sitespeedio/sitespeed.io http://127.0.0.1:3001 -n 1 -b chrome - name: Run test on default container for Firefox - run: docker run --rm sitespeedio/sitespeed.io https://www.sitespeed.io -n 1 -b firefox + run: docker run --rm -v "$(pwd)":/sitespeed.io --network=host sitespeedio/sitespeed.io http://127.0.0.1:3001 -n 1 -b firefox + - name: Run test on default container for Edge + run: docker run --rm -v "$(pwd)":/sitespeed.io --network=host sitespeedio/sitespeed.io http://127.0.0.1:3001 -n 1 -b edge - name: Run test on slim container - run: docker run --rm sitespeedio/sitespeed.io:slim https://www.sitespeed.io -n 1 - - name: Test WebPageReplay in the default container - run: docker run --cap-add=NET_ADMIN --rm -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io https://www.sitespeed.io -n 1 -b chrome - - - + run: docker run --rm -v "$(pwd)":/sitespeed.io --network=host sitespeedio/sitespeed.io:slim http://127.0.0.1:3001 -n 1 --browsertime.firefox.preference "devtools.netmonitor.persistlog:true" + - name: Test WebPageReplay with Chrome + run: docker run --cap-add=NET_ADMIN --rm -v "$(pwd)":/sitespeed.io -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io https://www.sitespeed.io -n 3 -b chrome + - name: Test WebPageReplay user journey with Chrome + run: docker run --cap-add=NET_ADMIN --rm -v "$(pwd)":/sitespeed.io -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io test/prepostscripts/multiWindows.cjs -n 1 -b chrome --multi + - name: Test WebPageReplay with Firefox + run: docker run --cap-add=NET_ADMIN --rm -v "$(pwd)":/sitespeed.io --network=host -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io https://www.sitespeed.io -n 3 -b firefox --browsertime.firefox.acceptInsecureCerts true + - name: Run Chrome test with config + run: docker run --rm -v "$(pwd)":/sitespeed.io --network=host sitespeedio/sitespeed.io http://127.0.0.1:3001 -b chrome --config test/exampleConfig.json diff --git a/.github/workflows/linux.yml b/.github/workflows/linux.yml index b7f5d5d98..3633ba349 100644 --- a/.github/workflows/linux.yml +++ b/.github/workflows/linux.yml @@ -10,45 +10,70 @@ jobs: build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Use Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: - node-version: '12.x' + node-version: '20.x' - name: Install sitespeed.io run: npm ci + - name: Install Chrome + run: | + wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - + sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' + sudo apt-get update + sudo apt-get --only-upgrade install google-chrome-stable + google-chrome --version - name: Install dependencies run: | - sudo apt-get update - sudo ACCEPT_EULA=Y apt-get upgrade google-chrome-stable -y + python -m pip install --upgrade --user pip + python -m pip install --user scipy + python -m pip show scipy + - name: Install Firefox + uses: browser-actions/setup-firefox@latest + #with: + # firefox-version: '94.0' - name: Setup environment run: docker-compose -f test/docker-compose.yml up -d - name: Browser versions run: | google-chrome --version firefox --version + - name: Install local HTTP server + run: npm install serve -g + - name: Start local HTTP server + run: (serve test/data/html/ -l 3001&) - name: Test old budget - run: bin/sitespeed.js -b firefox -n 2 --budget.configPath test/oldBudget.json --summary --xvfb https://www.sitespeed.io/ - - name: Test new budget file - run: bin/sitespeed.js --useHash -n 1 --budget.configPath test/budget.json --xvfb https://www.sitespeed.io/#heybaberia + run: bin/sitespeed.js -b firefox -n 2 --budget.configPath test/oldBudget.json --summary --xvfb http://127.0.0.1:3001/simple/ + - name: Test new budget file with junit + run: bin/sitespeed.js --useHash -n 1 --budget.configPath test/budget.json --xvfb --budget.output junit http://127.0.0.1:3001/simple/#heybaberia + - name: Test new budget file with tap + run: bin/sitespeed.js --useHash -n 1 --budget.configPath test/budget.json --xvfb --budget.output tap http://127.0.0.1:3001/simple/#heybaberia + - name: Test new budget file with json + run: bin/sitespeed.js --useHash -n 1 --budget.configPath test/budget.json --xvfb --budget.output json http://127.0.0.1:3001/simple/#heybaberia - name: Use AXE - run: bin/sitespeed.js --useAlias start --mobile -n 1 --utc --axe.enable --xvfb https://www.sitespeed.io/ + run: bin/sitespeed.js --useAlias start --mobile -n 1 --utc --axe.enable --xvfb http://127.0.0.1:3001/simple/ - name: Use Fireefox with --mobile - run: bin/sitespeed.js -b firefox --metrics.list --mobile -n 1 https://www.sitespeed.io/ --sustainable.enable --xvfb + run: bin/sitespeed.js -b firefox --metrics.list --mobile -n 1 http://127.0.0.1:3001/simple/ --sustainable.enable --xvfb - name: Test --multi - run: bin/sitespeed.js --multi -b chrome -n 1 test/prepostscripts/preSample.js https://www.sitespeed.io/documentation/ test/prepostscripts/postSample.js --xvfb + run: bin/sitespeed.js --multi -b chrome -n 1 test/prepostscripts/preSample.js http://127.0.0.1:3001/simple/ test/prepostscripts/postSample.js --xvfb --browsertime.cjs - name: Test --multi and --tcpdump - run: bin/sitespeed.js --multi -n 1 https://www.sitespeed.io/ https://www.sitespeed.io/documentation/ --tcpdump --xvfb + run: bin/sitespeed.js --multi -n 1 http://127.0.0.1:3001/simple/ http://127.0.0.1:3001/dimple/ --tcpdump --xvfb --browsertime.cjs - name: Test --multi with one file - run: bin/sitespeed.js --multi -n 3 test/prepostscripts/multi.js --xvfb + run: bin/sitespeed.js --multi -n 3 test/prepostscripts/multi.js --xvfb --browsertime.cjs - name: Test setting HTML output pageSummaries - run: bin/sitespeed.js https://www.sitespeed.io/ https://www.google.com -v -n 1 --html.pageSummaryMetrics transferSize.css --html.pageSummaryMetrics requests.httpErrors --html.pageSummaryMetrics score.performance --xvfb + run: bin/sitespeed.js http://127.0.0.1:3001/simple/ http://127.0.0.1:3001/dimple/ -v -n 1 --html.pageSummaryMetrics transferSize.css --html.pageSummaryMetrics requests.httpErrors --html.pageSummaryMetrics score.performance --xvfb - name: Test setting HTML output summary boxes - run: bin/sitespeed.js https://www.sitespeed.io/ -v -n 1 --html.summaryBoxes score.performance --html.summaryBoxes timings.firstPaint --xvfb + run: bin/sitespeed.js http://127.0.0.1:3001/simple/ -v -n 1 --html.summaryBoxes score.performance --html.summaryBoxes timings.firstPaint --xvfb - name: Run test with Graphite - run: bin/sitespeed.js https://www.sitespeed.io/ -n 1 --graphite.host 127.0.0.1 --xvfb + run: bin/sitespeed.js http://127.0.0.1:3001/simple/ -n 1 --graphite.host 127.0.0.1 --xvfb - name: Run test without a CLI run: xvfb-run node test/runWithoutCli.js - - name: Run tests with CruX - run: bin/sitespeed.js -b chrome -n 1 --crux.key ${{ secrets.CRUX_KEY }} --xvfb https://www.sitespeed.io - \ No newline at end of file + - name: Run test with Influx 1.8 + run: bin/sitespeed.js http://127.0.0.1:3001/simple/ -n 1 --influxdb.host 127.0.0.1 --xvfb --logToFile + - name: Run test with Influx 2.6.1 + run: bin/sitespeed.js http://127.0.0.1:3001/simple/ -n 1 --influxdb.host 127.0.0.1 --influxdb.port 8087 --influxdb.version 2 --influxdb.organisation sitespeed --influxdb.token sitespeed --xvfb + - name: Run Chrome test with config + run: node bin/sitespeed.js --config test/exampleConfig.json http://127.0.0.1:3001/simple/ --xvfb + - name: Run Chrome test using compare plugin + run: node bin/sitespeed.js --compare.id compare --compare.saveBaseline --compare.baselinePath test/ http://127.0.0.1:3001/simple/ --xvfb \ No newline at end of file diff --git a/.github/workflows/safari.yml b/.github/workflows/safari.yml index e5b10b0f8..6b31248b5 100644 --- a/.github/workflows/safari.yml +++ b/.github/workflows/safari.yml @@ -10,14 +10,20 @@ jobs: build: runs-on: macos-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Use Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: - node-version: '12.x' + node-version: '20.x' - name: Install dependencies run: | sudo safaridriver --enable npm ci + - name: Install local HTTP server + run: npm install serve -g + - name: Start local HTTP server + run: (serve test/data/html/ -l 3001&) - name: Run test - run: bin/sitespeed.js -b safari https://www.sitespeed.io/ + run: bin/sitespeed.js -b safari http://127.0.0.1:3001/ + - name: Run Safari test with config + run: node bin/sitespeed.js -b safari --config test/exampleConfig.json http://127.0.0.1:3001/ diff --git a/.github/workflows/sitespeed-io-action-example.yml b/.github/workflows/sitespeed-io-action-example.yml new file mode 100644 index 000000000..c388068b3 --- /dev/null +++ b/.github/workflows/sitespeed-io-action-example.yml @@ -0,0 +1,21 @@ +name: sitespeed.io action example +on: + push: + branches: + - main +jobs: + run-sitespeed: + runs-on: ubuntu-latest + name: running sitespeed.io + steps: + - name: code checkout + uses: actions/checkout@v4 + # Here we build our own container to make sure we test against our latest code + # but YOU can just used the latest version by specifying + # sitespeedio/sitespeed.io:VERSION + - name: Build Docker containers + run: | + docker buildx install + docker buildx build --load --platform linux/amd64 -t sitespeedio/sitespeed.io . + - name: running sitespeed.io container with arguments and optional Docker options + run: docker run -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io https://www.sitespeed.io --budget.configPath .github/budget.json -n 1 \ No newline at end of file diff --git a/.github/workflows/unittests.yml b/.github/workflows/unittests.yml index 521e9c9a0..760801d19 100644 --- a/.github/workflows/unittests.yml +++ b/.github/workflows/unittests.yml @@ -11,18 +11,21 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [10.x, 12.x, 14.x] + node-version: [18.x, 20.x] steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} - - name: Install dependencies + - name: Install dependencies and Chrome run: | npm ci + wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - + sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' sudo apt-get update - sudo ACCEPT_EULA=Y apt-get upgrade google-chrome-stable -y + sudo apt-get --only-upgrade install google-chrome-stable + google-chrome --version - name: Browser versions run: | google-chrome --version diff --git a/.github/workflows/windows.yml b/.github/workflows/windows.yml index 040841320..83c6b70ab 100644 --- a/.github/workflows/windows.yml +++ b/.github/workflows/windows.yml @@ -10,11 +10,11 @@ jobs: build: runs-on: windows-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Use Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v4 with: - node-version: '12.x' + node-version: '20.x' - name: Install sitespeed.io run: npm ci env: @@ -24,6 +24,12 @@ jobs: - name: Install dependencies run: choco install microsoft-edge --force - name: Run Edge test - run: node bin/sitespeed.js -b edge https://www.sitespeed.io/ + run: node bin/sitespeed.js -b edge https://www.sitespeed.io/ shell: cmd - + - name: Run Edge test with scripting + run: node bin/sitespeed.js -b edge --multi test/prepostscripts/multiWindows.cjs -n 1 + shell: cmd + - name: Run Edge test with config + run: node bin/sitespeed.js -b edge --config test/exampleConfig.json https://www.sitespeed.io/ + shell: cmd + \ No newline at end of file diff --git a/.github/workflows/windowsFull.yml b/.github/workflows/windowsFull.yml new file mode 100644 index 000000000..d00a451c7 --- /dev/null +++ b/.github/workflows/windowsFull.yml @@ -0,0 +1,35 @@ +name: Example to run sitespeed.io on Windows +on: + push: + branches: + - main + pull_request: + branches: + - main +jobs: + build: + runs-on: windows-latest + steps: + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: '20.x' + - name: Install sitespeed.io + run: npm install sitespeed.io -g + shell: bash + - name: Install dependencies + run: | + choco install ffmpeg + choco outdated + choco install python + choco install googlechrome + python -m pip install --upgrade --user pip + python -m pip install --upgrade --user setuptools + python -m pip install --user pyssim OpenCV-Python Numpy scipy + python -m pip --version + python -m pip show Pillow + python -m pip show pyssim + shell: cmd + - name: Example running test on Windows + run: sitespeed.io -n 1 --video --visualMetrics --viewPort 1024x768 https://www.sitespeed.io/ + shell: bash \ No newline at end of file diff --git a/.npmignore b/.npmignore index f5925189d..71e1eeb1c 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,4 @@ docker/* docs/* -test/* \ No newline at end of file +test/* +sitespeed-result/* \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 842ddff95..e6eace527 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,1114 @@ # CHANGELOG - sitespeed.io (we use [semantic versioning](https://semver.org)) -## UNRELEASED +## 31.0.1 - 2023-12-28 +### Fixed +* Hopefully removing "rsd" metrics in InfluxDB see [#4039](https://github.com/sitespeedio/sitespeed.io/pull/4039). +* Fix showing sustainable metrics in pages page [#4042](https://github.com/sitespeedio/sitespeed.io/pull/4042). + +## 31.0.0 - 2023-12-22 +### Breaking +* Updated to [Browsertime 20](https://github.com/sitespeedio/browsertime/releases/tag/v20.0.0). The new version of Browsertime renames `--userTimingWhitelist` to `--userTimingAllowList` so if you use that functionality you need to change the name before you upgrade! +### Fixed +* The new version of Browsertime also fix the bug in Firefox 121 on Mac so you can start it. + +## 30.11.0 - 2023-12-21 +### Fixed +* Moved functionality from co2 to sitespeed.io see [#4034](https://github.com/sitespeedio/sitespeed.io/pull/4034). + +### Added +* Upgraded the Docker container to use Firefox 121 [#4033](https://github.com/sitespeedio/sitespeed.io/pull/4033). +* Updated to [Browsertime 19.3.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1931---2023-12-18) [#4031](https://github.com/sitespeedio/sitespeed.io/pull/4031). + +## 30.10.0 - 2023-12-15 +### Added +* Add isSignificant metric to send to Graphite when using the compare plugin. Will send 0 if there's no siginificant change, else send the Cliffs delta to know how large the change is [#4030](https://github.com/sitespeedio/sitespeed.io/pull/4030). + +## 30.9.0 - 2023-12-12 +### Added +* Chrome and Edge 120 in the Docker container [#4027](https://github.com/sitespeedio/sitespeed.io/pull/4027). +* Updated to Browsertime 19.2.0. +* For users of the +1 container Lighthouse has been upgraded to 11.4.0. + +## 30.8.0 - 2023-12-07 +### Added +* Use Cliffs delta to know the size of the significant change [#4024](https://github.com/sitespeedio/sitespeed.io/pull/4024). +* Show if the graph has a siginficant change or not in the compare plugin [#4025](https://github.com/sitespeedio/sitespeed.io/pull/4025). + + +## 30.7.1 - 2023-12-07 +### Fixed +* The old settings for MannWhitneyU tests where confusing. We compared the the baseline is less than the current tests. This PR switched so we instead look if the current tests are greater than the baseline. We also added some better explaining text on result page[#4023](https://github.com/sitespeedio/sitespeed.io/pull/4023). + +## 30.7.0 - 2023-11-30 +### Added +* Show Axe individual issues on the page summary (not only on each individual run) [#4019](https://github.com/sitespeedio/sitespeed.io/pull/4019). Thank you [shaqb](https://github.com/shaqb) for pointing that out. The total number of issues is also sent to Graphite under *statistics.axe.violationIssues*. + +## 30.6.0 - 2023-11-29 + +### Added +* Make sure browser cpu benchmark is included in the baseline [#4015](https://github.com/sitespeedio/sitespeed.io/pull/4015). +* Fixed so baseline metrics is linked to graphs [#4016](https://github.com/sitespeedio/sitespeed.io/pull/4016). + +### Fixed +* Fix decimals on Google Web Vitals in baseline [#4014](https://github.com/sitespeedio/sitespeed.io/pull/4014). + +## 30.5.0 - 2023-11-28 +### Added +* The new compare plugin can now run without an id. The id will then be generated from the URL. If you don't give it an id, yoiu can only compare pages with the exact same URL [#4013](https://github.com/sitespeedio/sitespeed.io/pull/4013). + +## 30.4.1 - 2023-11-28 +### Fixed +* Fix for Firefox when generating the result HTML. It was broken since we where missing CPU data. + +## 30.4.0 - 2023-11-27 +### Fixed +* Upgrade to Browsertime 19.1.0 with a fix for Geckodriver so that the correct ARM version is installed on Mac Arm machines. +### Added +* The new compare plugin [PR 4009](https://github.com/sitespeedio/sitespeed.io/pull/4009) makes it easy to use Mann Whitney U/Wilcox for support to find performance egressions. Read all about the plugin in the [documentation](https://www.sitespeed.io/documentation/sitespeed.io/compare/). +* Firefox 120 in the Docker container [#4010](https://github.com/sitespeedio/sitespeed.io/pull/4010). +* Button to download the console logs, thank you [bairov pavel](https://github.com/Amerousful) for PR [#4007](https://github.com/sitespeedio/sitespeed.io/pull/4007). + +## 30.3.0 - 2023-11-09 + +### Added +* Upgrade to Browsertime 18.0.0. +* Added support to run user journeys with WebPageReplay [#4005](https://github.com/sitespeedio/sitespeed.io/pull/4005). + +### Fixed +* Downgrade puppeteer in the +1 container for Lighthouse, thank you [bairov pavel](https://github.com/Amerousful) for PR [#123](https://github.com/sitespeedio/plugin-lighthouse/pull/123). + +## 30.2.1 - 2023-11-03 +### Fixed +* The Docker+1 container got a fix for Lighthouse that didn't work in 30.2.0 (adding dev-shm when starting Chrome). + +## 30.2.0 - 2023-11-03 + +### Added +* Updated to Browsertime 17.19.0 with Edgedriver 119 [#3998](https://github.com/sitespeedio/sitespeed.io/pull/3998). +* Updated the Docker container with Edge 119. + +### Fixed +* The Docker+1 container has been upgraded to Lighthouse 11.3.0. +* Add support for getting verbose logs and Chromedriver logs from the recording phase of WebPageReplay [#3999](https://github.com/sitespeedio/sitespeed.io/pull/3999). + +## 30.1.0 - 2023-11-01 +### Added +* The Docker slim container uses Debian Bookworm [#3996](https://github.com/sitespeedio/sitespeed.io/pull/3996). +* Updated to Chrome 119 in the Docker container. + +### Fixed +* Fixed analysisstorer trying to save setup messages [#3995](https://github.com/sitespeedio/sitespeed.io/pull/3995). +* Updated to Browsertime 17.18.1 [#3992](https://github.com/sitespeedio/sitespeed.io/pull/3992). + +## 30.0.0 - 2023-10-25 +### Breaking changes +* Drop support for NodeJS 16 (security ended in September). + +### Added +* The Docker container now uses NodeJS 20. +* Updated to Firefox 119 and Edge 118 in the Docker container. +* Updated the base container to use latest tagged Ubuntu 22.04. + +## 29.9.0 - 2023-10-23 +### Added +* Updated Browsertime to 17.18.0: + * Updated to Chromedriver 119 [#2003](https://github.com/sitespeedio/browsertime/pull/2003). 119 works with both Chrome 118 and 119 so it fixes [#1197](https://github.com/sitespeedio/browsertime/issues/1997). + * Add support for network idle method to know when to end a test that uses network logs. Uses Bidi for Firefox and CDP for Chrome to listen on network events to know when to end a test. By default 5 seconds idle network time ends a tests (you could have network responses that hasn't arrived yet) [#1960](https://github.com/sitespeedio/browsertime/pull/1960). Potentially this can help SPA users or users where the page uses iframes. You can try it out by adding `--browsertime.pageCompleteCheckNetworkIdle true` to your command line. This is still some work in progress but feel free to try ut out. + * The resources script now collects number of resources served from the browser cashe for browser that supports that through the resource timing API [#1998](https://github.com/sitespeedio/browsertime/pull/1998) + * Make sure timer always is cleared. There was case of where we do a rase beteween a promise and a timeout where the timeout timer wasn't cleared/removed [#2005](https://github.com/sitespeedio/browsertime/pull/2005). + * Better way to get the url when you use GeckoProfiler.stop for Firefox, thank you [Nazım Can Altınova](https://github.com/canova) for PR [#1999](https://github.com/sitespeedio/browsertime/pull/1999) + +## 29.8.0 - 2023-10-16 +### Added +* Updated to Chrome/Chromedriver 118 in the Docker container [#3975](https://github.com/sitespeedio/sitespeed.io/pull/3975). +* Users of the +1 container will get Lighthouse 11.2.0 from this release. + +### Fixed +* Updated to Axe-core 4.8.2 [#3977](https://github.com/sitespeedio/sitespeed.io/pull/3977). +* A better error message when ypu try to measure a navigation without navigating [#3980](https://github.com/sitespeedio/sitespeed.io/pull/3980). + +## 29.7.0 - 2023-09-27 +### Added +* Updated Firefox to 118 in the Docker container [#3968](https://github.com/sitespeedio/sitespeed.io/pull/3968). +* Users of the +1 container will have Lighthouse version 11.1.0. + +## 29.6.0 - 2023-09-22 +### Added +* Updated Chrome and Edge to 117, also NodeJS 18.18.0 and a latest updated version of Ubuntu 22.04 [#3965](https://github.com/sitespeedio/sitespeed.io/pull/3965). +* Updated to Axe core 4.8.1 [#3964](https://github.com/sitespeedio/sitespeed.io/pull/3964). + +## 29.5.0 - 2023-09-05 +### Added +* Updated to Firefox 117 and Edge 116 in the Docker container [#3958](https://github.com/sitespeedio/sitespeed.io/pull/3958). +* Note that if you use the BiDi HAR for Firefox this version only work with Firefox 117+. If you use Firefox < 117 you need to stay on previous sitespeed.io version until you upgrade. + +## 29.4.0 - 2023-08-31 +### Added +* Display axe-core version on the summary page (before it was only showed on each run page) [#3950](https://github.com/sitespeedio/sitespeed.io/pull/3950). +* Display third-party-web and wappalyzer version in the HTML output (by upgrading to [Coach 8.0.0](https://github.com/sitespeedio/coach-core/blob/main/CHANGELOG.md#800---2023-08-30)) [#3953](https://github.com/sitespeedio/sitespeed.io/pull/3953). +* Display co2 version in the HTML output [#3953](https://github.com/sitespeedio/sitespeed.io/pull/3954). + +## 29.3.0 - 2023-08-16 +### Added +* Chrome and Chromedriver 116. + +## 29.2.1 - 2023-08-16 +### Fixed +* Updated Browsertime with a new minor version of Chromederiver and updated Docker container with a new minor version. +* Uppdated CO2 to 0.13.6 [#3936](https://github.com/sitespeedio/sitespeed.io/pull/3936). +* Make sure catched errors gets to the standard out and after budget/open the browser [#3939](https://github.com/sitespeedio/sitespeed.io/pull/3939). + +## 29.2.0 - 2023-08-08 +### Fixed +* Another fix for making sure annotations for Graphite have the correct timestamp [#3931](https://github.com/sitespeedio/sitespeed.io/pull/3931). +* Update dayjs and ora dependencies. + +### Added +* Firefox 116 in the Docker container. + + +## 29.1.3 - 2023-08-03 +### Fixed +* HTML result page was broken when you had element timings that was not images. Thank you [dooglewoogle](https://github.com/dooglewoogle) for reporting, fixed in [#3927](https://github.com/sitespeedio/sitespeed.io/pull/3927). + +## 29.1.2 - 2023-07-31 +### Fixed +* Updating Browsertime that makes it possible to run the AMD docker image on ARM M1 Macs. Add `--platform linux/amd64` and in Docker desktop turn on *"Use Rosetta for x86/amd64 emulation"*. + +## 29.1.1 - 2023-07-30 + +### Fixed +* Reading configuration files on Windows failed. Thank you [Edson1337](https://github.com/Edson1337) for reporting, fixed in [#3921](https://github.com/sitespeedio/sitespeed.io/pull/3921). + +## 29.1.0 - 2023-07-25 + +### Added +* I finally [archived the old dashboard setups for Graphite](https://github.com/sitespeedio/grafana-bootstrap-docker) and moved the dashboards to [the main repository](https://github.com/sitespeedio/sitespeed.io/tree/main/docker/grafana/provisioning/dashboards). I also updated the [docker compose file](https://github.com/sitespeedio/sitespeed.io/blob/main/docker/docker-compose.yml) to provision the dashboards and Graphite and the new JSON datasource. I've been thinking of doing that for years but never got around. With the release of a new dashboard in 29.0.0 I missed adding that we now also use a JSON datasource. The documentation is updated but need some more love, that will come the coming week. + +## 29.0.0 - 2023-07-25 +### Breaking change + +The breaking changes in this release will not break anything, however some behaviours are changed in rare cases, please read: + +* Changed timestamp for Graphite/InfluxDB metrics/annotations. The old implementation used the start time for the test all metrics sent except *browsertime.run* metrics (data for each run). This fix changes so metrics (and annotations) uses the *browsertime.pageSummary* runTime (when the actual first iteration happen for a test). This makes more sense if you test multiple pages within the same test [#3900](https://github.com/sitespeedio/sitespeed.io/pull/3900). + +* When the slug concept was introduced in 17.0.0 also a bug was accidently added that add the domain as a slug if the slug was missing. As long as you added `--slug` that was not a problem and you will not be affected by this bug. However if you do not use `--slug` (you really should since 20.0.0) the slug portion would be automatically populated [#3901](https://github.com/sitespeedio/sitespeed.io/pull/3901) with the domain. If you send your metrics to Graphite and do not use `--slug` and use the dashboard that use the slug, you need to add `--slug` to your run for your dashboards to continue to work. + +### Fixed +* Crux: Remove experimental from INP when getting Crux data [#3906](https://github.com/sitespeedio/sitespeed.io/pull/3906). + +### Added +* New Chrome 115 and Chromedriver 115 (and a fix for the broken Chromedriver 115 on Mac). +* New Edge and Edgedriver 115 +* New Browsertime 17.14.0. Most notable change is that if you collect the Chrome devtools trace using `--cpu` we will now also collect the number of elements that needs recalculate styles before FCP/LCP. There will be a blog post about this change later on. +* Updated the [main page merics dashboard](https://dashboard.sitespeed.io/d/9NDMzFfMk/page-metrics), you can download the new version [here](https://github.com/sitespeedio/grafana-bootstrap-docker/blob/main/dashboards/graphite/PageMetrics.json). The new dashboard needs to have the three plugins installed: ```grafana-piechart-panel,marcusolsson-json-datasource,marcusolsson-dynamictext-panel```. If you are unsure how to do that, more documentation will come soon. + +## 28.2.0 - 2023-07-07 +### Added +* Updated the Docker container to use Firefox 115. + +## 28.1.0 - 2023-06-27 +### Added +* Use `--graphite.proxyPath` to add extra proxy path to an annotation event in Graphite. Thank you [Jonathan Goodman](https://github.com/Shalankwa) for PR [#3893](https://github.com/sitespeedio/sitespeed.io/pull/3893). + +## 28.0.0 - 2023-06-26 + +### Breaking change +There where a bug in how the `browsertime.pageSummary` message was created where data was attached to the browserScript key (for example, the HAR file was attached to the element). This has been fixed and everything will work as before except if you have created your own plugin and listen to `browsertime.pageSummary` messages and where using the faulty attached data. + +The changes where done in [#3888](https://github.com/sitespeedio/sitespeed.io/pull/3888) and [#3890](https://github.com/sitespeedio/sitespeed.io/pull/3890). + +### Fixed +* Updated Coach core to 7.2.1 that catch if local or session storage isn't accessible. + + +## 27.9.3 - 2023-06-19 +### Fixed +* Upgraded Browsertime with the following fixes: + * Fix --debug mode. Thank you [Gregory Mierzwinski](https://github.com/gmierz) for PR [#1959](https://github.com/sitespeedio/browsertime/pull/1959). + * Update ff-test-bidi-har-export to 0.0.11 that fixes some error logs [#1961](https://github.com/sitespeedio/browsertime/pull/1961). + +## 27.9.2 - 2023-06-14 +### Fixed +* Make sure config files are read sync [#3882](https://github.com/sitespeedio/sitespeed.io/pull/3882). + + +## 27.9.1 - 2023-06-12 +### Fixed +* Upgraded Browsertime that logs if LCP is not present (instead of logging null) +* Fix when configure to log to file (that was broken when we moved to ESM) [#3879](https://github.com/sitespeedio/sitespeed.io/pull/3879). + +## 27.9.0 - 2023-06-12 +### Added +* Firefox and Edge 114 in the Docker container. +* Updated coach-core with latest third party web, wappalyzer and a fix for when Chrome do not fire FCP [#3876](https://github.com/sitespeedio/sitespeed.io/pull/3876) + + +## 27.8.0 - 2023-06-07 +### Added +* Added upcoming exporting of the HAR file from Browsertime for the upcoming API [#3871](https://github.com/sitespeedio/sitespeed.io/pull/3871). + +## 27.7.0 - 2023-06-01 +### Added +* New Chrome 114 in the Docker container and updated Chromedriver (114) with a new Browsertime [#3868](https://github.com/sitespeedio/sitespeed.io/pull/3868). +* Use latest Co2 [#3867](https://github.com/sitespeedio/sitespeed.io/pull/3867). +* Updated to latest Axe core [#3863](https://github.com/sitespeedio/sitespeed.io/pull/3863). +* Added label to test runs in the API [#3869](https://github.com/sitespeedio/sitespeed.io/pull/3869). + +## 27.6.5 - 2023-05-26 +### Fixed +* Bumped Browsertime with a fix for host-resolver-rules, thank you [Mikhail](https://github.com/atuchin-m) for PR [#1953](https://github.com/sitespeedio/browsertime/pull/1953). +* Hopefully fixed the broken manifest file for the Docker containers by updating the Docker build actions to latest versions and added provenance: false. + +## 27.6.4 - 2023-05-20 +### Fixed +* New fixed version of the ARM container with a working version of Firefox [#3844](https://github.com/sitespeedio/sitespeed.io/pull/3844) +* Fixes for the API: Pass on scriptname and pass on Browsertime data in the result. +* New Browsertime version(s) with updated Interaction To Next Paint script and updated Chromedriver/Edgedriver to 113 [#3851](https://github.com/sitespeedio/sitespeed.io/pull/3851) and [#3853](https://github.com/sitespeedio/sitespeed.io/pull/3853). +* Upgrade yargs, ora, fs-extra, axe-core [#3852](https://github.com/sitespeedio/sitespeed.io/pull/3852). + +## 27.6.3 - 2023-05-15 +### Fixed +* Bumped the Ubuntu image + updated to latest Node JS LTS + included ImageMagick again in the Docker container [#3841](https://github.com/sitespeedio/sitespeed.io/pull/3841). + +## 27.6.2 - 2023-05-11 +### Fixed +* Finally fixed so you can use scripting from the API and removed the paramater testType since we can find that out programatically. + +## 27.6.1 - 2023-05-10 + +### Fixed +* Another fix to the API. + +## 27.6.0 - 2023-05-10 +### Fixed +* More fixes to the upcoming API, and fixing wrong exit code. + +### Added +* Firefox and Edge 113 in the Docker container. + +## 27.5.1 - 2023-05-03 +### Fixed +* Another fix for storing result data as JSON. + +## 27.5.0 - 2023-05-03 +### Added +* Use Chrome 113 in the Docker container. + +### Fixed +* Fixed wrong error code when exiting, introduced earlier today. +* More tuning of the coming API. +## 27.4.1 - 2023-05-03 + +### Fixed +* Fixed the silent part of the API. +## 27.4.0 - 2023-05-03 +### Added +* Prepare to add support for the sitespeed.io API where you can launch tests on other servers. This is not ready yet but a makes it easier for me to test the upcoming functionality. +## 27.3.1 - 2023-04-28 +### Fixed +* Fix broken --firstParty parameter as reported in [#3822](https://github.com/sitespeedio/sitespeed.io/issues/3822) and fixed in [#3823](https://github.com/sitespeedio/sitespeed.io/pull/3823) +* Fix broken crawler [#3820](https://github.com/sitespeedio/sitespeed.io/pull/3820). +## 27.3.0 - 2023-04-11 +### Added +* Upgraded Firefox to 112 and added new Browsertime with updated HAR version. + +### Fixed +* Better handling if getting the HAR fails [#3810](https://github.com/sitespeedio/sitespeed.io/pull/3810). +## 27.2.0 - 2023-04-07 +### Added +* Updated Edge and Edgedriver to 112. + +## 27.1.0 - 2023-04-05 + +### Added +* Chrome 112 in the Docker container. +* Updated Browsertime: + * Increased the default wait time from 2 to 5 seconds when a element a clicked and the page complete check runs [#1931](https://github.com/sitespeedio/browsertime/pull/1931) + * Upgraded to Chromedriver 112 [#1932](https://github.com/sitespeedio/browsertime/pull/1932). + * If you use `--headless` Chrome will use the new headless switch [#1933](https://github.com/sitespeedio/browsertime/pull/1933). +* The plugin-lighthouse uses Lighthouse 10.1.0 and --headless=new + +## 27.0.0 - 2023-04-04 + +Wow it's been many months since I did a new release wih sitespeed.io. I've had a lot to do in my personal life, a lot at work and low energy to finish the big changes I've done in both Browsertime and sitespeed.io. And here it is: 27.0.0. It can still have some rough edges so please [report any bugs](https://github.com/sitespeedio/sitespeed.io/issues) and I will try to fix them ASAP. + +There's been many additions to Browsertime the last months and I'll update the CHANGELOG and make sure the documentation in uptodate the coming weeks. + +### Breaking changes +The project was transitioned to a [pure ESM package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) both Browsertime [#1859](https://github.com/sitespeedio/browsertime/pull/1859) and sitespeed.io [#3769](https://github.com/sitespeedio/sitespeed.io/pull/3769). That allow us to stay uptodate with dependencies. This is important for us and will make the project easier to maintain. + +#### CLI users +If you are a command line user and use [scripting](https://www.sitespeed.io/documentation/sitespeed.io/scripting/), you will need to do a change to your scripts or add some extra configuration. + +**The quick fix**: Rename your *.js* scripting files to *.cjs* that way NodeJS will treat your file as a common JS file and everything will just work. For example if you have a file names `login.js` you can rename that to `login.cjs` and make sure you load that new file. Then sitespeed.io 27.0.0 will just work as before. + +**The best fix**: +Change your code so your scripts also follows ESM. If you have simple scripts you probably just need to change your exports. The old way looked like this: + +``` +module.exports = async function(context, commands) { +... +} +``` + +change that to: +``` +export default async function (context, commands) { +... +} +``` + +If you have more complicated scripts, follow the [ESM package guide](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). + +Then rename your file to be named *.mjs. If your file is named `collect.js` change it to `collect.mjs`. This is the best fix and will work 100% of the time. That way NodeJS will know that you are using the ESM standard. You can read more in [how NodeJs choose to load files](https://nodejs.org/docs/latest-v18.x/api/packages.html#determining-module-system). + + +**Another quick fix alternative**: As a last alternative add `--browsertime.cjs` as a parameter to your test. That way the scripting file will be treated as a commonjs file. This is a hack, so to make sure it works, the user that runs Browsertime need to have write privileges to the folder where you have your scripting files. Browsertime will create a package.json file on the same levels as your script file. If you already have a package.json there, it will be overwritten. + +#### Non cli users +Documentation coming soon. + +Read [Sindre Sorhus Pure ESM package guide](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) on how you can move your project. + +#### Plugin creators +Documentattion coming soon. You will need to upgrade your plugin to ESM. You can check how we [did it](https://github.com/sitespeedio/plugin-lighthouse/pull/111) for the Lighthouse plugin. + +#### Remove ImageMagick dependency +We moved to use a new Visual Metrics script as default contributed by Gregory Mierzwinski that do not use ImageMagick. Mozilla has used this script for many months and we have internally used it in our test infrastructure since it was first released. + +If you run sitespeed.io direct using NodeJs (and not using Docker) you need to install two new Python dependencies OpenCV-Python Numpy. They are used instead of ImageMagick. + +```python -m pip install --user OpenCV-Python Numpy``` + +If you still want to use ImageMagick you can do that by setting ```browsertime.visualMetricsPortable false``` + + +### Fixed +* All dependencies has been updated to latest versions [#3774](https://github.com/sitespeedio/sitespeed.io/pull/3774). + +### Added +* [A lot of things has happened](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md) in Browsertime: + * There's a new better way to get the HAR from Firefox using WebDriver BiDi network events. Thank you Julian Descottes and others at Mozilla that made this happen! With the new version we hope to see less overhead getting the HAR + it works on Firefox on Android #1918. You can turn it on with --browsertime.firefox.bidihar. + * Updated to Geckodriver 0.33 + * Fixed the interaction to next paint error message that started to appear in latest Chrome + * Safer check for getting last meaningful paint + * Log the CPU benchmark metric to the console. This is useful (at least for me) when debugging instances with a lot of instability. + * In Chrome 111 some metrics become more instable when running on host with limited CPU. This change also exists in 112 beta. However we where missing out on a couple of command line magic to disable features in Chrome. + * On Linux you can use taskset to assing FFMPEG to specific CPUs using --videoParams.taskset "0,5,7,9-11" . It will start FFMPEG with taskset -c to pin FFMPG to specific CPU(s). Specify a numerical list of processors. The list may contain multiple items, separated by comma, and ranges. For example, "0,5,7,9-11". Use it together with isolcpus. + * If you use a rooted Samsung A51 you can now choose the CPU speed (min/middle/max) using --android.pinCPUSpeed min|middle|max + * Expose chrome-remote-interface client to scripting. This makes it so much easier to run whatever CDP command. Get the raw version `commands.cdp.getRawClient()`. + * Pin CPU freq to fastest for Samsung A51 (if you have a rooted device) +* Updated to Chrome 111, Firefox 111 and Edge 111 in the Docker container. +* The Lighthouse plugin has been updated to Lighthouse 10. +* Support for InfluxDb 2, thank you [Damien-Ar](https://github.com/Damien-Ar) for PR [#3711](https://github.com/sitespeedio/sitespeed.io/pull/3711) and [Roman Voitseshevsky](https://github.com/boitcex) for adding tests in [#3790](https://github.com/sitespeedio/sitespeed.io/pull/3790). +## 26.1.0 - 2022-10-21 +### Added +* Update to 0.10.4 co2 and make it possible change model [#3736](https://github.com/sitespeedio/sitespeed.io/pull/3736) and the to 0.11.3 in [#3741](https://github.com/sitespeedio/sitespeed.io/pull/3741) +* Upgraded Docker container to use Chrome, Edge and Firefox 106. +* Show start/end date for collected Crux data [#3740](https://github.com/sitespeedio/sitespeed.io/pull/3740) + +### Fixed +* Better explanation for some PageXray metrics [#3743](https://github.com/sitespeedio/sitespeed.io/pull/3743). + +## 26.0.1 - 2022-09-27 +### Fixed +* Upgrading to [Browsertime 16.17.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16170---2022-09-27) that contains a fix to collect battery temperature on Android, making it possible to send the data to Graphite again. + +## 26.0.0 - 2022-09-23 + +Hi and welcome to 26.0.0! There's a couple of small fixes and additions and one breaking change. You are only affected by the breaking change if you used to use `--graphite.perIteration` (sending data for all iterations to Graphite) or if you used `--graphite.skipSummary` (do not send summary information). Please read the changed section if you are affected! + +When you upgrade to 26.0.0 you will have an easier way of sending data per run to Graphite, there will be a blog post better explaining how you can use it. + +### Changed +Sending metrics per run to Graphite: +* The default setup did miss a lot of important performance metrics, so you needed to set them up yourself. That is fixed in this PR. +* There where a lot of data sent from PageXray, third party and the coach per run. That was not smart since those metrics rarely change between runs and take a lot of space. This PR sets default so none of those metrics are sent +* We introduce a limited set of run metrics from Browsertime (visual metrics and Google Web Vitals and a couple of more) that can be used when sending data per run. This will help you keep track of those metrics together with the default median/min/max values. More info coming up. It's enabled by default, disable it with `--browsertime.limitedRunData false` +* Sending data per run to Graphite was broken: We sent a new key per run meaning it will take up a lot of extra space in Graphite. With this fix we send them under the run key. That way we can configure Graphite to keep data under that key that happened every 20 s (or however fast it takes to do one run) and then automatically remove the data after a week. +* Graphite configuration `--graphite.perIteration` and `--graphite.skipSummary` is removed. You can now configure which data to send to Graphite by using `--graphite.messages`. By default we send _pageSummary_ (data summarised per URL) and _summary_ (data summarised per domain). If you want to send _pageSummary_ and _run_ data (data for each run) you can do that with by adding `--graphite.messages run` `--graphite.messages pageSummary`. +* We removed the possibility to send VisualProgress and videoRecordingStart data to the datasource since that is something you do not need there. +* We updated Grafana and the Graphite container to latest versions. The Graphite container contains _storage-schemas.conf_ configuration that is a good default: +``` +[sitespeed_crux] +pattern = ^sitespeed_io\.crux\. +retentions = 1d:1y + +[sitespeed_run] +pattern = ^sitespeed_io\.(.*)\.(.*)\.run\. +retentions = 20s:8d + +[sitespeed] +pattern = ^sitespeed_io\. +retentions = 30m:40d +``` + +When you send data per run to Graphite it is stored every 20 second (do not make runs more often than that) and saved for 8 days. If you test many URLs this can still be a lot of data so use https://m30m.github.io/whisper-calculator/ to calculate how much space you need. + +See PR [#3721](https://github.com/sitespeedio/sitespeed.io/pull/3721). + +### Added +* Checkout the [pre built Raspberry Pi image](https://github.com/sitespeedio/raspberrypi) for running sitespeed.io tests on your Android phone. +* Upgraded to Firefox 105 and Edge 105 in the Docker container. +* Upgraded to Browsertime 16.16.0 +* Include --preURL information in the latest storer info [#3729](https://github.com/sitespeedio/sitespeed.io/pull/3729). +### Fixed +* Fix graphite.sendAnnotation option [#3726](https://github.com/sitespeedio/sitespeed.io/pull/3726). +* Show timestamp when each run happens on the run page [#3730](https://github.com/sitespeedio/sitespeed.io/pull/3730). +## 25.11.0 - 2022-09-04 +### Added +* Make it possible to configure run options for AXE (before you could only configure configuration options) [#3718](https://github.com/sitespeedio/sitespeed.io/pull/3718). Checkout [how to configure AXE](https://www.sitespeed.io/documentation/sitespeed.io/axe/#configure-axe).* Removed showing if the page is an AMP page (that battle was won a long time ago) and instead show information from the Network information API when its available [#3719](https://github.com/sitespeedio/sitespeed.io/pull/3719). + +## 25.10.0 - 2022-08-31 +### Added +* Updated to Chrome 105 and Firefox 104 in the Docker container [#3717](https://github.com/sitespeedio/sitespeed.io/pull/3717). + +## 25.9.1 - 2022-08-30 +### Fixed +* Updated to [Browsertime 16.5.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16151---2022-08-30) thar makes sure long tasks are measured direct after the test finish. This fixes late long tasks that happens on slow devices caused by Browsertime collecting metrics. +## 25.9.0 - 2022-08-30 +### Added +* Updated to Browsertime 16.15.0 that include your Android phones connected wifi name in the result. That is now showed in the runtime settings page. + +* Show relative standard deviation on the compare runs page [#3716](https://github.com/sitespeedio/sitespeed.io/pull/3716). + +## 25.8.3 - 2022-08-28 +### Fixed +* Ooops, it turns out 25.8.2 didn't fix the preWarm issue, it's fixed in [3715]( +https://github.com/sitespeedio/sitespeed.io/pull/3715). +## 25.8.2 - 2022-08-26 +### Fixed +* Updated Browsertime to 16.14.2 that fixes `--browsertime.preWarmServer` on Android and iOS. +## 25.8.1 - 2022-08-26 +### Fixed +* Updated Browsertime to 16.14.1 that adds a guard for null values in rsd (this fixes the warning logs happening in 25.8.0). +## 25.8.0 - 2022-08-26 +### Added +* Updated to [Browsertime 16.14.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16140---2022-08-26). that collects relative standard deviation for metrics and the number of processes that runs on the server when you start a test. +## 25.7.3 - 2022-08-17 +### Fixed +* Upgraded to [Browsertime 16.13.3](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16133---2022-08-17) that fixes a bug when setting cookies when navigating in Chrome/Edge when using scripting. + +## 25.7.2 - 2022-08-14 +### Fixed +* Getting only some data from the CrUX API broke the HTML generation as reported in [#3708](https://github.com/sitespeedio/sitespeed.io/issues/3708) and fixed in [#3709](https://github.com/sitespeedio/sitespeed.io/pull/3709). +* Updated to [Browsertime 16.13.2](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16132---2022-08-14) that fixes so the lastCPULong task is not added to the HAR. + +## 25.7.1 - 2022-08-10 +### Fixed +* The +1 container now uses PSI plugin version 4.1.0 (before 4.0.1). +* Updated to [Browsertime 16.13.1](https://github.com/sitespeedio/browsertime/releases/tag/v16.13.1) that always get the id from the Android phone when you run android tests. +* The latest storer plugin sometimes missed writing Android data to the JSON. Fixed in [#3707](https://github.com/sitespeedio/sitespeed.io/pull/3707). +## 25.7.0 -2022-08-08 +### Added +* Updated the Docker container to use Chrome 104 and Edge 104. +* Updated to [Browsertime 16.12.0](https://github.com/sitespeedio/browsertime/releases/tag/v16.12.0) that uses Chromedriver 104. +* Updated to [Browsertime 16.13.0](https://github.com/sitespeedio/browsertime/releases/tag/v16.13.0) that uses Edgedriver 104 and updated Selenium version. +## 25.6.0 - 2022-08-01 +### Added +* Updated to Firefox 103 in the Docker container. +* The +1 container uses Lighthouse 9.6.4. +* Removed videojs and use plain video element to display the video [#3697](https://github.com/sitespeedio/sitespeed.io/pull/3697). This makes the result pages cleaner. + +### Fixed +* Fixed error message when you run Axe and analysisstorer at the same time [#3703](https://github.com/sitespeedio/sitespeed.io/pull/3703). +## 25.5.1 - 2022-07-16 +### Fixed +* No change but when 25.5.0 was publsihed Docker had problems so the container was not pushed as reported by [Marco Fontani](https://github.com/mfontani) (thank you!). +## 25.5.0 - 2022-07-14 +### Added +* New scp plugin [#3691](https://github.com/sitespeedio/sitespeed.io/pull/3691). The plugin is exprimental and documentation is coming in a couple of releases. + +### Fixed +* Upgraded to [Browsertime 16.1.3](https://github.com/sitespeedio/browsertime/releases/tag/v16.11.3) that fixes: + * If one of the visual elements failed, all failed. Fixed in [#1818](https://github.com/sitespeedio/browsertime/pull/1818). + * Use buffered long tasks instead of injecting the measurement in the page [#1817](https://github.com/sitespeedio/browsertime/pull/1817). + * Fixed broken Chromedriver and Geckodriver install on Windows. +* Upgraded NodeJS in the Docker container + updated to latest updated Ubuntu 20. + +## 25.4.0 - 2022-07-05 +### Added +* Show how many long tasks happens before LCP [#3686](https://github.com/sitespeedio/sitespeed.io/pull/3686) and show when last long task happen [#3687](https://github.com/sitespeedio/sitespeed.io/pull/3687). + +### Fixed +* Updated Browsertime with a fix for Geckodriver: when you run sitespeed.io on a Raspberry Pi it will pickup Geckodriver from the PATH. + +## 25.3.2 - 2022-06-30 +### Fixed +* Another go at fixing the preWarmServer issue [#3683](https://github.com/sitespeedio/sitespeed.io/pull/3683). + +## 25.3.1 - 2022-06-29 +### Fixed +* Upgraded to [Browsertime 16.11.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16111---2022-06-29) that fixes the preWarmServer issue reported in [#3682](https://github.com/sitespeedio/sitespeed.io/issues/3682). + +## 25.3.0 - 2022-06-28 +### Fixed +* Updated to [Browsertime 16.10.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16101---2022-06-26) that checks that the CDP port is not used before claiming it. + +### Added +* Updated to Firefox 102 and Edge 103 in the Docker container. +* Updated to [Browsertime 16.11.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#16110---2022-06-28). + +## 25.2.1 - 2022-06-23 +### Fixed +* Bug fix for adding custom CSS from plugins, than you [Josh Duncan](https://github.com/josh-lr) for PR [#3679](https://github.com/sitespeedio/sitespeed.io/pull/3679). + +## 25.2.0 - 2022-06-22 +### Added +* Updated the Docker container to use Chrome 103. + +## 25.1.1 - 2022-06-20 +### Fixed +* Upgraded to Browsertime [16.9.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1691---2022-06-19) that upgraded to Throttle 4 that internally uses `ip route` instead of `route` (one less dependency). +## 25.1.0 - 2022-06-15 +### Added +* Updated Browsertime to [16.9.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1690---2022-06-15) with the following changes: + * New `wait.byCondition` command. Thank you [Icecold777](https://github.com/Icecold777) for PR [#1803](https://github.com/sitespeedio/browsertime/pull/1803). + * Collect number of CPU longtasks before largest contentful paint [#1806](https://github.com/sitespeedio/browsertime/pull/1806). + * Instead of throwing errors and exit the tests if the page hasn't finished loading after 5 minutes, we now gracefully ends the test after 2 minutes (you can change that time with `--maxLoadTime`). That makes more sense than just throwing errors [#1810](https://github.com/sitespeedio/browsertime/pull/1810). + +## 25.0.0 - 2022-06-10 + +### Changed +`--debug` do not add verbose logging anymore, instead it uses Browsertimes debug mode. You can use [breakpoints](https://www.sitespeed.io/documentation/sitespeed.io/scripting/#breakpoint) to debug your script. You can add breakpoints to your script that will be used when you run in `--debug` mode. At each breakpoint the browser will pause. You can continue by adding `window.browsertime.pause=false;` in your developer console. + +Debug mode works in Chrome/Firefox/Edge when running on desktop. It do not work in Docker and on mobile. When you run in debug mode, devtools will be automatically open so you can debug your page. + +In debug mode, the browser will pause after each iteration. + +[Read the documentation](https://www.sitespeed.io/documentation/sitespeed.io/scripting/#debug) on how to debug sitespeed.io scripts. +### Added +* Added Firefox 101 and Edge 102 in the Docker container. + +### Fixed +* Updated to Axe-core 4.2.2 [#3673](https://github.com/sitespeedio/sitespeed.io/pull/3673) + +## 24.9.0 - 2022-05-25 +### Added +* Updated the Docker container to use Chrome 102 [#3665](https://github.com/sitespeedio/sitespeed.io/pull/3665). + +## 24.8.1 - 2022-05-21 + +### Fixed +* Better fix for getting the correct browser name and version when storing latest run data [#3661](https://github.com/sitespeedio/sitespeed.io/pull/3661). + +### Added +* Updated to [Browsertime 16.7.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1670---2022-05-20) from 16.4.0. With the latest versions we get: + * Use `--browsertime.videoParams.thumbsize` to set the max size of the filmstrip thumbnails. + * Interaction to next paint is collected for browsers that supports it (useful for your user journeys) + * The time when the last CPU long task happens is a new metric, thank you Andy Davies for that idea! +* You can now use groupAlias directly in a text file [#3655](https://github.com/sitespeedio/sitespeed.io/pull/3655). You can read how in the [updated documentation](https://www.sitespeed.io/documentation/sitespeed.io/configuration/#analyse-by-urls). +* Added an option for using the full Graphite namespace when latest screenshots/video is stored for a test [#3660](https://github.com/sitespeedio/sitespeed.io/pull/3660). +### Fixed +* If you set a user agent for Browsertime, also use it for the crawler [#3652](https://github.com/sitespeedio/sitespeed.io/pull/3652). +* Fix missing browser info when storing latest run data [#3658](https://github.com/sitespeedio/sitespeed.io/pull/3658). + +## 24.7.0 - 2022-05-11 +### Added +* Updated to [Browsertime 16.4.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1640---2022-05-11) fixes a bug for LCP in the video and also output when LCP happens in the video. + +### Fixed +* Make sure we got CLS from Browsertime when we try to render it [#3650](https://github.com/sitespeedio/sitespeed.io/pull/3650). +## 24.6.0 - 2022-05-10 +### Added +* Updated to [Browsertime 16.3.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1630---2022-05-07) that collects Largest Contentful Paint from the browser (if the browser suppoorts the LCP API). + +* Show total download time per domain [#3648](https://github.com/sitespeedio/sitespeed.io/pull/3648). +## 24.5.1 - 2022-05-06 +### Fixed +* Reverted to Ubuntu 20 in the Docker container. Ubuntu 22 gave Firefox problems on ARM and we also seen other problems with NodeJS in that container. +* Updated PageXray/Coach Core that include SSL times in the total timings per domain (that was missed before). +* Added more safe check when we miss Crux data. +## 24.5.0 - 2022-05-05 +### Added +* Add INP and TTFB to the CRUX metrics [#3645](https://github.com/sitespeedio/sitespeed.io/pull/3645). +* Updated the Chrome USer Experience dashboard to include the new metrics. You can see the dahsboard [here](https://dashboard.sitespeed.io/d/t_bhsNGMk/chrome-user-experience-report) and download the new one from [here](https://github.com/sitespeedio/grafana-bootstrap-docker/blob/main/dashboards/graphite/ChromeUserExperienceReport.json). + +### Fixed +* Bumped Browsertime with a new fix release for the upcoming portable visual metrics script. +## 24.4.0 - 2022-05-04 +### Added +* Updated to Edge 101 in the Docker container. Updated to latest [Browsertime 16.2.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1620---2022-05-01) with Edgedriver and Chromedriver 101. +* Updated to Firefox 100 in the Docker container. + +### Fixed +* If `--firstParty` do not match any URL, make sure we still show first vs third party [#3643](https://github.com/sitespeedio/sitespeed.io/pull/3643). +* Updated to latest NodeJs in the slim container. + +## 24.3.0 - 2022-04-27 +### Added +* Updated to Chrome 101 in the Docker container [#3641](https://github.com/sitespeedio/sitespeed.io/pull/3641). + +## 24.2.0 - 2022-04-26 + +### Added +* Updated base Docker image to use Ubuntu 22.04 [#3636](https://github.com/sitespeedio/sitespeed.io/pull/3636). + +### Fixed +* Updated dependencies: aws-sdk, cli-color, fs-extra, influx, junit-report-builder and tape [#3640](https://github.com/sitespeedio/sitespeed.io/pull/3640) + +### Tech +* Use Ava for unit testing [#3637](https://github.com/sitespeedio/sitespeed.io/pull/3637) +* Use local HTTP server to speed up GitHub Action tests [#3638](https://github.com/sitespeedio/sitespeed.io/pull/3638). +* Updated dev dependencies [#3639](https://github.com/sitespeedio/sitespeed.io/pull/3639). + +## 24.1.0 - 2022-04-22 +### Added +* Update Grafana auth settings to allow api token or basic auth, thank you [Vladimir Stepanov](https://github.com/vs-odessa) for PR [#3627](https://github.com/sitespeedio/sitespeed.io/pull/3627). +* Add TTFB to the metrics page [#3630](https://github.com/sitespeedio/sitespeed.io/pull/3630). +* Use latest Coach core with updated PageXray and Third party web [#3629](https://github.com/sitespeedio/sitespeed.io/pull/3629). +* Make it possible to disable annotations for Graphite. Set `--graphite.sendAnnotation false` to disable sending annotations [#3625](https://github.com/sitespeedio/sitespeed.io/pull/3625). +* Show which run that is used in the metrics tab [#3631](https://github.com/sitespeedio/sitespeed.io/pull/3631). +* Updated to [Browsertime 16.1.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1610---2022-04-20). +### Updated +* Update dependencies: google-cloud/storage, aws-sdk, dayjs, yargs [#3635](https://github.com/sitespeedio/sitespeed.io/pull/3635). + +## 24.0.0 - 2022-04-06 + +### Changed +* Upgraded to [Browsertime 16.0.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1600---2022-04-05) that changed how the DNS is flushed. You need to add `--flushDNS` to your conifguration to flush the DNS between runs. + +### Added +* Use Firefox 99 and Edge/Edgedriver 100 in the Dockker container. + +### Fixed +* Better catch if Visual Metrics fails [#3619](https://github.com/sitespeedio/sitespeed.io/pull/3619) +* Fixed JUnit/alias bug [#3620](https://github.com/sitespeedio/sitespeed.io/pull/3620) +## 23.7.0 - 2022-03-31 +### Added +* Updated to Chrome/Chromedriver 100 and [Browsertime 15.4.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1540---2022-03-30). +* Updated the +1 container to use Lighthouse 9.5.0. +* Updated to [Axe-core 4.4.1](https://github.com/sitespeedio/sitespeed.io/pull/3615). + +## 23.6.1 - 2022-03-25 +### Fixed +* Fixing text formatting in the JSON from latest run and make sure we display the time with UTC[#3611](https://github.com/sitespeedio/sitespeed.io/pull/3611). +## 23.6.0 - 2022-03-25 +### Added +* Various fixes to add more content to the JSON stored from the latest run, making it easier to show more meta data for a run in Grafana [#3607](https://github.com/sitespeedio/sitespeed.io/pull/3607), [#3609](https://github.com/sitespeedio/sitespeed.io/pull/3609) and [#3610](https://github.com/sitespeedio/sitespeed.io/pull/3610). +## 23.5.2 - 2022-03-22 +### Fixed +* Updated to latest NodeJS and Ubuntu updates in the Docker container with some security updates[#3306](https://github.com/sitespeedio/sitespeed.io/pull/3606). Also updated the slim container with latest NodeJS. +* Make sure the shrinkwrap file is used when building the container [#3604](https://github.com/sitespeedio/sitespeed.io/pull/3604) and (hopefully) fix so that .dockerignore is not ignored when Github Actions build the containers. + +## 23.5.0 - 2022-03-11 + +### Added +* The -slim Docker container now uses Firefox 98. +* Updated Grafana to latest 8.4.3 in the Docker compose file. +* Updated [Graphite dashboards](https://github.com/sitespeedio/grafana-bootstrap-docker/tree/main/dashboards/graphite) to use Timeseries graphs instead of old "Graph". +* You can use `-o` or `--open` or `--view` to open the result page after you run sitespeed.io on Mac and Linux [#3569](https://github.com/sitespeedio/sitespeed.io/pull/3596). +* Open the result with `-o` on Linux using xdg-open [#3597](https://github.com/sitespeedio/sitespeed.io/pull/3597). + +## 23.4.0 - 2022-03-09 +### Added +* Firefox 98 in the Docker container [#3592](https://github.com/sitespeedio/sitespeed.io/pull/3592). +* Added link to each run in the side by side metric page, making it easier to go to the correct run [#3593](https://github.com/sitespeedio/sitespeed.io/pull/3593). + +## 23.3.0 - 2022-03-07 +### Added +* The +1 container is upgraded to use Lighthouse 9.4.0. +* Updated to [Browsertime 15.3.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1530---2022-03-07). + +## 23.2.0 - 2022-03-05 + +### Added +* Updated to Chrome and Edge 99 in the Docker container. Updated to Chromedriver and Edgedriver 99 [#3590](https://github.com/sitespeedio/sitespeed.io/pull/3590). +### Fixed +* If you use alias and budget files, the outcome (result budget json and others) should use the alias of the URL instead of the URL [#3582](https://github.com/sitespeedio/sitespeed.io/pull/3582). +* Ignore sustainable.setup messages when storing analysistorer [#3578](https://github.com/sitespeedio/sitespeed.io/pull/3587). + +## 23.1.0 - 2022-02-24 +### Added +* Updated [Browsertime](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1510---2022-02-24) that collect timings from main document. The result includes a field named mainDocumentTimings and contains blocked, dns, connect, send, wait, receive, ssl as long as you get a HAR file from the browser. + +* Show Browsertime version in runtime settings [#3575](https://github.com/sitespeedio/sitespeed.io/pull/3575). + +### Fixed +* Updated Chromedriver dependency that fixes installation on Mac M1 and some send keys issues. +## 23.0.1 - 2022-02-21 +### Fixed +* Bumped to Browsertime 15.0.1 to make sure connectivity is set only once. In last release it was set in the beginning of the test and for eacch iteration. In practice that doesn't matter but it's very confusing if you check the logs. +## 23.0.0 - 2022-02-21 + +### Breaking changes +* In this release we updated to Browsertime 15.0.0 that drops built in support for [TSProxy](https://github.com/WPO-Foundation/tsproxy). The reason to drop TSProxy is that it only works in Python 2 and the sunset for Python 2 was January 1, 2020. If you still need TSProxy you can set it up yourself. + +* Browsertime also drop support for getting visual metrics from the trace log. It was added to evaluate if it could be a compliment to the video visual metrics but it was not. Removing it also decreased the number of dependencies in Browsertime. + +* Linux/Mac OS will flush the DNS between runs, that means that you can have some changes in DNS lookup time when you upgrade to 23.0.0. + +### Fixed +* Fix broken JUnit output. Thank you [rghetu](https://github.com/rghetu) for finding it [#3569](https://github.com/sitespeedio/sitespeed.io/pull/3569). +* When comparing metrics side by side for different runs, mean/median and stddev was sometimes broken for some timing metrics. Fixed with [#3573](https://github.com/sitespeedio/sitespeed.io/pull/3573) + +### Added +* Use Browsertime 15.0.0. +* Show alias name in the budget report page [#3572](https://github.com/sitespeedio/sitespeed.io/pull/3572). + +## 22.1.2 - 2022-02-09 +### Fixed +* Updated to Browsertime 14.21.1 that disables the new Chrome splash screen by default. +## 22.1.1 - 2022-02-08 +### Fixed +* The slim container with only Firefox was broken in last release. It's now re-released with Firefox 96 and Firefox 97 coming soon. +## 22.1.0 - 2022-02-08 +### Added +* Upgraded to latest Browsertime with Egdedriver 98. +* Upgraded to Edge 98 and Firefox 97 in the (amd64) Docker containers. +## 22.0.0 - 2022-02-07 + +### Breaking changes +* If you use the Lighthouse plugin there's breaking changes: + +In the new version we drop support for the following: + * Running multiple runs with Lighthouse. + * Using scripts to login the user (or whatever you need before you run your tests) +It's a couple of reasons why I remove those features: +* I been looking for a maintainer of the Lighthouse plugin for +1 year and I haven't found one. For me to be able to maintain it I want the plugin to be as simple as possible. +* I deeply regret merging the PR for adding multiple runs for Lighthouse. That PR goes against everything I know about measuring performance. Lighthouse is not built for getting correct performance metrics, it's built to help (Chrome) developers to get insights how they make the page "faster". Lets stick to the basics and keep it possible to get those recommendations from Lighthouse. +* Maybe someday Lighthouse will have support for user journeys, lets wait until that is officially supported and then I can check if it could be used in the plugin. + +With the new release we also break how you configure Lighthouse. People has had problem with that since day 1. With the new version we support two new ways to configure Lighthouse: +- By configuration JSON file. `--lighthouse.config config.js` +- By Lightouse flags file. `--lighthouse.flags flag.json` + +If you don't need to configure Lightouse you can use the default settings both for desktop and mobile. If you run without any settings, the plugin will use desktop settings. If you run with `--mobile`, `--android` or `--ios` the mobile settings will be used. + +### Added +* Build Docker containers for both amd64 and arm64 to make containers work on Mac M1. The arm container contains Firefox and Chromium. Thank you [whichfinder](https://github.com/whichfinder) and [Radu Micu](https://github.com/radum) for the help! Fixed in PR [#3554](https://github.com/sitespeedio/sitespeed.io/pull/3554). +* When plugins is loaded, there's a new extra last step where we try to load the plugin as a globally installed npm module [#3546](https://github.com/sitespeedio/sitespeed.io/pull/3546). + +### Fixed +* Fix so that we do not display the same 3rd party cookie multiple times [#3545](https://github.com/sitespeedio/sitespeed.io/pull/3545). +* Updated Coach Core that includes the latest version of third party web and PageXray that find more fonts without mime type. + +## 21.6.1 - 2022-01-24 +### Fixed +* Updated to [Browsertime 14.18.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14181---2022-01-24) that makes the summary metric log message use median (instead of mean) and change a log message level to debug. +## 21.6.0 - 2022-01-24 +### Added +* Updated to Edge stable release in the Docker container. +* Remove Crux distribution table and use pie charts instead [#3537](https://github.com/sitespeedio/sitespeed.io/pull/3537) +* Add extra sleep time between Crux calls to make sure to not overload the API limit [#3536](https://github.com/sitespeedio/sitespeed.io/pull/3536). +* Added extra Crux enable command line `--crux.enable` to enable Crux [#3538](https://github.com/sitespeedio/sitespeed.io/pull/3538). Its default value is `true` and you also need to supply the Crux key to run Crux. The reason for the new parameter is that you can now configure the key in your configuration JSON and set the enable to false and then you enable it with the CLI parameter when you actually need to run Crux. +* Show Crux-metrics on the Summary page [#3540](https://github.com/sitespeedio/sitespeed.io/pull/3540). +* Updated summary metrics tables with headings to make it easier to read [#3541](https://github.com/sitespeedio/sitespeed.io/pull/3541). +* Added [Browsertime 14.17.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14170---2022-01-23) with new Select and click.byName commands. With that Browsertime version you also need to have ffprobe installed when you run Visual Metrics but that should already be installed. +* Added [Browsertime 14.18.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14180---2022-01-24) with a fix for Firefox [#1698](https://github.com/sitespeedio/browsertime/issues/1698) + +## 21.5.0 - 2022-01-14 +### Added +* Upgraded to [Browsertime 14.15.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14150---2022-01-12) that adds support for `--appendToUserAgent` for Chrome/Edge/Firefox. And then Browsertime 14.16.0 that supports Geckodriver for Raspberry Pi. +## 21.4.0 - 2022-01-12 +### Added +* Updated to a new build of WebPageReplay in the Docker container +* Updated the Ubuntu base image to latest version and latest NodeJS in the Docketr container. +* Upgraded Browsertime [#3528](https://github.com/sitespeedio/sitespeed.io/pull/3528): + * Add support for Humble as connectivity engine for mobile phone testing. Make sure to setup Humble on a Raspberry Pi 4 and the choose engine with --connectivity.engine humble and set the URL to your instance --connectivity.humble.url http://raspberrypi.local:3000. Added in #1691. +* Upgraded to Chrome 97 and Edge 97 in the Docker container. +* Upgraded to Chromedriver 97. +### Fixed +* Updated Chromedriver library that automatically picks up the Chromedriver if it's installed on Raspberry Pi. +## 21.3.0 - 2022-01-01 +### Added +* Updated to [Browsertime 14.13.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14130---2021-12-30) with the following fixes for the user agent: + * Append text to Chrome/Edge user agent using `--chrome.appendToUserAgent` + * When you use Chrome/Edge and use a "emulated device" that will use the user agent that you provide using `--userAgent`. Else it will use the user agent from your emulated device setting. + * You can also use Edge to run emulated mobile with the same settings as Chrome. +## 21.2.2 - 2021-12-23 +### Fixed +* Fix the error introduced in 21.2.0 for "Include page summary URL in the result JSON" +[#3525](https://github.com/sitespeedio/sitespeed.io/pull/3525). + +## 21.2.1 - 2021-12-22 +### Fixed +* It turns out that Firefox 95 doesn't work with the HAR export trigger and the workaround that worked in Firefox 94 seems to not work in 95 see https://github.com/sitespeedio/browsertime/issues/1671#issuecomment-999412035. That's why we are reverting to Firefox 94 in the Docker containers. +## 21.2.0 - 2021-12-22 +### Fixed +* The catching of errors in the queue was broken and reported the error x times (x=number of plugins). Also when we had an error the result JSON was not stored. [#3522](https://github.com/sitespeedio/sitespeed.io/pull/3522). + +### Added +* Updated to Firefox 95 and Edge 96 in the Docker container. +* Include page summary URL in the result JSON [#3523](https://github.com/sitespeedio/sitespeed.io/pull/3523). + +## 21.1.0 - 2021-12-06 +### Added +* Added possibility choose name for storing a result JSON [#3520](https://github.com/sitespeedio/sitespeed.io/pull/3520). We use this for a feature that will be released soon. +## 21.0.1 - 2021-12-01 +### Fixed +* Updated Browsertime that logs Chrome document request failures on debug log level instead so that the log is not cluttered. + +## 21.0.0 - 2021-12-01 + +### Changed +* Updated to [Coach Core 7.0.0](https://github.com/sitespeedio/coach-core/blob/main/CHANGELOG.md#700---2021-12-01). This will probably change your Coach score. The new Coach has the following changes: + * Moved AMP advice to best practice instead of privacy [#67](https://github.com/sitespeedio/coach-core/pull/67). + * Increased favicon max size advice from 5 to 10 kb [#68](https://github.com/sitespeedio/coach-core/pull/68) + * Renamed the fastRender advice to avoidRenderBlocking [#73](https://github.com/sitespeedio/coach-core/pull/73) + * Remove the third party async advice [#74](https://github.com/sitespeedio/coach-core/pull/74) + * Updated the layout shift advice to use cumulative layout shift [#75](https://github.com/sitespeedio/coach-core/pull/75) + * Changed id of the Google Tag Manager advice [#79](https://github.com/sitespeedio/coach-core/pull/79) + * Updated third-party-web to 0.12.6. + * Use Chrome(ium) render blocking information to know if a request is render blocking or not [#66](https://github.com/sitespeedio/coach-core/pull/66). + * Report offending JavaScript assets if the JavaScript max limits kicks in [#70](https://github.com/sitespeedio/coach-core/pull/70). + * New largest contentful paint advice [#76](https://github.com/sitespeedio/coach-core/pull/76). + * New first contentful paint advice [#77](https://github.com/sitespeedio/coach-core/pull/77). + * Added TBT in the CPU longtask advice [#80](https://github.com/sitespeedio/coach-core/pull/80). + * Report content and transfer size for offending URLs [#81](https://github.com/sitespeedio/coach-core/pull/81). + * Report offending assets with transfer/content size for page size limit [#82](https://github.com/sitespeedio/coach-core/pull/82). + * Fix cases when JQuery is undefined. Thank you [shubham jajodia](https://github.com/jajo-shubham) for PR [#64](https://github.com/sitespeedio/coach-core/pull/64). + * A better way to find offending layout shifters. Thank you [shubham jajodia](https://github.com/jajo-shubham) for PR [#65](https://github.com/sitespeedio/coach-core/pull/65). + * Removed mentions aboout server push [#69](https://github.com/sitespeedio/coach-core/pull/69) + * Added more information on how to debug CPU advice [#71](https://github.com/sitespeedio/coach-core/pull/71). + +* Updated to sustainable plugin core code to [co2 0.8.0](https://github.com/thegreenwebfoundation/co2.js/blob/main/CHANGELOG.md#080---2021-11-28). This include a biug fix to the 1byte model that will lower your co2 score [#3519](https://github.com/sitespeedio/sitespeed.io/pull/3519). + +### Added +* Updated to [Browsertime 14.12.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14120---2021-11-30) that fixes the [FF 94 HAR issue](https://github.com/sitespeedio/browsertime/issues/1671). +* Updated green domains from the Green Web Foundation [#3513](https://github.com/sitespeedio/sitespeed.io/pull/3513). +* Updated PerfCascade that support chunks when you use Chrome(ium) [#3514](https://github.com/sitespeedio/sitespeed.io/pull/3514). +* Updated to Firefox 94 in the Docker image. + +### Fixed +* Added missing summary boxes on start page [#3515](https://github.com/sitespeedio/sitespeed.io/pull/3515). + +## 20.6.2 - 2021-11-20 +### Fixed +* Updated to [Browsertime 14.10.2](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14102---2021-11-20) that disables the Edge/Edgedriver version check. +## 20.6.1 - 2021-11-20 +### Fixed +* Updated to [Browsertime 14.10.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14101---2021-11-19) that disables the Chrome/Chromedriver version check. + +## 20.6.0 - 2021-11-17 + +Note: Do your test fails with Firefox 94? See [Browsertime #1671](https://github.com/sitespeedio/browsertime/issues/1671). Until that is fixed in Firefox, it seems most use cases is fixed by adding a settle time (the browser rest for a while before we start the test). Try with `--browsertime.settleTime 10000` to add a 10 seconds wait time before the test starts. +### Added +* Updated to [Browsertime 14.10.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14100---2021-11-16) with Chromedriver 96 and Chrome 96 in the Docker container. + +## 20.5.0 - 2021-11-09 +### Added +* Updated to [Browsertime 14.9.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1490---2021-11-07) with updated Chrome HAR generator. + +### Fixed +* Ignore Influxdb and Grafana setup messages when you use the analysisstorer plugin [#3508](https://github.com/sitespeedio/sitespeed.io/pull/3508). +## 20.4.2 - 2021-11-07 +### Fixed +* Updated to AXE core 4.3.5 [#3501](https://github.com/sitespeedio/sitespeed.io/pull/3501). +* Use latest npm in the Docker container [#3502](https://github.com/sitespeedio/sitespeed.io/pull/3502). +* Fixed the bug that caused so that you couldn't use the analyisstorer plugin together with Graphite [#3506](https://github.com/sitespeedio/sitespeed.io/pull/3506). +* Updated to yargs 17.2.1 +## 20.4.1 - 2021-10-29 +### Fixed +* Reverted the change with npm in the Docker container since it broke both webpagetest and the +1 container installation +## 20.4.0 - 2021-10-29 + +### Added +* Updated to [Browsertime 14.8.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md) with Edgeriver 95. +* Updated to Edge 95 in the Docker container. +* Update to use NodeJS 16 in the Docker container [#3495](https://github.com/sitespeedio/sitespeed.io/pull/3495). +* On Mac OS: Use `--open` or `-o` to open the result in your default browser. Thank you [Johanna Lindh](https://github.com/zhouhana) for the idea! PR [#3493](https://github.com/sitespeedio/sitespeed.io/pull/3493). +* The +1 container now had Lighthouse 8.6.0. + +### Fixed +* Removed npm from the Docker container when everything has been installed to fix npm security issues + decrease the size of the container. +## 20.3.1 - 2021-10-21 +### Fixed +* Fix to handle integer value Android device serial, thank you [Saurav Kumar](https://github.com/svkrclg) for PR [#3490](https://github.com/sitespeedio/sitespeed.io/pull/3490). +## 20.3.0 - 2021-10-20 +### Added +* Updated Browsertime that uses Chromedriver 95. +* Updated Chrome 95 in the Docker container. + +## 20.2.0 - 2021-10-14 +### Added +* Add support for using cookies when crawling, thank you [dammg](https://github.com/dammg) for PR [#3472](https://github.com/sitespeedio/sitespeed.io/pull/3472). +* [Browsertime 14.6.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1460---2021-10-13). +* [Use alias in your budget file](https://www.sitespeed.io/documentation/sitespeed.io/performance-budget/#override-per-url-or-alias) [#3479](https://github.com/sitespeedio/sitespeed.io/pull/3479). +* Support for using [User Timing API marks/measures in the budget file](https://www.sitespeed.io/documentation/sitespeed.io/performance-budget/#user-timing-api-metrics) [#3482](https://github.com/sitespeedio/sitespeed.io/pull/3482) and [#3483](https://github.com/sitespeedio/sitespeed.io/pull/3483). +* Support for [using custom metrics from scripting in your budget](https://www.sitespeed.io/documentation/sitespeed.io/performance-budget/#metrics-from-scripting) [#3484](https://github.com/sitespeedio/sitespeed.io/pull/3484) and [#3486](https://github.com/sitespeedio/sitespeed.io/pull/3486). + +### Fixed +* Allow crawler to use cookies, thank you [dammg](https://github.com/dammg) for the PR [#3472](https://github.com/sitespeedio/sitespeed.io/pull/3472) with small fix [#3473](https://github.com/sitespeedio/sitespeed.io/pull/3473). + +## 20.1.0 - 2021-10-05 +### Added +* Use Firefox 93 in the Docker and the Docker slim container [#3471](https://github.com/sitespeedio/sitespeed.io/pull/3471). +## 20.0.0 - 2021-09-30 + +Please read the [20.0 blog post](https://www.sitespeed.io/sitespeed.io-20.0/)! +### Breaking changes +* Before you update to the new version: If you save your metrics to Graphite, have you upgraded those metrics to the new format as introduced in sitespeed.io the **15/4-2021**? If not, please follow the [guide](https://www.sitespeed.io/documentation/sitespeed.io/graphite/#upgrade-to-use-the-test-slug-in-the-namespace) in the documentation. If you haven't done that and still upgrade to sitespeed.io 20 you need to make sure you add `--graphite.addSlugToKey false` to your test else the metrics will be reported under a new key structure. The change was done in [#3434](https://github.com/sitespeedio/sitespeed.io/pull/3434). +* Set [throttle](https://github.com/sitespeedio/throttle) as default connectivity engine if you use Mac or Linux [#3433](https://github.com/sitespeedio/sitespeed.io/pull/3433). This makes it much easier to enable throttling. Our Docker container is not affected by this change. +* There's a new default mobile `--mobile` for Chrome. The new default is Moto G4 (instead of iPhone 6) [#3467](https://github.com/sitespeedio/sitespeed.io/pull/3467). +* When you run your tests on Safari on iOS the Coach is disabled by default [#3468](https://github.com/sitespeedio/sitespeed.io/pull/3468). + +### Added +* [Browsertime 14.5.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1450---2021-09-30) with CSS selector support for the mouse commands. + +## 19.6.0 - 2021-09-23 +### Added +* Updated to Chrome 94 in the Docker container. +* Upgraded to [Browsertime 14.4.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1440---2021-09-22) that included Chromedriver 94. +## 19.5.0 - 2021-09-17 +### Added +* Updated to Edge 93 in the Docker container. +* Updated to [Browsertime 14.3.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1430---2021-09-16). +* Updated WebPageReplay to new version [#3642](https://github.com/sitespeedio/sitespeed.io/pull/3462). + +## 19.4.2 - 2021-09-08 +### Fixed +* Updated the Docker container to use Firefox 92 (instead of beta 92) +* Updated the base Docker container to use a newer updated version of Ubuntu 20.04. See [#3456](https://github.com/sitespeedio/sitespeed.io/issues/3456). +## 19.4.1 - 2021-09-06 +### Fixed +* Updated to [Browsertime 14.2.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1421---2021-09-06). +* Updated to AXE 4.3.3 +## 19.4.0 - 2021-09-05 + +### Added +* Add option to ignore robots.txt when crawling. Use `--crawler.ignoreRobotsTxt true` to ignore. Thank you [dammg](https://github.com/dammg) for PR [#3454](https://github.com/sitespeedio/sitespeed.io/pull/3454)! +* Updated to [Browsertime 14.2.0](https://github.com/sitespeedio/browsertime/releases/tag/v14.2.0). +### Fixed +* If generating a HTML file failed, all generation failed. This fixes that and continue with the next file [#3453](https://github.com/sitespeedio/sitespeed.io/pull/3453). + +## 19.3.0 - 2021-09-01 +### Added +* Upgraded to [Browsertime 14.1.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1410---2021-09-01) with Chromedriver 93. +* Added Chrome 93 in the Docker container. + +### Fixed +* Upgraded to [Browsertime 14.0.3](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1403---2021-08-31). +## 19.2.0 - 2021-08-27 +### Added +* Upgraded to AXE core 4.3.2 [#3441](https://github.com/sitespeedio/sitespeed.io/pull/3441). +* Added stddev/median/mean to the metrics side by side page [#3443](https://github.com/sitespeedio/sitespeed.io/pull/3443). +* Added a generic text that we miss out of many metrics for Safari at the moment [#3442](https://github.com/sitespeedio/sitespeed.io/pull/3442). +* Add option to add friendly name to junit test cases. Use `--budget.friendlyName` to set that. Thank you [Vishal](https://github.com/vishallanke) for the request. Done in PR [#3448](https://github.com/sitespeedio/sitespeed.io/pull/3448). + +### Fixed +* Upgrade PerfCascade that catches if an HAR entry is missing content type [#3445](https://github.com/sitespeedio/sitespeed.io/pull/3445). + +## 19.1.0 - 2021-08-20 +### Added +* You can now see curated metrics side by side for all runs [#3439](https://github.com/sitespeedio/sitespeed.io/pull/3439). +* The WebPageTest plugin is using the latest (0.5.0) version of the WebPageTest API. +### Fixed +* Upgraded to [Browsertime 14.0.2](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1402---2021-08-20). + +## 19.0.0 - 2021-08-13 +### Changed +* Updated to [Browsertime 14.0.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1401---2021-08-12). The new 14 version uses Throttle 3.0 that has change if you use it on Mac OS: Updated Throttle 3.0 that do not set throttling on localhost by default on Mac OS. If you run test against a local server or use WebPageReplay on a Mac, you should add `--browsertime.connectivity.throttle.localhost` to your test and it will work as before. + +### Added +* Updated to Edge 92 and Edgedriver 92 in the Docker container. +* Updated to Firefox 92 beta in the Docker container to fix the [devtools slowness bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1712983) that was inroduced in Firefox 90. + +## 18.0.1 - 2021-07-29 +### Fixed +* Updated to [Browsertime 13.1.4](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1314---2021-07-28). +* Added cli parameter for keeping the original video `--videoParams.keepOriginalVideo`. The functionalty already exists but it wasn't exposed in sitespeed.io [#3430](https://github.com/sitespeedio/sitespeed.io/pull/3430). +* The GPSI-plugin has a fix to catch when first input delay data is missing. +* Fix broken tags for InfluxDB when you get Crux data from the GPSI-plugin. [#3429](https://github.com/sitespeedio/sitespeed.io/pull/3429). Data from the plugin has a testType tag that can have the following values: googleWebVitals, score or crux. Crux data has two more tags: metric and experience. + +## 18.0.0 - 2021-07-26 +### Breaking changes +* Drop support for NodeJS 10. +* If you use Chrome the `--chrome.timeline` is now true by default (you can remove that from your configuration). + +### Added +* Updated the Docker container to use Chrome 92. +* Updated to [Browsertime 13.1.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1300---2021-07-22) (that uses Chromedriver 92). +* Updated to latest PerfCascade so that the waterfall highlights which request that is the largest contentful paint (if its an image) and show render blocking info (if you use Chrome) [#3407](https://github.com/sitespeedio/sitespeed.io/pull/3407). You can checkout the [documentation](https://www.sitespeed.io/documentation/sitespeed.io/browsers/#render-blocking-information) about where to see the render blocking information. +* Show render blocking info in the Page Xray section [#3246](https://github.com/sitespeedio/sitespeed.io/pull/3426). + +### Fixed +* Updated to Coach core 6.4.3 +## 17.10.0 - 2021-07-16 +### Added +* The Docker containers now contains Firefox 89 again. It seems like there's something with 90 that increase First Visual Change, especially when running in Docker. See [https://phabricator.wikimedia.org/T286761](https://phabricator.wikimedia.org/T286761) and [https://bugzilla.mozilla.org/show_bug.cgi?id=1720843](https://bugzilla.mozilla.org/show_bug.cgi?id=1720843). + +## 17.9.0 - 2021-07-16 + +### Added +* Updated to [Browsertime 12.11.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#12110---2021-07-15). +* Updated to Firefox 90 in the browser container [#3420](https://github.com/sitespeedio/sitespeed.io/pull/3420). +* Update to AXE-core 4.2.3 [#3417](https://github.com/sitespeedio/sitespeed.io/pull/3417). +* Added support for Firefox memory report, turn it on with `--firefox.memoryReport` [#3416](https://github.com/sitespeedio/sitespeed.io/pull/3416) +* The +1 container has been updated to use Lightouse 8.1.0. +## 17.8.3 - 2021-07-06 +### Fixed +* Updated to [Coach-core 6.4.2](https://github.com/sitespeedio/coach-core/blob/v6.4.2/CHANGELOG.md#642---2021-07-05). +* Updated to [Browsertime 12.10.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#12100---2021-07-05). + +## 17.8.2 - 2021-06-27 +### Fixed +* Keep selected tab open across runs. Thank you [Tanishq](https://github.com/amtanq) for PR [#3409](https://github.com/sitespeedio/sitespeed.io/pull/3409). +* Update Docker container to use NodeJS 14.7.1. +* Upgraded to [Browsertime 12.9.3](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1293---2021-06-24). +* Updated [Coach-core](https://github.com/sitespeedio/coach-core/blob/main/CHANGELOG.md#641---2021-06-23): Use all headers for Wappalyzer (before only the main document was used) + +## 17.8.1 - 2021-06-10 +### Fixed +* Updated Browsertime to [12.9.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1291---2021-06-09) that fixes the problem with running Safari on iOS. However there are still one bug/problem that needs to be fixed with Safari on iOS: recording a video do not work. + +* The docker-compose file now uses Grafana 8.0.0 +## 17.8.0 - 2021-06-04 +### Added +* New [Browsertime 12.9.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1290---2021-06-04) that updates Cumulative Layout Shift to the [new defintion](https://web.dev/evolving-cls/). + +### Fixed +* Guard if you try to run Safari simulator in Docker [#3405](https://github.com/sitespeedio/sitespeed.io/pull/3405) + +## 17.7.0 - 2021-06-03 + +### Added +* New [Browsertime 12.8.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1280---2021-06-02) with Edgedriver 91 and updated to Firefox 89 and Edge 91 in the Docker container [#3404](https://github.com/sitespeedio/sitespeed.io/pull/3404). +* Updated to use [Coach-core 6.4.0](https://github.com/sitespeedio/coach-core/blob/main/CHANGELOG.md#640---2021-06-02) that uses wappalyzer-core 6.6.0 and a bug fix that make sure the private assets and cache header advice only checks GET requests. +* The Lighthouse-plugin was updated to 8.0.0 in the +1 container. +### Fixed +* Catch if visual elements do not produce data (special case for amazon.com) [3402](https://github.com/sitespeedio/sitespeed.io/pull/3402). + +* Upgrade to AXE-core 4.2.1 [#3396](https://github.com/sitespeedio/sitespeed.io/pull/3396). + +### Tech +* Switch to sass instead of node-sass [#3396](https://github.com/sitespeedio/sitespeed.io/pull/3396). + +## 17.6.0 - 3 + +### Added +* Updated to [Browsertime 12.7.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1270---2021-05-26) that fixes the problem with the broken CPU throttling in Chrome. +* Chrome and Chromedriver 91. Edge 90 (Eddge 91 coming later this week) in the Docker container + +### Fixed +* Display more information about the visual element that you are measuring [#3394](https://github.com/sitespeedio/sitespeed.io/pull/3394). Checkout the [updated documentation](https://www.sitespeed.io/documentation/sitespeed.io/video/#collect-visual-elements-metrics) on how to measure when elements are displayed in the viewport. +## 17.5.0 - 2021-05-21 +### Added +* Make it easier to set up budget for Google Web Vitals [#3386](https://github.com/sitespeedio/sitespeed.io/pull/3386) +* Updated dashboards to in the Docker setup. + +### Fixed +* New Browsertime [12.6.1](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#1261---2021-05-21) that fixes a bug when you use a equals sign in the value field in a cookie. +* Updated dependencies with install warnings [#3387](https://github.com/sitespeedio/sitespeed.io/pull/3387), + +## 17.4.0 - 2021-05-14 + +### Added +* Updated Browsertime and more love for showing better info from LCP and LS [#3381](https://github.com/sitespeedio/sitespeed.io/pull/3381). +* Updated to Lighthouse 7.4.0 in the plus-1 Docker container. + +## 17.3.1 - 2021-05-10 +### Fixed + +* 17.3.0 introduced a bug copying the same screenshot for multiple pages when you use the lateststorer plugin[#3376](https://github.com/sitespeedio/sitespeed.io/pull/3376). +## 17.3.0 - 2021-05-06 ### Added * Updated to Axe-core [4.2.0](https://github.com/dequelabs/axe-core/blob/develop/CHANGELOG.md#420-2021-04-23). * Show browser window size in runtime setting when using Android/iPhone [#3362](https://github.com/sitespeedio/sitespeed.io/pull/3362). +* Also copy LS and LCP screenshots when using lateststorer plugin [#3371](https://github.com/sitespeedio/sitespeed.io/pull/3371). +* Added colors (red/yellow/green) to Google Web Vitals summary box, using the same limits as set by Crux [#3370](https://github.com/sitespeedio/sitespeed.io/pull/3370). +* Updated to latest Browsertime and remake on how to show LCP and LS. ### Fixed * [Do not show undefined when you only set RTT for throttle](https://github.com/sitespeedio/sitespeed.io/commit/5446a8e11424c8170a42533f0e40cbe28bf8a5c4). diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index d8e3c1c64..91219e46b 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -45,3 +45,4 @@ Many many many thanks to: * [Devrim Tufan](https://github.com/tufandevrim) * [Keith Cirkel](https://github.com/keithamus) * [Jonathan Lee](https://github.com/beenanner) +* [Pavel Bairov](https://github.com/Amerousful) diff --git a/Dockerfile b/Dockerfile index 2a9d56b1a..6159dfcfe 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,9 +1,11 @@ -FROM sitespeedio/webbrowsers:chrome-90.0-firefox-88.0-edge-89.0-dev +FROM sitespeedio/webbrowsers:chrome-120.0-firefox-121.0-edge-120.0 + +ARG TARGETPLATFORM=linux/amd64 ENV SITESPEED_IO_BROWSERTIME__XVFB true ENV SITESPEED_IO_BROWSERTIME__DOCKER true -COPY docker/webpagereplay/wpr /usr/local/bin/ +COPY docker/webpagereplay/$TARGETPLATFORM/wpr /usr/local/bin/ COPY docker/webpagereplay/wpr_cert.pem /webpagereplay/certs/ COPY docker/webpagereplay/wpr_key.pem /webpagereplay/certs/ COPY docker/webpagereplay/deterministic.js /webpagereplay/scripts/deterministic.js @@ -24,8 +26,9 @@ RUN wpr installroot --https_cert_file /webpagereplay/certs/wpr_cert.pem --https_ RUN mkdir -p /usr/src/app WORKDIR /usr/src/app -COPY package.* /usr/src/app/ -RUN npm install --production +COPY package.json /usr/src/app/ +COPY npm-shrinkwrap.json /usr/src/app/ +RUN npm install --production && npm cache clean --force COPY . /usr/src/app COPY docker/scripts/start.sh /start.sh @@ -41,4 +44,6 @@ RUN echo 'ALL ALL=NOPASSWD: /usr/sbin/tc, /usr/sbin/route, /usr/sbin/ip' > /etc/ ENTRYPOINT ["/start.sh"] VOLUME /sitespeed.io +VOLUME /baseline + WORKDIR /sitespeed.io diff --git a/Dockerfile-slim b/Dockerfile-slim index 0e6f80a9d..afccc13d7 100644 --- a/Dockerfile-slim +++ b/Dockerfile-slim @@ -1,4 +1,6 @@ -FROM node:14.16.0-buster-slim +FROM node:20.9.0-bookworm-slim + +ARG TARGETPLATFORM=linux/amd64 ENV SITESPEED_IO_BROWSERTIME__DOCKER true ENV SITESPEED_IO_BROWSERTIME__VIDEO false @@ -6,31 +8,20 @@ ENV SITESPEED_IO_BROWSERTIME__BROWSER firefox ENV SITESPEED_IO_BROWSERTIME__VISUAL_METRICS false ENV SITESPEED_IO_BROWSERTIME__HEADLESS true -ENV FIREFOX_VERSION 88.0 - ENV PATH="/usr/local/bin:${PATH}" -RUN buildDeps='wget bzip2' && apt-get update && apt -y install $buildDeps && \ - # Download and unpack the correct Firefox version - wget https://ftp.mozilla.org/pub/firefox/releases/${FIREFOX_VERSION}/linux-x86_64/en-US/firefox-${FIREFOX_VERSION}.tar.bz2 && \ - tar -xjf firefox-${FIREFOX_VERSION}.tar.bz2 && \ - rm firefox-${FIREFOX_VERSION}.tar.bz2 && \ - mv firefox /opt/ && \ - ln -s /opt/firefox/firefox /usr/local/bin/firefox && \ - # Install dependencies for Firefox - apt-get install -y --no-install-recommends --no-install-suggests libxt6 \ - `apt-cache depends firefox-esr | awk '/Depends:/{print$2}'` && \ - # iproute2 = tc - apt -y install tcpdump iproute2 ca-certificates sudo --no-install-recommends --no-install-suggests && \ +RUN echo "deb http://deb.debian.org/debian/ unstable main contrib non-free" >> /etc/apt/sources.list.d/debian.list && \ + apt-get update && \ + apt-get install -y --no-install-recommends firefox tcpdump iproute2 ca-certificates sudo --no-install-recommends --no-install-suggests && \ # Cleanup - apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false $toolDeps \ + apt-get purge -y --auto-remove -o APT::AutoRemove::RecommendsImportant=false \ && rm -rf /var/lib/apt/lists/* /tmp/* # Install sitespeed.io RUN mkdir -p /usr/src/app WORKDIR /usr/src/app COPY . /usr/src/app -RUN CHROMEDRIVER_SKIP_DOWNLOAD=true EGDEDRIVER_SKIP_DOWNLOAD=true npm install --production +RUN CHROMEDRIVER_SKIP_DOWNLOAD=true EGDEDRIVER_SKIP_DOWNLOAD=true npm install --production && npm cache clean --force && npm uninstall npm -g WORKDIR /usr/src/app COPY docker/scripts/start-slim.sh /start.sh diff --git a/HELP.md b/HELP.md index 396e7a071..cc6d5aec4 100644 --- a/HELP.md +++ b/HELP.md @@ -2,7 +2,7 @@ We want to make sitespeed.io one of the best web performance tool in the world and we hope you can help us! ## Developers -We love to have more people involved in improving sitespeed.io. We are constantly working on adding more documentation and trying to write more information in the issues so its easier to help out. If there's an [issue](https://github.com/sitespeedio/sitespeed.io/issues) that you want to take on, ping the the issue and we can help you get started. You can also [join our Slack channel](https://sitespeedio.herokuapp.com/) if you need help! +We love to have more people involved in improving sitespeed.io. We are constantly working on adding more documentation and trying to write more information in the issues so its easier to help out. If there's an [issue](https://github.com/sitespeedio/sitespeed.io/issues) that you want to take on, ping the the issue and we can help you get started. You can also [join our Slack channel](https://join.slack.com/t/sitespeedio/shared_invite/zt-296jzr7qs-d6DId2KpEnMPJSQ8_R~WFw) if you need help! ## Designers As a designer there's a lot you can do: You can help us improve the HTML result pages. Maybe we should restructure the metrics ? Or could the header/footer look better? You could also have look at [https://www.sitespeed.io](https://www.sitespeed.io/) where we have all the documentation. You can pretty much help us with everything, no one in the core team got design skills :) diff --git a/LICENSE b/LICENSE index 93e665798..e45a79979 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2012,2013,2014,2015,2016,2017,2018,2019 Peter Hedenskog & Tobias Lidskog +Copyright (c) 2012-2023 Peter Hedenskog Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index a6050c55d..1b161285f 100644 --- a/README.md +++ b/README.md @@ -12,154 +12,222 @@ [![Changelog #212][changelog-image]][changelog-url] -[Website](https://www.sitespeed.io/) | [Documentation](https://www.sitespeed.io/documentation/sitespeed.io/) | [Changelog](https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md) | [Twitter](https://twitter.com/SiteSpeedio) +[Website](https://www.sitespeed.io/) | [Documentation](https://www.sitespeed.io/documentation/sitespeed.io/) | [Changelog](https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md) | [Mastodon](https://fosstodon.org/@sitespeedio) -## Welcome to the wonderful world of web performance! -**Sitespeed.io is a *complete web performance tool* that helps you measure the performance of your website. What exactly does that mean?** +# Table of Contents +- [Welcome to the Wonderful World of Web Performance](#welcome-to-the-wonderful-world-of-web-performance) + - [What is sitespeed.io?](#what-is-sitespeedio) + - [Why Choose sitespeed.io?](#why-choose-sitespeedio) + - [Dive Into Our Documentation](#dive-into-our-documentation) +- [Installation](#installation) + - [Docker](#docker) + - [NodeJS](#nodejs) +- [Usage](#usage) + - [Basic Usage](#basic-usage) + - [Advanced Configuration](#advanced-configuration) + - [Mobile Performance Testing](#mobile-performance-testing) +- [Examples](#examples) +- [Contributing](#contributing) +- [Reporting Issues](#reporting-issues) +- [Community and Support](#community-and-support) +- [License](#license) -Before we start telling you all about sitespeed.io you should just try it out: + + +# Welcome to the wonderful world of web performance! + +Welcome to `sitespeed.io`, the comprehensive web performance tool designed for everyone passionate about web speed. Whether you're a developer, a site owner, or just someone curious about website performance, `sitespeed.io` offers a powerful yet user-friendly way to analyze and optimize your website. + +## What is sitespeed.io? + +`sitespeed.io` is more than just a tool; it's a complete solution for measuring, monitoring, and improving your website's performance. Built with simplicity and efficiency in mind, it enables you to: + +- **Test Websites Using Real Browsers**: Simulate real user interactions and conditions to get accurate performance data. +- **Speed Optimization Feedback**: Get detailed insights into your website's construction and discover opportunities for enhancing speed. +- **Track Performance Over Time**: Monitor changes and trends in your website's performance to stay ahead of potential issues. + +Use cases on when to use `sitespeed.io`. +- **Web performance audit**: Run performance tests from your terminal. +- **Continuous Integration**: Detect web performance regressions early in the development cycle. +- **Production Monitoring**: Monitor performance in production and get alerted on regressions. + +## Why Choose sitespeed.io? + +- **Open Source and Community-Driven**: Built and maintained by a community, ensuring continuous improvement and innovation. +- **Versatile and Extensible**: Whether you're running a simple blog or a complex e-commerce site, `sitespeed.io` adapts to your needs. +- **Seamless Integration**: Easily incorporate `sitespeed.io` into your development workflow, continuous integration systems, and monitoring setups. + +## Dive Into Our Documentation + +We've put countless hours into our [documentation](https://www.sitespeed.io/documentation/sitespeed.io/) to help you get the most out of `sitespeed.io`. From installation guides to advanced usage scenarios, our documentation is a treasure trove of information and tips. + + +# Installation + +Getting started with `sitespeed.io` is straightforward. You can install it using Docker or NodeJS, depending on your preference and setup. Follow these simple steps to begin optimizing your website's performance. + +## Docker + +Using Docker is the easiest way to get started with `sitespeed.io`, especially if you don't want to handle dependencies manually. Run the following command to use `sitespeed.io` in a Docker container: ```bash - $ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ + docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ ``` - Or using npm (you need Chrome, Firefox, Edge or Safari installed or Chrome/Firefox on Android) +This command pulls the latest sitespeed.io Docker image and runs a test on the sitespeed.io website. The **-v "$(pwd)":/sitespeed.io** part mounts the current directory into the container, allowing you to easily access test results. + +## NodeJS + +If you prefer installing `sitespeed.io` as an npm package, ensure you have NodeJS installed on your system. Then, install `sitespeed.io` globally using npm: ```bash - $ npm i -g sitespeed.io && sitespeed.io https://www.sitespeed.io/ + npm i -g sitespeed.io ``` -Ok, now you have tried it, let us tell you more about sitespeed.io. We think of a complete web performance tool as having three key capabilities: + After installation, you can start using sitespeed.io by running: + +```bash +sitespeed.io https://www.example.com +``` - - It test web sites using real browsers, simulating real users connectivity and collect important user centric metrics like Speed Index and First Visual Render. - - It analyse how your page is built and give feedback how you can make it faster for the end user. - - It collect and keep data how your pages is built so you easily can track changes. +Replace https://www.example.com with the URL you wish to test. Note that using NodeJS might require additional dependencies like FFmpeg and Python. Detailed installation instructions for these dependencies can be found [here](https://www.sitespeed.io/documentation/sitespeed.io/installation/). -**What is sitespeed.io good for?** +Choose the method that best suits your environment and get ready to dive into web performance optimization with sitespeed.io! -It is usually used in two different areas: +# Usage - - Running in your continuous integration to find web performance regressions early: on commits or when you move code to your test environment - - Monitoring your performance in production, alerting on regressions. +`sitespeed.io` is tailored to be user-friendly, making web performance testing accessible regardless of your technical expertise. Here's a straightforward guide to help you begin your web performance optimization journey. -To understand how sitespeed.io does these things, let's talk about how it works. +## Basic Usage -First a few key concepts: - - - Sitespeed.io is built upon a couple of other Open Source tools in the sitespeed.io suite. - - [Browsertime](https://github.com/sitespeedio/browsertime) is the tool that drives the browser and collect metrics. - - [The Coach](https://github.com/sitespeedio/coach) knows how to build fast websites and analyse your page and give you feedback what you should change. - - Visual Metrics is metrics collected from a video recording of the browser screen. - - Everything in sitespeed.io is a [plugin](https://www.sitespeed.io/documentation/sitespeed.io/plugins/) and they communicate by passing messages on a queue. - -When you as user choose to test a URL, this is what happens on a high level: - - 1. sitespeed.io starts and initialise all configured plugins. - 2. The URL is passed around the plugins through the queue. - 1. Browsertime gets the URL and opens the browser. - 2. It starts to record a video of the browser screen. - 3. The browser access the URL. - 4. When the page is finished, Browsertime takes a screenshot of the page. - 5. Then run some JavaScripts to analyse the page (using Coach and Browsertime scripts). - 6. Stop the video and close the browser. - 7. Analyse the video to get Visual Metrics like First Visual Change and Speed Index. - 8. Browsertime passes all metrics and data on the queue so other plugins can use it. - 3. The HTML/Graphite/InfluxDB plugin collects the metrics in queue. - 4. When all URLs are tested, sitespeed sends a message telling plugins to summarise the metrics and then render it. - 5. Plugins pickup the render message and the HTML plugin writes the HTML to disk. - - ## Try it out - - Using Docker (use latest Docker): +To start testing your website, simply run `sitespeed.io` with the URL of the site you want to analyze. For example: ```bash - $ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ +sitespeed.io https://www.example.com --browser chrome -n 5 ``` - Or install using npm: +This command tests https://www.example.com using Chrome and performs 5 iterations of the test. This approach helps in obtaining a more accurate median performance measurement by testing the site multiple times. - ```bash - $ npm i -g sitespeed.io - ``` +## Advanced Configuration - Or clone the repo and test the latest changes: +sitespeed.io offers a wide range of configuration options to tailor the tests to your specific needs. You can specify different browsers, adjust connectivity settings, and much more. For a comprehensive list of all available options, visit our [configuration documentation](https://www.sitespeed.io/documentation/sitespeed.io/configuration/). - ```bash - $ git clone https://github.com/sitespeedio/sitespeed.io.git - $ cd sitespeed.io - $ npm install - $ bin/sitespeed.js --help - $ bin/sitespeed.js https://www.sitespeed.io/ +Additionally, for a quick overview of all command-line options, you can run: + +```bash +sitespeed.io --help ``` -## More details +This command displays all the available flags and settings you can use with sitespeed.io, helping you fine-tune your performance testing to fit your unique requirements. -Using sitespeed.io you can: -* Test your web site against Web Performance best practices using the [Coach](https://github.com/sitespeedio/coach). -* Collect Navigation Timing API, User Timing API and Visual Metrics from Firefox/Chrome using [Browsertime](https://github.com/sitespeedio/browsertime). -* Run your custom-made JavaScript and collect whichever metric(s) you need. -* Test one or multiple pages, across one or many runs to get more-accurate metrics. -* Create HTML-result pages or store the metrics in Graphite. -* Write your own plugins that can do whatever tests you want/need. +Whether you're running a quick check or a detailed analysis, sitespeed.io provides the flexibility and power you need to deeply understand and improve your website's performance. -See all the latest changes in the [Changelog](https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md). +## Mobile Performance Testing -Checkout our example [dashboard.sitespeed.io](https://dashboard.sitespeed.io/dashboard/db/page-summary) +In today's mobile-first world, ensuring your website performs optimally on smartphones and tablets is crucial. With `sitespeed.io`, you can simulate and analyze the performance of your website on mobile devices, helping you understand and improve the user experience for mobile audiences. -A summary report in HTML: - +### Why Test on Mobile? -Individual page report: - +- **User Experience**: A significant portion of web traffic comes from mobile devices. Testing on mobile ensures your site is optimized for these users. +- **Search Engine Ranking**: Search engines like Google prioritize mobile-friendly websites in their search results. +- **Performance Insights**: Mobile devices have different performance characteristics than desktops, such as CPU limitations and network variability. -Collected metrics from a URL in Graphite/Grafana: - +### How sitespeed.io Helps -And look at trends in Grafana: - +- **Real Browser Testing**: Simulate mobile browsers to get accurate performance data as experienced by real users. +- **Device-Specific Metrics**: Gain insights into how your site performs on different mobile devices and networks. +- **Responsive Design Analysis**: Test how well your site adapts to various screen sizes and orientations. -Video - easiest using Docker. This gif is optimized, the quality is much better IRL: +### Getting Started - +To start testing your website’s mobile performance, you need to setup your mobile phone for testing. We got [documentation for setting up your Android phone](https://www.sitespeed.io/documentation/sitespeed.io/mobile-phones/#test-on-android) and [iOS](https://www.sitespeed.io/documentation/sitespeed.io/mobile-phones/#test-on-ios). -## Test using WebPageReplay -We have a special Docker container that comes with [WebPageReplay](https://github.com/catapult-project/catapult/blob/main/web_page_replay_go/README.md) installed. This is a really early alpha release but we think you should try it out. +When your setup is ready, you can run tests on your Android phone. -WebPageReplay will let you replay your page locally (getting rid of server latency etc) and makes it easier to have stable metrics and find front end regressions. - -It works like this: -1. WebPageReplay is started in record mode -2. Browsertime access the URLs you choose one time (so it is recorded) -3. WebPageReplay is closed down -4. WebPageReplay in replay mode is started -5. Sitespeed.io (using Browsertime) test the URL so many times you choose -6. WebPageReplay in replay mode is closed down - -You can change latency by setting a Docker environment variable. Use REPLAY to turn on the replay functionality. - -Default browser is Chrome: - -``` -docker run --cap-add=NET_ADMIN --rm -v "$(pwd)":/sitespeed.io -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io -n 5 -b chrome https://en.wikipedia.org/wiki/Barack_Obama +```bash +sitespeed.io https://www.example.com --android ``` -Use Firefox: +## Examples -``` -docker run --cap-add=NET_ADMIN --rm -v "$(pwd)":/sitespeed.io -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io -n 11 -b firefox https://en.wikipedia.org/wiki/Barack_Obama -``` +`sitespeed.io` provides insightful HTML reports that help you visualize and understand your website's performance. Here are some examples to illustrate what you can achieve: -
+### Summary Report -# Sponsors +Here's an example of a summary report in HTML, offering a comprehensive overview of your site's performance metrics: - +![Summary Report](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/start-readme.jpg) -We have a Mac Mini sponsored by [MacStadium](https://www.macstadium.com) and you too can sponsor us to help us keep sitespeed.io running and making sure we can have the best test setup as possible. Read our [sponsor page](https://github.com/sponsors/soulgalore) for more info. +This report includes key performance indicators like load times, page size, and request counts, giving you a quick snapshot of your site’s overall health. + +### Individual Page Report + +For more detailed analysis, here's an individual page report: + +![Individual Page Report](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/start-url-readme.jpg) + +This report dives deeper into a single page's performance, providing metrics on aspects like scripting, rendering, and network activity, crucial for pinpointing specific areas of improvement. + +### Performance Monitoring Dashboard + +To monitor your website’s performance over time, check out our live setup at [dashboard.sitespeed.io](https://dashboard.sitespeed.io/), which integrates `sitespeed.io` with Graphite and Grafana. + +#### Metrics in Graphite/Grafana + +Collected metrics from a URL visualized in Graphite/Grafana: + +![Graphite/Grafana Metrics](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/grafana-readme.jpg) + +This setup allows for continuous tracking of performance, helping you identify trends and potential issues. + +#### Trends in Grafana + +Trends over time in Grafana provide a long-term view of your site's performance: + +![Grafana Trends](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/grafana-trends-readme.jpg) + +With these insights, you can make informed decisions about optimizations and track the impact of changes you make. + +### Video Performance Analysis + +For visual feedback, `sitespeed.io` can generate videos, making it easier to see how your site loads in real-time. Here's an sample video: + +![Video Analysis](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/barack.gif) + +Video analysis is most easily done using Docker and offers a unique perspective on user experience, highlighting areas that need attention. + + +# Contributing + +We welcome contributions from the community! Whether you're fixing a bug, adding a feature, or improving documentation, your help is valuable. Here’s how you can contribute: + +1. **Create an Issue**: Create an issue and discuss with us how to implement the issue. +2. **Fork and Clone**: Fork the repository and clone it locally. +3. **Create a Branch**: Create a new branch for your feature or bug fix. +4. **Develop**: Make your changes. Ensure you adhere to the coding standards and write tests if applicable. +5. **Test**: Run tests to ensure everything works as expected. +6. **Submit a Pull Request**: Push your changes to your fork and submit a pull request to the main repository. + +Before contributing, please read our [CONTRIBUTING.md](.gitub/CONTRIBUTING.md) for more detailed information on how to contribute. + +# Reporting Issues +Found a bug or have a feature request? Please use the [GitHub Issues](https://github.com/sitespeedio/sitespeed.io/issues) to report them. Be sure to check existing issues to avoid duplicates. + +# Community and Support + +Join our community! Whether you need help, want to share your experience, or discuss potential improvements, there are several ways to get involved: + +- **Slack**: Connect with fellow users and the development team on [Slack](https://join.slack.com/t/sitespeedio/shared_invite/zt-296jzr7qs-d6DId2KpEnMPJSQ8_R~WFw). +- **GitHub Issues**: For technical questions, feature requests, and bug reports, use our [GitHub issues](https://github.com/sitespeedio/sitespeed.io/issues). +- **RSS/Changelog**: Latest releases and information can always be found in our [RSS feed](https://github.com/sitespeedio/sitespeed.io/releases.atom) and in our [changelog](https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md). +- **Mastodon**: Follow us on Mastodon [https://fosstodon.org/@sitespeedio](https://fosstodon.org/@sitespeedio). + +We're excited to have you in our community and look forward to your contributions and interactions! + +# License +[The MIT License (MIT)](LICENSE). -[travis-image]: https://img.shields.io/travis/sitespeedio/sitespeed.io.svg?style=flat-square -[travis-url]: https://travis-ci.org/sitespeedio/sitespeed.io [stars-url]: https://github.com/sitespeedio/sitespeed.io/stargazers [stars-image]: https://img.shields.io/github/stars/sitespeedio/sitespeed.io.svg?style=flat-square [downloads-image]: https://img.shields.io/npm/dt/sitespeed.io.svg?style=flat-square diff --git a/ROADMAP.md b/ROADMAP.md index 379f7c10e..1fce9ff3d 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -2,6 +2,6 @@ This roadmap is the plan for the core team, priorities can and and will change over time. This will give you a view of our current vision and plan. -### The rest of 2020 +### 2024 -We gonna focus refactor the core engine [Browsertime](https://github.com/sitespeedio/browsertime) and fine tune the [Coach](https://github.com/sitespeedio/coach). +Lets get the online version if sitespeed.io up and running. diff --git a/SUPPORT.md b/SUPPORT.md index 1b6110cb2..5bd4d0a66 100644 --- a/SUPPORT.md +++ b/SUPPORT.md @@ -2,7 +2,7 @@ ------------------ First, check the official [sitespeed.io documentation](https://www.sitespeed.io/documentation/). -If you require further help or support then check [new and old issues on GitHub](https://github.com/sitespeedio/sitespeed.io/issues) or join the [sitespeed.io Slack](https://sitespeedio.herokuapp.com). +If you require further help or support then check [new and old issues on GitHub](https://github.com/sitespeedio/sitespeed.io/issues) or join the [sitespeed.io Slack](https://join.slack.com/t/sitespeedio/shared_invite/zt-296jzr7qs-d6DId2KpEnMPJSQ8_R~WFw). **Please note:** - The sitespeed.io project uses GitHub for tracking bugs and feature requests. \ No newline at end of file diff --git a/bin/browsertimeWebPageReplay.js b/bin/browsertimeWebPageReplay.js index 526df63ae..e05942fdd 100755 --- a/bin/browsertimeWebPageReplay.js +++ b/bin/browsertimeWebPageReplay.js @@ -1,26 +1,29 @@ #!/usr/bin/env node -'use strict'; +import { readFileSync } from 'node:fs'; -const yargs = require('yargs'); -const browsertime = require('browsertime'); -const merge = require('lodash.merge'); -const getURLs = require('../lib/cli/util').getURLs; -const get = require('lodash.get'); -const set = require('lodash.set'); -const findUp = require('find-up'); -const fs = require('fs'); -const browsertimeConfig = require('../lib/plugins/browsertime/index').config; +import merge from 'lodash.merge'; +import set from 'lodash.set'; +import get from 'lodash.get'; +import yargs from 'yargs'; +import { hideBin } from 'yargs/helpers'; + +import { findUpSync } from 'find-up'; +import { BrowsertimeEngine, configureLogging } from 'browsertime'; + +import { getURLs } from '../lib/cli/util.js'; + +import {config as browsertimeConfig} from '../lib/plugins/browsertime/index.js'; const iphone6UserAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 ' + '(KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25'; -const configPath = findUp.sync(['.sitespeed.io.json']); +const configPath = findUpSync(['.sitespeed.io.json']); let config; try { - config = configPath ? JSON.parse(fs.readFileSync(configPath)) : {}; + config = configPath ? JSON.parse(readFileSync(configPath)) : {}; } catch (e) { if (e instanceof SyntaxError) { /* eslint no-console: off */ @@ -33,9 +36,18 @@ try { throw e; } -async function testURLs(engine, urls) { +async function testURLs(engine, urls, isMulti) { try { await engine.start(); + + if(isMulti) { + const result = await engine.runMultiple(urls); + for (let errors of result[0].errors) { + if (errors.length > 0) { + process.exitCode = 1; + } + } + } else { for (let url of urls) { const result = await engine.run(url); for (let errors of result[0].errors) { @@ -44,13 +56,15 @@ async function testURLs(engine, urls) { } } } + } } finally { engine.stop(); } } async function runBrowsertime() { - let parsed = yargs + let yargsInstance = yargs(hideBin(process.argv)); + let parsed = yargsInstance .env('SITESPEED_IO') .require(1, 'urlOrFile') .option('browsertime.browser', { @@ -119,6 +133,23 @@ async function runBrowsertime() { describe: 'Short key to use Android. Will automatically use com.android.chrome for Chrome and stable Firefox. If you want to use another Chrome version, use --chrome.android.package' }) + .option('chrome.enableChromeDriverLog', { + describe: 'Log Chromedriver communication to a log file.', + type: 'boolean', + group: 'chrome' + }) + .option('chrome.enableVerboseChromeDriverLog', { + describe: 'Log verboose Chromedriver communication to a log file.', + type: 'boolean', + group: 'chrome' + }) + .option('verbose', { + alias: ['v'], + describe: + 'Verbose mode prints progress messages to the console. Enter up to three times (-vvv)' + + ' to increase the level of detail.', + type: 'count' + }) .config(config); const defaultConfig = { @@ -141,7 +172,11 @@ async function runBrowsertime() { }; const btOptions = merge({}, parsed.argv.browsertime, defaultConfig); - browsertime.logging.configure(parsed.argv); + // hack to keep backward compability to --android + if (parsed.argv.android[0] === true) { + set(btOptions, 'android.enabled', true); + } + configureLogging(parsed.argv); // We have a special hack in sitespeed.io when you set --mobile if (parsed.argv.mobile) { @@ -151,7 +186,7 @@ async function runBrowsertime() { const emulation = get( btOptions, 'chrome.mobileEmulation.deviceName', - 'iPhone 6' + 'Moto G4' ); btOptions.chrome.mobileEmulation = { deviceName: emulation @@ -170,12 +205,20 @@ async function runBrowsertime() { get(btOptions, 'chrome.android.package', 'com.android.chrome') ); } + else if (parsed.argv.browser === 'firefox') { + set( + btOptions, + 'firefox.android.package', + get(btOptions, 'firefox.android.package', 'org.mozilla.firefox') + ); + } } - const engine = new browsertime.Engine(btOptions); - const urls = getURLs(parsed.argv._); + + const engine = new BrowsertimeEngine(btOptions); + const urls = parsed.argv.multi ? parsed.argv._ : getURLs(parsed.argv._); try { - await testURLs(engine, urls); + await testURLs(engine, urls, parsed.argv.multi); } catch (e) { console.error('Could not run ' + e); process.exit(1); diff --git a/bin/sitespeed.js b/bin/sitespeed.js index 88b19191f..9b764a3c7 100755 --- a/bin/sitespeed.js +++ b/bin/sitespeed.js @@ -2,49 +2,177 @@ /*eslint no-console: 0*/ -'use strict'; +import { writeFileSync } from 'node:fs'; +import { execSync } from 'node:child_process'; +import { platform } from 'node:os'; +import { resolve, basename } from 'node:path'; +import { readFileSync } from 'node:fs'; -const fs = require('fs'); -const cli = require('../lib/cli/cli'); -const sitespeed = require('../lib/sitespeed'); +import merge from 'lodash.merge'; +import ora from 'ora'; -async function run(options) { - process.exitCode = 1; - try { - const result = await sitespeed.run(options); - if (result.errors.length > 0) { - throw new Error('Errors while running:\n' + result.errors.join('\n')); - } +import { parseCommandLine } from '../lib/cli/cli.js'; +import { run } from '../lib/sitespeed.js'; +import { addTest, waitAndGetResult, get } from '../lib/api/send.js'; - if (options.storeResult) { - fs.writeFileSync('result.json', JSON.stringify(result)); - } +async function api(options) { + const action = options.api.action ?? 'addAndGetResult'; - if ( - parsed.options.budget && - Object.keys(result.budgetResult.failing).length > 0 - ) { - process.exitCode = 1; - budgetFailing = true; - } - - if ( - !budgetFailing || - (parsed.options.budget && parsed.options.budget.suppressExitCode) - ) { - process.exitCode = 0; - } - } catch (e) { + if (action === 'get' && !options.api.id) { process.exitCode = 1; - } finally { + console.log('Missing test id --api.id'); process.exit(); } -} -let parsed = cli.parseCommandLine(); -let budgetFailing = false; -// hack for getting in the unchanged cli options -parsed.options.explicitOptions = parsed.explicitOptions; -parsed.options.urls = parsed.urls; -parsed.options.urlsMetaData = parsed.urlsMetaData; -run(parsed.options); + const hostname = options.api.hostname; + let apiOptions = options.explicitOptions; + // Delete the hostname to make sure the server do not end in + // a forever loop + delete apiOptions.api.hostname; + + // Add support for running multi tests + if (options.multi) { + const scripting = await readFileSync( + new URL(resolve(process.cwd(), options._[0]), import.meta.url) + ); + apiOptions.api.scripting = scripting.toString(); + apiOptions.api.scriptingName = basename(options._[0]); + } + + if (apiOptions.mobile) { + apiOptions.api.testType = 'emulatedMobile'; + } else if (apiOptions.android) { + apiOptions.api.testType = 'android'; + } else if (apiOptions.safari && apiOptions.safari.ios) { + apiOptions.api.testType = 'ios'; + } else { + apiOptions.api.testType = 'desktop'; + } + + if (options.config) { + const config = JSON.parse( + await readFileSync( + new URL(resolve(process.cwd(), options.config), import.meta.url) + ) + ); + apiOptions = merge(options.explicitOptions, config); + delete apiOptions.config; + } + + if (action === 'add' || action === 'addAndGetResult') { + const spinner = ora({ + text: `Send test to ${hostname}`, + isSilent: options.api.silent + }).start(); + + try { + const data = await addTest(hostname, apiOptions); + const testId = JSON.parse(data).id; + spinner.color = 'yellow'; + spinner.text = `Added test with id ${testId}`; + + if (action === 'add') { + spinner.succeed(`Added test with id ${testId}`); + console.log(testId); + process.exit(); + } else if (action === 'addAndGetResult') { + const result = await waitAndGetResult( + testId, + hostname, + apiOptions, + spinner + ); + if (result.status === 'completed') { + spinner.succeed(`Got test result with id ${testId}`); + if (options.api.json) { + console.log(JSON.stringify(result)); + } else { + console.log(result.result); + } + } else if (result.status === 'failed') { + spinner.fail('Test failed'); + process.exitCode = 1; + process.exit(); + } + } + } catch (error) { + spinner.fail(error.message); + process.exitCode = 1; + process.exit(); + } + } else if (action === 'get') { + try { + const result = await get(options.api.id, hostname, apiOptions); + if (options.api.json) { + console.log(JSON.stringify(result)); + } else { + console.log(result); + } + } catch (error) { + process.exitCode = 1; + console.log(error); + } + } +} + +async function start() { + let parsed = await parseCommandLine(); + let budgetFailing = false; + // hack for getting in the unchanged cli options + parsed.options.explicitOptions = parsed.explicitOptions; + parsed.options.urls = parsed.urls; + parsed.options.urlsMetaData = parsed.urlsMetaData; + + let options = parsed.options; + + if (options.api && options.api.hostname) { + api(options); + } else { + try { + const result = await run(options); + + // This can be used as an option to get hold of where the data is stored + // for third parties + if (options.storeResult) { + if (options.storeResult == 'true') { + writeFileSync('result.json', JSON.stringify(result)); + } else { + // Use the name supplied + writeFileSync(options.storeResult, JSON.stringify(result)); + } + } + + if ((options.open || options.o) && platform() === 'darwin') { + execSync('open ' + result.localPath + '/index.html'); + } else if ((options.open || options.o) && platform() === 'linux') { + execSync('xdg-open ' + result.localPath + '/index.html'); + } + + if ( + parsed.options.budget && + Object.keys(result.budgetResult.failing).length > 0 + ) { + process.exitCode = 1; + budgetFailing = true; + } + + if ( + !budgetFailing || + (parsed.options.budget && parsed.options.budget.suppressExitCode) + ) { + process.exitCode = 0; + } + if (result.errors.length > 0) { + console.log('Errors while running:\n' + result.errors.join('\n')); + throw new Error('Errors while running:\n' + result.errors.join('\n')); + } + } catch (error) { + process.exitCode = 1; + console.log(error); + } finally { + process.exit(); + } + } +} + +await start(); diff --git a/cz-config.js b/cz-config.js deleted file mode 100644 index 45db67318..000000000 --- a/cz-config.js +++ /dev/null @@ -1,78 +0,0 @@ -module.exports = { - types: [ - { value: 'feat', name: 'feat: A new feature' }, - { value: 'fix', name: 'fix: A bug fix' }, - { value: 'docs', name: 'docs: Documentation only changes' }, - { - value: 'style', - name: - 'style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)' - }, - { - value: 'refactor', - name: - 'refactor: A code change that neither fixes a bug nor adds a feature' - }, - { - value: 'perf', - name: 'perf: A code change that improves performance' - }, - { value: 'test', name: 'test: Adding missing tests' }, - { - value: 'chore', - name: - 'chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation' - }, - { value: 'revert', name: 'revert: Revert to a commit' }, - { value: 'WIP', name: 'WIP: Work in progress' } - ], - - // scopes: [ - // { name: 'accounts' }, - // { name: 'admin' }, - // { name: 'exampleScope' }, - // { name: 'changeMe' } - // ], - - allowTicketNumber: false, - isTicketNumberRequired: false, - // ticketNumberPrefix: 'TICKET-', - // ticketNumberRegExp: '\\d{1,5}', - - // it needs to match the value for field type. Eg.: 'fix' - /* - scopeOverrides: { - fix: [ - {name: 'merge'}, - {name: 'style'}, - {name: 'e2eTest'}, - {name: 'unitTest'} - ] - }, - */ - // override the messages, defaults are as follows - messages: { - type: "Select the type of change that you're committing:", - // scope: '\nDenote the SCOPE of this change (optional):', - // used if allowCustomScopes is true - // customScope: 'Denote the SCOPE of this change:', - subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n', - body: - 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n', - breaking: 'List any BREAKING CHANGES (optional):\n', - footer: - 'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n', - confirmCommit: 'Are you sure you want to proceed with the commit above?' - }, - - // allowCustomScopes: true, - allowBreakingChanges: ['feat', 'fix'], - // skip any questions you want - skipQuestions: ['body'], - - // limit subject length - subjectLimit: 100 - // breaklineChar: '|', // It is supported for fields body and footer. - // footerPrefix : 'ISSUES CLOSED:' - // askForBreakingChangeFirst : true, // default is false -}; diff --git a/docker/Dockerfile-plus1 b/docker/Dockerfile-plus1 index 3edbb17db..ef359b2ab 100644 --- a/docker/Dockerfile-plus1 +++ b/docker/Dockerfile-plus1 @@ -3,16 +3,17 @@ FROM sitespeedio/sitespeed.io:${version} ENV SITESPEED_IO_BROWSERTIME__XVFB true ENV SITESPEED_IO_BROWSERTIME__DOCKER true -ENV SITESPEED_IO_PLUGINS__ADD /lighthouse,/gpsi +ENV SITESPEED_IO_PLUGINS__ADD /lighthouse/index.js,/gpsi/lib/index.js RUN sudo apt-get update && sudo apt-get install git -y - +RUN node --version +RUN npm --version WORKDIR /gpsi RUN git clone https://github.com/sitespeedio/plugin-gpsi.git . RUN npm install --production WORKDIR /lighthouse -RUN git clone https://github.com/sitespeedio/plugin-lighthouse.git . +RUN git clone https://github.com/sitespeedio/plugin-lighthouse.git . RUN npm install --production VOLUME /sitespeed.io diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index dcab2ad4a..9733ddde4 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -1,7 +1,7 @@ version: '3' services: grafana: - image: grafana/grafana:7.5.3 + image: grafana/grafana:10.0.2 hostname: grafana depends_on: - graphite @@ -10,25 +10,30 @@ services: ports: - "3000:3000" environment: + # See https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/ - GF_SECURITY_ADMIN_PASSWORD=hdeAga76VG6ga7plZ1 - GF_SECURITY_ADMIN_USER=sitespeedio - GF_AUTH_ANONYMOUS_ENABLED=true - GF_USERS_ALLOW_SIGN_UP=false - GF_USERS_ALLOW_ORG_CREATE=false - - GF_INSTALL_PLUGINS=grafana-piechart-panel + - GF_INSTALL_PLUGINS=grafana-piechart-panel,marcusolsson-json-datasource,marcusolsson-dynamictext-panel + - GF_DASHBOARDS_DEFAULT_HOME_DASHBOARD_PATH=/var/lib/grafana/dashboards/Welcome.json volumes: - grafana:/var/lib/grafana + - ./grafana/provisioning/datasources:/etc/grafana/provisioning/datasources + - ./grafana/provisioning/dashboards:/etc/grafana/provisioning/dashboards + - ./grafana/provisioning/dashboards:/var/lib/grafana/dashboards restart: always graphite: - image: sitespeedio/graphite:1.1.7-9 + image: sitespeedio/graphite:1.1.10-3 hostname: graphite ports: - "2003:2003" - "8080:80" restart: always volumes: - # In production you should configure/map these to your container - # Make sure whisper and graphite.db/grafana.db lives outside your containerr + # In production, you should configure/map these to your container + # Make sure whisper and graphite.db/grafana.db lives outside your container # https://www.sitespeed.io/documentation/sitespeed.io/graphite/#graphite-for-production-important - whisper:/opt/graphite/storage/whisper # Download an empty graphite.db from https://github.com/sitespeedio/sitespeed.io/tree/main/docker/graphite @@ -39,13 +44,6 @@ services: # - /absolute/path/to/graphite/conf/storage-schemas.conf:/opt/graphite/conf/storage-schemas.conf # - /absolute/path/to/graphite/conf/storage-aggregation.conf:/opt/graphite/conf/storage-aggregation.conf # - /absolute/path/to/graphite/conf/carbon.conf:/opt/graphite/conf/carbon.conf - grafana-setup: - image: sitespeedio/grafana-bootstrap:17.0.0 - links: - - grafana - environment: - - GF_PASSWORD=hdeAga76VG6ga7plZ1 - - GF_USER=sitespeedio volumes: grafana: whisper: diff --git a/docker/grafana/provisioning/dashboards/ChromeUserExperienceReport.json b/docker/grafana/provisioning/dashboards/ChromeUserExperienceReport.json new file mode 100644 index 000000000..ad12f947c --- /dev/null +++ b/docker/grafana/provisioning/dashboards/ChromeUserExperienceReport.json @@ -0,0 +1,4391 @@ +{ + "__inputs": [ + { + "name": "graphite", + "label": "graphite", + "description": "", + "type": "datasource", + "pluginId": "graphite", + "pluginName": "Graphite" + }, + { + "name": "VAR_BASE", + "type": "constant", + "label": "sitespeed_io", + "value": "sitespeed_io", + "description": "" + } + ], + "__elements": [], + "__requires": [ + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "8.5.1" + }, + { + "type": "panel", + "id": "grafana-piechart-panel", + "name": "Pie Chart (old)", + "version": "1.6.2" + }, + { + "type": "panel", + "id": "graph", + "name": "Graph (old)", + "version": "" + }, + { + "type": "datasource", + "id": "graphite", + "name": "Graphite", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "stat", + "name": "Stat", + "version": "" + }, + { + "type": "panel", + "id": "timeseries", + "name": "Time series", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "target": { + "limit": 100, + "matchAny": false, + "tags": [], + "type": "dashboard" + }, + "type": "dashboard" + } + ] + }, + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "id": null, + "iteration": 1651731137841, + "links": [], + "liveNow": false, + "panels": [ + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 2, + "panels": [], + "title": "CrUX data for page $group$page", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "First Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 0, + "y": 1 + }, + "id": 4, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Largest Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 8, + "y": 1 + }, + "id": 5, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "First Input Delay", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 16, + "y": 1 + }, + "id": 6, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", + "textEditor": false, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Cumulative Layout Shift", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 0, + "y": 7 + }, + "id": 7, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", + "textEditor": false, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Interaction To Next Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 500 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 8, + "y": 7 + }, + "id": 44, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Interaction to next paint')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Time To First Byte", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 800 + }, + { + "color": "red", + "value": 1800 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 16, + "y": 7 + }, + "id": 45, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75, 'Time To First Byte')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 8, + "w": 8, + "x": 0, + "y": 14 + }, + "id": 23, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "First Contentful Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 8, + "w": 8, + "x": 8, + "y": 14 + }, + "id": 16, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "Largest Contentful Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 8, + "w": 8, + "x": 16, + "y": 14 + }, + "id": 25, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "First Input Delay", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 8, + "w": 8, + "x": 0, + "y": 22 + }, + "id": 26, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "Cumulative Layout Shift", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 8, + "w": 8, + "x": 8, + "y": 22 + }, + "id": 46, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "title": "Interaction To Next Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 8, + "w": 8, + "x": 16, + "y": 22 + }, + "id": 47, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 10)", + "textEditor": false + } + ], + "title": "Time To First Byte", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 0, + "y": 30 + }, + "hiddenSeries": false, + "id": 15, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "First Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 8, + "y": 30 + }, + "hiddenSeries": false, + "id": 24, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Largest Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 16, + "y": 30 + }, + "hiddenSeries": false, + "id": 17, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "First Input Delay", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 10, + "w": 8, + "x": 0, + "y": 39 + }, + "hiddenSeries": false, + "id": 18, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", + "textEditor": false, + "datasource": "graphite" + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Cumulative Layout Shift", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 10, + "w": 8, + "x": 8, + "y": 39 + }, + "hiddenSeries": false, + "id": 48, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Interaction To Next Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 10, + "w": 8, + "x": 16, + "y": 39 + }, + "hiddenSeries": false, + "id": 49, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 10)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Time To First Byte", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 49 + }, + "id": 32, + "panels": [], + "title": "History", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "First Contentful Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 0, + "y": 50 + }, + "id": 33, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Largest Contentful Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 8, + "y": 50 + }, + "id": 34, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "First Input Delay", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 16, + "y": 50 + }, + "id": 35, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Cumulative Layout Shift", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 0, + "y": 57 + }, + "id": 50, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Interaction To Next Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 8, + "y": 57 + }, + "id": 36, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Time To Fist Byte", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 8, + "x": 16, + "y": 57 + }, + "id": 51, + "maxDataPoints": "", + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 64 + }, + "id": 9, + "panels": [], + "title": "CrUX data for origin $group", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "First Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 0, + "y": 65 + }, + "id": 10, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Largest Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 8, + "y": 65 + }, + "id": 11, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "First Input Delay", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 16, + "y": 65 + }, + "id": 12, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", + "textEditor": true, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Cumulative Layout Shift", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 0, + "y": 71 + }, + "id": 13, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", + "textEditor": false, + "datasource": "graphite" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Interaction To Next Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 500 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 8, + "y": 71 + }, + "id": 52, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "displayName": "Time To First Byte", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 800 + }, + { + "color": "red", + "value": 1800 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 16, + "y": 71 + }, + "id": 53, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.5.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 8, + "x": 0, + "y": 77 + }, + "id": 27, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "First Contentful Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 8, + "x": 8, + "y": 77 + }, + "id": 43, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "pluginVersion": "7.0.3", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "Largest Contentful Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 8, + "x": 16, + "y": 77 + }, + "id": 29, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.moderate, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 9)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "First Input Delay", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 8, + "x": 0, + "y": 84 + }, + "id": 30, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 9)", + "textEditor": false, + "datasource": "graphite" + } + ], + "title": "Cumulative Layout Shift", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 8, + "x": 8, + "y": 84 + }, + "id": 54, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "title": "Interaction To Next Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 8, + "x": 16, + "y": 84 + }, + "id": 55, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 9)", + "textEditor": false + } + ], + "title": "Time To First Byte", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 0, + "y": 91 + }, + "hiddenSeries": false, + "id": 19, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false, + "datasource": "graphite" + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "First Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 8, + "y": 91 + }, + "hiddenSeries": false, + "id": 20, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false, + "datasource": "graphite" + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Largest Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 16, + "y": 91 + }, + "hiddenSeries": false, + "id": 21, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS, 100), 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "First Input Delay", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 0, + "y": 100 + }, + "hiddenSeries": false, + "id": 22, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 9)", + "textEditor": false, + "datasource": "graphite" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 9)", + "textEditor": false, + "datasource": "graphite" + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Cumulative Layout Shift", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 8, + "y": 100 + }, + "hiddenSeries": false, + "id": 56, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Interaction To Next Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 8, + "x": 16, + "y": 100 + }, + "hiddenSeries": false, + "id": 57, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "8.5.1", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.fast, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.slow, 100), 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "title": "Time To First Byte", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "mode": "time", + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "logBase": 1, + "show": true + } + ], + "yaxis": { + "align": false + } + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 109 + }, + "id": 38, + "panels": [], + "title": "History", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "First Contentful Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 0, + "y": 110 + }, + "id": 39, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_CONTENTFUL_PAINT_MS.p75, 'First Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Largest Contentful Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 8, + "y": 110 + }, + "id": 40, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.LARGEST_CONTENTFUL_PAINT_MS.p75, 'Largest Contentful Paint')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "First Input Delay", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 16, + "y": 110 + }, + "id": 41, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.FIRST_INPUT_DELAY_MS.p75, 'First Input Delay')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Cumulative Layout Shift", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 0, + "y": 116 + }, + "id": 42, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.CUMULATIVE_LAYOUT_SHIFT_SCORE.p75, 'Cumulative Layout Shift')", + "textEditor": false, + "datasource": "graphite" + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Interaction To Next Paint", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 8, + "y": 116 + }, + "id": 58, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.INTERACTION_TO_NEXT_PAINT_MS.p75, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": "30d", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "displayName": "Time To First Byte", + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 8, + "x": 16, + "y": 116 + }, + "id": 59, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "$base.$path.$testname.summary.$group.crux.originLoadingExperience.$formFactor.TIME_TO_FIRST_BYTE_MS.p75", + "textEditor": false + } + ], + "timeFrom": "30d", + "type": "timeseries" + } + ], + "schemaVersion": 36, + "style": "dark", + "tags": [], + "templating": { + "list": [ + { + "hide": 2, + "label": "sitespeed_io", + "name": "base", + "query": "sitespeed_io", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + }, + "options": [ + { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + } + ] + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "path", + "options": [], + "query": "$base.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "testname", + "options": [], + "query": "$base.$path.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.*", + "hide": 0, + "includeAll": false, + "label": "domain", + "multi": false, + "name": "group", + "options": [], + "query": "$base.$path.$testname.pageSummary.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.$group.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "page", + "options": [], + "query": "$base.$path.$testname.pageSummary.$group.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.*", + "hide": 0, + "includeAll": false, + "label": "Form Factor", + "multi": false, + "name": "formFactor", + "options": [], + "query": "$base.$path.$testname.pageSummary.$group.$page.crux.loadingExperience.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + } + ] + }, + "time": { + "from": "now-2d", + "to": "now" + }, + "timepicker": { + "refresh_intervals": [ + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ] + }, + "timezone": "", + "title": "Chrome User Experience Report", + "uid": "t_bhsNGMk", + "version": 17, + "weekStart": "" +} \ No newline at end of file diff --git a/docker/grafana/provisioning/dashboards/Leaderboard.json b/docker/grafana/provisioning/dashboards/Leaderboard.json new file mode 100644 index 000000000..a8566388a --- /dev/null +++ b/docker/grafana/provisioning/dashboards/Leaderboard.json @@ -0,0 +1,3217 @@ +{ + "__inputs": [ + { + "name": "graphite", + "label": "graphite", + "description": "", + "type": "datasource", + "pluginId": "graphite", + "pluginName": "Graphite" + }, + { + "name": "VAR_NAMESPACE", + "type": "constant", + "label": "sitespeed_io", + "value": "sitespeed_io", + "description": "" + } + ], + "__requires": [ + { + "type": "panel", + "id": "bargauge", + "name": "Bar gauge", + "version": "" + }, + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "7.4.0-beta1" + }, + { + "type": "panel", + "id": "graph", + "name": "Graph", + "version": "" + }, + { + "type": "datasource", + "id": "graphite", + "name": "Graphite", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "stat", + "name": "Stat", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": "-- Grafana --", + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "type": "dashboard" + } + ] + }, + "editable": true, + "gnetId": null, + "graphTooltip": 0, + "id": null, + "iteration": 1612787019283, + "links": [ + { + "icon": "external link", + "includeVars": true, + "keepTime": true, + "tags": [ + "page timings" + ], + "type": "dashboards" + }, + { + "icon": "external link", + "includeVars": true, + "keepTime": true, + "tags": [ + "page summary" + ], + "type": "dashboards" + }, + { + "icon": "external link", + "includeVars": true, + "keepTime": true, + "tags": [ + "site summary" + ], + "type": "dashboards" + } + ], + "panels": [ + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 33, + "panels": [], + "title": "Visual Metrics [$function]", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The first visual change is when something for the first time is painted within the current viewport. It is calculated by analyzing a video recording of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 3000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 1 + }, + "id": 30, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 'average'),4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "First Visual Change", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The largest image is the time when the largest image within the viewport is painted and on its final position. It is calculated by analyzing a video recording of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 10000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 1 + }, + "id": 59, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Largest image", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port. It was created by Pat Meenan and you can checkout the full documentation [here](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index).", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 8000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 15 + }, + "id": 31, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Speed Index", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Visual readiness is the time between the first visual change and the last visual change within the viewport. It is calculated by analyzing a video recording of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 10000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 15 + }, + "id": 60, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.VisualReadiness.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Visual Readiness", + "type": "bargauge" + }, + { + "collapsed": true, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 29 + }, + "id": 11, + "panels": [ + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "The first visual change is when something for the first time is painted within the current viewport. It is calculated by analyzing a video recording of the screen.", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 15, + "w": 12, + "x": 0, + "y": 30 + }, + "hiddenSeries": false, + "id": 12, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 4, 5)", + "textEditor": true + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "First Visual Change", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:239", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:240", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "The largest image is the time when the largest image within the viewport is painted and on its final position. It is calculated by analyzing a video recording of the screen.", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 15, + "w": 12, + "x": 12, + "y": 30 + }, + "hiddenSeries": false, + "id": 14, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function, 4, 5)", + "textEditor": true + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Largest image", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:505", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:506", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port. It was created by Pat Meenan and you can checkout the full documentation [here](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index).", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 15, + "w": 12, + "x": 0, + "y": 45 + }, + "hiddenSeries": false, + "id": 1, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, 4, 5)", + "textEditor": true + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "SpeedIndex", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:717", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:718", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "Visual readiness is the time between the first visual change and the last visual change within the viewport. It is calculated by analyzing a video recording of the screen.", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 15, + "w": 12, + "x": 12, + "y": 45 + }, + "hiddenSeries": false, + "id": 13, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.visualMetrics.VisualReadiness.$function, 4, 5)", + "textEditor": true + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Visual Readiness", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:847", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:848", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + } + ], + "title": "History Visual Metrics", + "type": "row" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 30 + }, + "id": 40, + "panels": [], + "title": "CPU [$function]", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "CPU time spent evaluating JavaScript. Calculated using [Tracium](https://github.com/aslushnikov/tracium). This is a Chrome only metric at the moment.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 2500, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 200 + }, + { + "color": "red", + "value": 1000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 31 + }, + "id": 41, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.cpu.categories.scriptEvaluation.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "CPU time spent script evaluation", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "CPU time spent rendering the page. Calculated using [Tracium](https://github.com/aslushnikov/tracium). This is a Chrome only metric at the moment.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 800, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 50 + }, + { + "color": "red", + "value": 400 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 31 + }, + "id": 42, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.cpu.categories.paintCompositeRender.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "CPU time spent render", + "type": "bargauge" + }, + { + "collapsed": true, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 45 + }, + "id": 78, + "panels": [ + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The estimated carbon emission is calculated using the sustainable web plugin, developed together with the Green Web Foundation.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 15, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 4 + } + ] + }, + "unit": "massg" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 46 + }, + "id": 79, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true + }, + "pluginVersion": "7.3.6", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.sustainable.co2PerPageView.$function, 'average'),4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Estimated carbon emission per page view", + "type": "bargauge" + } + ], + "title": "Carbon emission (enable with --sustainability.enable)", + "type": "row" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 46 + }, + "id": 62, + "panels": [], + "title": "Technical metrics [$function]", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Load Event End is when the load event end event fires in the Navigation Timing API", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 15000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 47 + }, + "id": 64, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.timings.loadEventEnd.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Load Event End", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Fully loaded time when the last of all assets is downloaded on the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 20000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 5000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 47 + }, + "id": 63, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Fully Loaded", + "type": "bargauge" + }, + { + "collapsed": true, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 61 + }, + "id": 66, + "panels": [ + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 15, + "w": 12, + "x": 0, + "y": 62 + }, + "hiddenSeries": false, + "id": 67, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.timings.loadEventEnd.$function, 4, 5)", + "textEditor": true + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Load Event End", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1046", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:1047", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 15, + "w": 12, + "x": 12, + "y": 62 + }, + "hiddenSeries": false, + "id": 68, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, 4, 5)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Fully Loaded", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1176", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:1177", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + } + ], + "title": "Technical metrics history", + "type": "row" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 62 + }, + "id": 44, + "panels": [], + "title": "JavaScript [$function]", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 2000000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100000 + }, + { + "color": "red", + "value": 200000 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 63 + }, + "id": 45, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.contentTypes.javascript.transferSize,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "JavaScript Transfer Size", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The JavaScript size unpacked.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 6000000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 250000 + }, + { + "color": "red", + "value": 500000 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 63 + }, + "id": 46, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.contentTypes.javascript.contentSize,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "JavaScript Content Size", + "type": "bargauge" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 77 + }, + "id": 35, + "panels": [], + "title": "Requests and size ", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Total number of requests for the full page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 500, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 10, + "w": 24, + "x": 0, + "y": 78 + }, + "id": 37, + "links": [], + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortByMaxima($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.requests), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Total number or requests", + "type": "stat" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Total page weight (compressed over the wire).", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 5000000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 500000 + }, + { + "color": "red", + "value": 2000000 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 10, + "w": 24, + "x": 0, + "y": 88 + }, + "id": 38, + "links": [], + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortByMaxima($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.transferSize), 4, 5)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Total page transfer size (over the wire)", + "type": "stat" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 98 + }, + "id": 70, + "panels": [], + "title": "Requests and size bars", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Total number of requests for the full page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 500, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "index": 0, + "value": null + }, + { + "color": "yellow", + "index": 1, + "value": 50 + }, + { + "color": "red", + "index": 2, + "value": 100 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 99 + }, + "id": 71, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.requests,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Total number of requests", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Total page weight (compressed over the wire).", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 5000000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "index": 0, + "value": null + }, + { + "color": "yellow", + "index": 1, + "value": 500000 + }, + { + "color": "red", + "index": 2, + "value": 2000000 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 99 + }, + "id": 72, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.transferSize,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Total page transfer size (over the wire)", + "type": "bargauge" + }, + { + "collapsed": true, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 113 + }, + "id": 7, + "panels": [ + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 16, + "w": 12, + "x": 0, + "y": 100 + }, + "hiddenSeries": false, + "id": 3, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.requests, 4, 5)", + "textEditor": true + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Requests", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1719", + "format": "none", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:1720", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 16, + "w": 12, + "x": 12, + "y": 100 + }, + "hiddenSeries": false, + "id": 4, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.3.6", + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.pagexray.transferSize, 4, 5)", + "textEditor": true + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Total transfer size", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1837", + "format": "decbytes", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:1838", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + } + ], + "title": "Requests and size history", + "type": "row" + }, + { + "collapsed": true, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 114 + }, + "id": 74, + "panels": [ + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 20, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 101 + }, + "id": 75, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true + }, + "pluginVersion": "7.3.6", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.axe.violations.critical.$function, 'average'),4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Axe critical violations", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 20, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 101 + }, + "id": 76, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true + }, + "pluginVersion": "7.3.6", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.axe.violations.serious.$function, 'average'),4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Axe serious violations", + "type": "bargauge" + } + ], + "title": "Axe violations", + "type": "row" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 115 + }, + "id": 48, + "panels": [], + "title": "CPU Long Task [$function]", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The average number of CPU Long Tasks per page. A CPU long Task is by default a CPU task that takes longer than 50 ms to run. This metrics is Chrome only at the moment.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [ + { + "from": "", + "id": 1, + "operator": "", + "text": "No long task", + "to": "", + "type": 1, + "value": "0" + } + ], + "max": 8, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 5 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 116 + }, + "id": 49, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Number of CPU Long Tasks (average)", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "This is the longest CPU task for each page (if they are over 50 ms long). This metrics is Chrome only at the moment.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 1000, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 60 + }, + { + "color": "red", + "value": 200 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 116 + }, + "id": 50, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.cpu.longTasks.durations.max,'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Longest long task", + "type": "bargauge" + }, + { + "collapsed": true, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 130 + }, + "id": 18, + "panels": [ + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "fill": 0, + "gridPos": { + "h": 15, + "w": 8, + "x": 0, + "y": 73 + }, + "id": 19, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": {}, + "percentage": false, + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.cpu.longTasks.durations.max, 3, 4)" + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Longest CPU Long Tasks", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "fill": 0, + "gridPos": { + "h": 15, + "w": 8, + "x": 8, + "y": 73 + }, + "id": 20, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": {}, + "percentage": false, + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 3, 4)" + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Number of CPU Long Tasks", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "format": "none", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "fill": 0, + "gridPos": { + "h": 15, + "w": 8, + "x": 16, + "y": 73 + }, + "id": 21, + "legend": { + "alignAsTable": true, + "avg": true, + "current": true, + "hideEmpty": true, + "hideZero": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "links": [], + "nullPointMode": "connected", + "options": {}, + "percentage": false, + "pointradius": 5, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($namespace.$path.pageSummary.$domains.$pages.$browser.$connectivity.browsertime.statistics.cpu.longTasks.beforeFirstPaint.tasks.median, 3, 4)" + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Number of CPU Long Tasks before First Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "format": "none", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + } + ], + "title": "CPU Long Task history", + "type": "row" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 131 + }, + "id": 52, + "panels": [], + "title": "Third parties [$function]", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Third party requests are calculated using the [Third party web](https://github.com/patrickhulce/third-party-web) library.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [ + { + "from": "", + "id": 1, + "operator": "", + "text": "No 3rd parties", + "to": "", + "type": 1, + "value": "0" + } + ], + "max": 200, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 10 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 132 + }, + "id": 53, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.thirdparty.requests.total.$function, 'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Third party request", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "Third party % are calculated using the [Third party web](https://github.com/patrickhulce/third-party-web) library.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 100, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 5 + }, + { + "color": "red", + "value": 10 + } + ] + }, + "unit": "percent" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 132 + }, + "id": 54, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.thirdparty.requests.percentage.$function, 'average'), 4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "% third party request", + "type": "bargauge" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 146 + }, + "id": 56, + "panels": [], + "title": "Score", + "type": "row" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 100, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "red", + "value": null + }, + { + "color": "yellow", + "value": 80 + }, + { + "color": "green", + "value": 90 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 147 + }, + "id": 57, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.coach.advice.performance.score, 'average', true),4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Performance score", + "type": "bargauge" + }, + { + "cacheTimeout": "", + "datasource": "graphite", + "description": "The privacy score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using user privacy best practices.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "custom": {}, + "mappings": [], + "max": 100, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "red", + "value": null + }, + { + "color": "yellow", + "value": 80 + }, + { + "color": "green", + "value": 90 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 147 + }, + "id": 58, + "links": [], + "options": { + "displayMode": "lcd", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "showUnfilled": true, + "text": {} + }, + "pluginVersion": "7.4.0-beta1", + "targets": [ + { + "refId": "A", + "target": "aliasByNode(sortBy($namespace.$path.$testname.pageSummary.$domains.$pages.$browser.$connectivity.coach.advice.privacy.score, 'average', true),4, 5)", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Privacy score", + "type": "bargauge" + } + ], + "schemaVersion": 27, + "style": "dark", + "tags": [ + "leaderboard", + "pages" + ], + "templating": { + "list": [ + { + "description": null, + "error": null, + "hide": 2, + "label": "sitespeed_io", + "name": "namespace", + "query": "${VAR_NAMESPACE}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_NAMESPACE}", + "text": "${VAR_NAMESPACE}", + "selected": false + }, + "options": [ + { + "value": "${VAR_NAMESPACE}", + "text": "${VAR_NAMESPACE}", + "selected": false + } + ] + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$namespace.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": "path", + "multi": true, + "name": "path", + "options": [], + "query": "$namespace.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$namespace.$path.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": null, + "multi": false, + "name": "testname", + "options": [], + "query": "$namespace.$path.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$namespace.$path.$testname.pageSummary.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": true, + "label": "domains", + "multi": true, + "name": "domains", + "options": [], + "query": "$namespace.$path.$testname.pageSummary.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$namespace.$path.$testname.pageSummary.$domains.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": true, + "label": "pages", + "multi": true, + "name": "pages", + "options": [], + "query": "$namespace.$path.$testname.pageSummary.$domains.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$namespace.$path.$testname.pageSummary.$domains.$pages.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": "browser", + "multi": false, + "name": "browser", + "options": [], + "query": "$namespace.$path.$testname.pageSummary.$domains.$pages.*", + "refresh": 1, + "regex": "(chrome||firefox)", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "auto": false, + "auto_count": 30, + "auto_min": "10s", + "current": { + "selected": false, + "text": "median", + "value": "median" + }, + "description": null, + "error": null, + "hide": 0, + "label": "", + "name": "function", + "options": [ + { + "selected": false, + "text": "min", + "value": "min" + }, + { + "selected": false, + "text": "mean", + "value": "mean" + }, + { + "selected": true, + "text": "median", + "value": "median" + }, + { + "selected": false, + "text": "p90", + "value": "p90" + }, + { + "selected": false, + "text": "max", + "value": "max" + } + ], + "query": "min,mean,median,p90,max", + "queryValue": "", + "refresh": 2, + "skipUrlSync": false, + "type": "interval" + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$namespace.$path.$testname.pageSummary.$domains.$pages.$browser.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": "", + "multi": false, + "name": "connectivity", + "options": [], + "query": "$namespace.$path.$testname.pageSummary.$domains.$pages.$browser.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + } + ] + }, + "time": { + "from": "now-7d", + "to": "now" + }, + "timepicker": { + "refresh_intervals": [ + "5s", + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ], + "time_options": [ + "5m", + "15m", + "1h", + "6h", + "12h", + "24h", + "2d", + "7d", + "30d" + ] + }, + "timezone": "", + "title": "Leaderboard", + "uid": "000000060", + "version": 2 +} \ No newline at end of file diff --git a/docker/grafana/provisioning/dashboards/PageMetrics.json b/docker/grafana/provisioning/dashboards/PageMetrics.json new file mode 100644 index 000000000..160878f0e --- /dev/null +++ b/docker/grafana/provisioning/dashboards/PageMetrics.json @@ -0,0 +1,11644 @@ +{ + "__inputs": [ + { + "name": "graphite", + "label": "graphite", + "description": "", + "type": "datasource", + "pluginId": "graphite", + "pluginName": "Graphite" + }, + { + "name": "json-api", + "label": "JSON API", + "description": "", + "type": "datasource", + "pluginId": "marcusolsson-json-datasource", + "pluginName": "JSON API" + }, + { + "name": "VAR_BASE", + "type": "constant", + "label": "sitespeed_io", + "value": "sitespeed_io", + "description": "" + }, + { + "name": "VAR_RESULTURL", + "type": "constant", + "label": "resulturl", + "value": "https://data.sitespeed.io/", + "description": "" + }, + { + "name": "VAR_SCREENSHOTTYPE", + "type": "constant", + "label": "screenshottype", + "value": "jpg", + "description": "" + } + ], + "__elements": {}, + "__requires": [ + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "10.0.1" + }, + { + "type": "datasource", + "id": "graphite", + "name": "Graphite", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "marcusolsson-dynamictext-panel", + "name": "Dynamic Text", + "version": "4.0.0" + }, + { + "type": "datasource", + "id": "marcusolsson-json-datasource", + "name": "JSON API", + "version": "1.3.6" + }, + { + "type": "panel", + "id": "piechart", + "name": "Pie chart", + "version": "" + }, + { + "type": "panel", + "id": "stat", + "name": "Stat", + "version": "" + }, + { + "type": "panel", + "id": "text", + "name": "Text", + "version": "" + }, + { + "type": "panel", + "id": "timeseries", + "name": "Time series", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "target": { + "limit": 100, + "matchAny": false, + "tags": [], + "type": "dashboard" + }, + "type": "dashboard" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "enable": false, + "iconColor": "rgb(96, 255, 103)", + "limit": 100, + "name": "Go to result", + "showIn": 0, + "tags": "$base $path $group $page $browser $connectivity $testname", + "target": { + "fromAnnotations": true, + "queryType": "tags", + "tags": [ + "$base", + "$path", + "$group", + "$page", + "$browser", + "$connectivity", + "$testname" + ] + }, + "type": "alert" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "enable": true, + "hide": false, + "iconColor": "#8AB8FF", + "limit": 100, + "name": "sitespeed.io", + "showIn": 0, + "tags": [ + "sitespeed.io" + ], + "target": { + "limit": 100, + "matchAny": false, + "tags": [ + "sitespeed.io" + ], + "type": "tags" + }, + "type": "tags" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "enable": false, + "iconColor": "red", + "name": "Alerts", + "target": { + "limit": 100, + "matchAny": true, + "tags": [ + "alert" + ], + "type": "tags" + } + } + ] + }, + "description": "", + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "id": null, + "links": [], + "liveNow": false, + "panels": [ + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 278, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 1 + }, + "id": 292, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Show data from each individual run from the last seven days.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "points", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 6, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Median" + }, + "properties": [ + { + "id": "custom.drawStyle", + "value": "line" + }, + { + "id": "custom.lineInterpolation", + "value": "linear" + }, + { + "id": "custom.spanNulls", + "value": true + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 3 + }, + "id": 280, + "maxDataPoints": 50000, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias(sitespeed_io.$path.$testname.run.$group.$page.$browser.$connectivity.browsertime.visualMetrics.FirstVisualChange, 'First Visual Change')" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(sitespeed_io.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.median, 'Median')" + } + ], + "title": "First visual change", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "points", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 6, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Median" + }, + "properties": [ + { + "id": "custom.drawStyle", + "value": "line" + }, + { + "id": "custom.lineInterpolation", + "value": "linear" + }, + { + "id": "custom.spanNulls", + "value": true + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 12 + }, + "id": 283, + "maxDataPoints": 50000, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias(sitespeed_io.$path.$testname.run.$group.$page.$browser.$connectivity.browsertime.googleWebVitals.largestContentfulPaint, 'Largest Contentful Paint')" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(sitespeed_io.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.largestContentfulPaint.median, 'Median')" + } + ], + "title": "Largest Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "points", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Median" + }, + "properties": [ + { + "id": "custom.drawStyle", + "value": "line" + }, + { + "id": "custom.lineInterpolation", + "value": "linear" + }, + { + "id": "custom.spanNulls", + "value": true + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 21 + }, + "id": 281, + "maxDataPoints": 50000, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias(sitespeed_io.$path.$testname.run.$group.$page.$browser.$connectivity.browsertime.timings.ttfb, 'TTFB')" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(sitespeed_io.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.median, 'Median')" + } + ], + "title": "Time to first byte", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "points", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Median" + }, + "properties": [ + { + "id": "custom.drawStyle", + "value": "line" + }, + { + "id": "custom.lineInterpolation", + "value": "linear" + }, + { + "id": "custom.spanNulls", + "value": true + } + ] + } + ] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 30 + }, + "id": 282, + "maxDataPoints": 50000, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias(sitespeed_io.$path.$testname.run.$group.$page.$browser.$connectivity.browsertime.browser.cpuBenchmark, 'CPU benchmark')" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(sitespeed_io.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.median, 'Median')" + } + ], + "title": "CPU benchmark", + "type": "timeseries" + } + ], + "title": "Per run", + "type": "row" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 1 + }, + "id": 84, + "panels": [], + "title": "Page metrics", + "type": "row" + }, + { + "datasource": { + "type": "marcusolsson-json-datasource", + "uid": "json-api" + }, + "gridPos": { + "h": 4, + "w": 12, + "x": 0, + "y": 2 + }, + "id": 272, + "options": { + "content": "{{#each data}}\n{{{friendlyHTML}}}\n\n{{#if title}}\n---\n**{{{title}}}**\n\n{{{description}}}\n{{/if}}\n\n{{/each}}", + "defaultContent": "The query didn't return any results.", + "editor": { + "format": "auto", + "height": 200, + "language": "markdown" + }, + "editors": [], + "everyRow": false, + "helpers": "", + "styles": "" + }, + "targets": [ + { + "cacheDurationSeconds": 300, + "datasource": { + "type": "marcusolsson-json-datasource", + "uid": "json-api" + }, + "experimentalGroupByField": "*", + "fields": [ + { + "jsonPath": "description ", + "language": "jsonata", + "name": "description" + }, + { + "jsonPath": "title", + "language": "jsonata", + "name": "title" + }, + { + "jsonPath": "friendlyHTML", + "language": "jsonata", + "name": "friendlyHTML" + } + ], + "method": "GET", + "queryParams": "", + "refId": "A", + "urlPath": "/$testname/$base.$path.$group.$page.$browser.$connectivity.json" + } + ], + "title": "Meta data for the test", + "transformations": [ + { + "id": "filterByValue", + "options": { + "filters": [], + "match": "all", + "type": "exclude" + } + } + ], + "type": "marcusolsson-dynamictext-panel" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 2 + }, + "id": 228, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "" + } + ], + "title": "Page Vitals", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "gridPos": { + "h": 6, + "w": 6, + "x": 12, + "y": 3 + }, + "id": 159, + "links": [], + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "\n", + "mode": "html" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.pageSummary.$group.$page.$browser.$connectivity.pagexray.requests, 8)", + "textEditor": false + } + ], + "title": "Screenshot from last run", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "gridPos": { + "h": 6, + "w": 6, + "x": 18, + "y": 3 + }, + "id": 160, + "links": [], + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "\n", + "mode": "html" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.domElements, 'DOM elements')", + "textEditor": false + } + ], + "title": "Video", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "always", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 25, + "w": 12, + "x": 0, + "y": 6 + }, + "id": 80, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.$function, 'TTFB')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.Heading.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "E", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.LastVisualChange.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "D", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "F", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestContentfulPaint.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "H", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, 'Fully Loaded')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "I", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.lastLongTask.$function, 'Last CPU long task')", + "textEditor": false + } + ], + "title": "Visual Metrics [$function]", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "decimals": 2, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 1000000 + }, + { + "color": "red", + "value": 2000000 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 12, + "y": 9 + }, + "id": 224, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.transferSize, 'Total Transfer Size')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 100 + }, + { + "color": "red", + "value": 150 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 16, + "y": 9 + }, + "id": 225, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.requests, 'Requests')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 5000 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 20, + "y": 9 + }, + "id": 226, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.domElements, 'DOM Elements')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "Metrics that Google thinks is important for a good user experience.", + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 13 + }, + "id": 190, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "" + } + ], + "title": "Google Web Vitals", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 12, + "y": 14 + }, + "id": 191, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'First Contentful Paint')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 15, + "y": 14 + }, + "id": 192, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 'Largest Contentful Paint')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 0.1 + }, + { + "color": "red", + "value": 0.25 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 18, + "y": 14 + }, + "id": 193, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.pageinfo.cumulativeLayoutShift.$function, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 300 + }, + { + "color": "red", + "value": 500 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 21, + "y": 14 + }, + "id": 194, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "When is elements painted within the viewport. The metrics comes from analysing a video of the browser screen.", + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 18 + }, + "id": 287, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "" + } + ], + "title": "Visual Metrics", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 12, + "y": 19 + }, + "id": 288, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 'First Visual Change')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 15, + "y": 19 + }, + "id": 289, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.Heading.$function, 'Largest Heading')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 18, + "y": 19 + }, + "id": 290, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function, 'Largest Image')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 21, + "y": 19 + }, + "id": 291, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.LastVisualChange.$function, 'Last Visual Change')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "red", + "value": null + }, + { + "color": "yellow", + "value": 80 + }, + { + "color": "green", + "value": 90 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 12, + "x": 12, + "y": 23 + }, + "id": 186, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.bestpractice.score, 'Best practice')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.performance.score, 'Performance')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.privacy.score, 'Privacy')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "D", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.score, 'Total')", + "textEditor": false + } + ], + "title": "Coach Score", + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 27 + }, + "id": 293, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "" + } + ], + "title": "Axe violations [enable with --axe.enable]", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 12, + "y": 28 + }, + "id": 188, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 15, + "y": 28 + }, + "id": 210, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.serious.$function, 'Serious')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 1 + }, + { + "color": "red", + "value": 5 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 18, + "y": 28 + }, + "id": 211, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.moderate.$function, 'Moderate')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 5 + }, + { + "color": "red", + "value": 10 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 3, + "w": 3, + "x": 21, + "y": 28 + }, + "id": 212, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.minor.$function, 'Minor')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "gridPos": { + "h": 1, + "w": 12, + "x": 12, + "y": 31 + }, + "id": 209, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "" + } + ], + "title": "CPU [Chrome only, enable with --cpu]", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 12, + "y": 32 + }, + "id": 296, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.beforeFirstContentfulPaint.tasks.$function, 'Long tasks before FCP')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 2 + }, + { + "color": "red", + "value": 4 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 15, + "y": 32 + }, + "id": 297, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.max, 'Number of long tasks')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 200 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 18, + "y": 32 + }, + "id": 298, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.durations.max, 'Longest long task')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 2000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 21, + "y": 32 + }, + "id": 299, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.lastLongTask.$function, 'Last long task')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 36 + }, + "id": 301, + "panels": [], + "title": "Page history", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 37 + }, + "id": 302, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Showing how the page is built over time.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 39 + }, + "id": 303, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentSize, 'Content size')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.transferSize, 'Transfer size')", + "textEditor": false + } + ], + "title": "Total page size", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 39 + }, + "id": 304, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.requests, 'Requests')", + "textEditor": false + } + ], + "title": "Requests", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 39 + }, + "id": 305, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.pageinfo.domElements.$function, 'DOM elements')", + "textEditor": false + } + ], + "title": "DOM elements", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 39 + }, + "id": 306, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.totalDomains, 'Total domains')", + "textEditor": false + } + ], + "title": "Total domains", + "type": "timeseries" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 47 + }, + "id": 113, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 48 + }, + "id": 300, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Transfer size is the size over the wire when the data is transfered to the browser (hopefully compressed). Content size is the size unpacked in the browser. ", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 50 + }, + "id": 106, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.html.contentSize, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.html.transferSize, 11)", + "textEditor": false + } + ], + "title": "HTML size", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 50 + }, + "id": 107, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.javascript.contentSize, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.javascript.transferSize, 11)", + "textEditor": false + } + ], + "title": "JavaScript size", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 50 + }, + "id": 108, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.css.contentSize, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.css.transferSize, 11)", + "textEditor": false + } + ], + "title": "CSS size", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 50 + }, + "id": 109, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.image.contentSize, 11)", + "textEditor": false + } + ], + "title": "Image size", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 58 + }, + "id": 246, + "links": [], + "options": { + "displayLabels": [], + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "7.5.0-beta1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.*.contentSize, 10)", + "textEditor": false + } + ], + "title": "Content size per type", + "type": "piechart" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + } + }, + "decimals": 0, + "mappings": [], + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 58 + }, + "id": 247, + "links": [], + "options": { + "displayLabels": [], + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "showLegend": true, + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "7.5.0-beta1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.*.transferSize, 10)", + "textEditor": false + } + ], + "title": "Transfer size per type", + "type": "piechart" + } + ], + "title": "Page size", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 48 + }, + "id": 284, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 49 + }, + "id": 319, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Keep track of the number of element that is affected by recalcualte style before first contentful paint and largest contentful paint.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 51 + }, + "id": 285, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.renderBlocking.recalculateStyle.beforeFCP.elements.$function, 'Elements before First Contentful Paint (FCP)')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.renderBlocking.recalculateStyle.beforeLCP.elements.$function, 'Elements before Largest Contentful Paint (LCP)')", + "textEditor": false + } + ], + "title": "Elements affected by recalculated styles", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 51 + }, + "id": 286, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.renderBlocking.recalculateStyle.beforeFCP.durationInMillis.$function, 'Time in recalculate style before First Contentful Paint (FCP)')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.renderBlocking.recalculateStyle.beforeLCP.durationInMillis.$function, 'Time in recalculate style before Largest Contentful Paint (LCP)')", + "textEditor": false + } + ], + "title": "Time spent in recalculated styles before FCP/LCP", + "type": "timeseries" + } + ], + "title": "Elements that needs recalculate style before ... [Chrome only, enable with --cpu]", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 49 + }, + "id": 309, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 60 + }, + "id": 310, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Screenshots showing what part of the page is the largest contentful paint (LCP) (the red area) and content that is moved around (cumulative layout shift).", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 12, + "x": 0, + "y": 62 + }, + "id": 312, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Largest contentful paint (LCP) - the largest area painted is in the red area.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 12, + "x": 12, + "y": 62 + }, + "id": 313, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Cumulative layout shift (CLS) - red is the area that moved.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 64 + }, + "id": 311, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "\n\n\n\n", + "mode": "html" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 64 + }, + "id": 314, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "\n\n\n\n", + "mode": "html" + }, + "pluginVersion": "10.0.1", + "type": "text" + } + ], + "title": "Largest Contentful Paint and Cumulative Layout Shift screenshot", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 50 + }, + "id": 199, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 51 + }, + "id": 321, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "The coach helps you find performance problems on your web page. ", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.The performance score (0-100) calculated by the [Coach](https://www.sitespeed.io/documentation/coach/) using performance best practices.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "max": 100, + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 53 + }, + "id": 201, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.bestpractice.score, 'Best practice')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.performance.score, 'Performance')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.privacy.score, 'Privacy')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "D", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.score, 'Total')", + "textEditor": false + } + ], + "title": "Coach Score", + "type": "timeseries" + } + ], + "title": "Coach history", + "type": "row" + }, + { + "collapsed": true, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 51 + }, + "id": 274, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 74 + }, + "id": 320, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Main document timings is the timings for downloading the main HTML page.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "auto", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 24, + "x": 0, + "y": 76 + }, + "id": 276, + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.mainDocumentTimings.*.$function, 12)" + } + ], + "title": "Main document timings", + "type": "timeseries" + } + ], + "title": "Main document timings", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 52 + }, + "id": 196, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 53 + }, + "id": 197, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.critical.$function, 'Critical')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.serious.$function, 'Serious')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.moderate.$function, 'Moderate')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "D", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.axe.violations.minor.$function, 'Minor')", + "textEditor": false + } + ], + "title": "Axe violations", + "type": "timeseries" + } + ], + "title": "Axe history", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 53 + }, + "id": 256, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 54 + }, + "id": 254, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.firstContentfulPaint.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.firstContentfulPaint.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "First Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 54 + }, + "id": 257, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.largestContentfulPaint.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.largestContentfulPaint.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Largest Contentful Paint", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 62 + }, + "id": 258, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.totalBlockingTime.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.totalBlockingTime.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Total Blocking Time", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 62 + }, + "id": 259, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.cumulativeLayoutShift.$function, '24h'), 'Last 24 hours')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.googleWebVitals.cumulativeLayoutShift.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Cumulative Layout Shift", + "type": "timeseries" + } + ], + "title": "Google Web Vitals trends", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 54 + }, + "id": 203, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 0, + "y": 55 + }, + "id": 204, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.paintTiming.first-contentful-paint.$function, 'FCP')", + "textEditor": false + } + ], + "title": "First Contentful Paint (FCP)", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 6, + "y": 55 + }, + "id": 206, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.pageinfo.cumulativeLayoutShift.$function, 'CLS')", + "textEditor": false + } + ], + "title": "Cumulative Layout Shift (CLS)", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 12, + "y": 55 + }, + "id": 205, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 'LCP')", + "textEditor": false + } + ], + "title": "Largest Contentful Paint (LCP)", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 6, + "x": 18, + "y": 55 + }, + "id": 207, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": false + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'TBT')", + "textEditor": false + } + ], + "title": "Total Blocking Time (TBT)", + "type": "timeseries" + } + ], + "title": "Google Web Vitals history", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 55 + }, + "id": 264, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 56 + }, + "id": 316, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Data that is collected using the [Navigation Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API) (the same data as you can collect from real users. Use it to compare changes in data from our real users.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "Metrics collected from theNavigation Timing API", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 24, + "x": 0, + "y": 58 + }, + "id": 270, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.navigationTiming.*.$function, 12)", + "textEditor": false + } + ], + "title": "Navigation Timings [$function]", + "type": "timeseries" + } + ], + "title": "Navigation Timings", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 56 + }, + "id": 146, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The document height in pixels.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 6, + "x": 0, + "y": 57 + }, + "id": 149, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.documentHeight, 'Document height (pixels)')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 5, + "x": 6, + "y": 57 + }, + "id": 151, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.totalDomains, 'Number of domains')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The total number of iframes used on the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 11, + "y": 57 + }, + "id": 148, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.iframes, 'Number of iframes')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 15, + "y": 57 + }, + "id": 152, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.cookies, 'Number of cookies')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 5, + "x": 19, + "y": 57 + }, + "id": 249, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.thirdParty.cookies, 'Third Party Cookies')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The $function cache expire time of all responses for the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 5, + "x": 0, + "y": 61 + }, + "id": 153, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.expireStats.$function, 'The $function cache expire time of all responses')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The $function last modified time of all responses for the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "decimals": 2, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 5, + "y": 61 + }, + "id": 154, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.lastModifiedStats.$function, 'The $function last modified time of all responses')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The average DOM depth of the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 3, + "x": 9, + "y": 61 + }, + "id": 155, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.domDepth.avg, 'Average DOM depth')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The max depth of DOM elements on the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 12, + "y": 61 + }, + "id": 156, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.domDepth.max, 'Max DOM depth')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 16, + "y": 61 + }, + "id": 150, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.localStorageSize, 'Local storage size')", + "textEditor": false + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The total number of iframes used on the page.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue" + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 4, + "x": 20, + "y": 61 + }, + "id": 250, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.coach.advice.info.scripts, 'Number of scripts')", + "textEditor": false + } + ], + "type": "stat" + } + ], + "title": "Even more page statistics", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 57 + }, + "id": 220, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 13, + "w": 24, + "x": 0, + "y": 58 + }, + "id": 221, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.contentTypes.*.requests, 10)", + "textEditor": false + } + ], + "title": "Number of requests per type", + "type": "timeseries" + } + ], + "title": "Request history", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 58 + }, + "id": 223, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 59 + }, + "id": 317, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Data collected using the [CPU long tasks API](https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API). The long tasks depends on the CPU used on the device that runs the tests so you can only compare metrics using the exact same device. Use the data to see trends.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 5, + "x": 0, + "y": 61 + }, + "id": 229, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 1 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 5, + "y": 61 + }, + "id": 230, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.beforeFirstContentfulPaint.tasks.$function, 'Long Tasks Before FCP')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 11, + "y": 61 + }, + "id": 231, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 7, + "x": 17, + "y": 61 + }, + "id": 232, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.durations.max, 'Longest Long Task')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 5, + "x": 0, + "y": 66 + }, + "id": 236, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')", + "textEditor": true + } + ], + "title": "CPU Long Tasks", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 5, + "y": 66 + }, + "id": 237, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.beforeFirstContentfulPaint.tasks.$function, 'Long Tasks Before FCP')", + "textEditor": false + } + ], + "title": "CPU Long Tasks Before FCP", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 11, + "y": 66 + }, + "id": 238, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')", + "textEditor": true + } + ], + "title": "Total Blocking Time", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 6, + "w": 7, + "x": 17, + "y": 66 + }, + "id": 239, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.longTasks.durations.max, 'Longest Long Task')", + "textEditor": true + } + ], + "title": "Longest Long Task", + "type": "timeseries" + } + ], + "title": "CPU Long Tasks [Chrome only, enable with --cpu]", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 59 + }, + "id": 96, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 73 + }, + "id": 323, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Data collected from the Chrome trace log whgere we can see where the browser spends it time creating the page.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 24, + "x": 0, + "y": 75 + }, + "id": 81, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.categories.*.median, 12)", + "textEditor": false + } + ], + "title": "CPU [Chrome only]", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The CPU metrics are collected from Chrome when you add --chrome.timeline to your run. The trace log is analyzed and sorted by type.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 90 + }, + "id": 138, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "currentAbove(aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cpu.events.*.median, 12), 1)", + "textEditor": false + } + ], + "title": "CPU time spent per event", + "type": "timeseries" + } + ], + "title": "CPU Details [Chrome only, enable with --cpu]", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 60 + }, + "id": 140, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 61 + }, + "id": 104, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cdp.performance.JSHeapTotalSize.$function, 12)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.cdp.performance.JSHeapUsedSize.$function, 12)", + "textEditor": false + } + ], + "title": "JS Heap size [Chrome only]", + "type": "timeseries" + } + ], + "title": "JavaScript heap [Chrome only]", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 61 + }, + "id": 252, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 62 + }, + "id": 322, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Delta TTFB metrics is metrics where we remove the time to first byte from the metrics. If we have metrics that are unstable because of unstable TTFB these metrics can be stable.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 64 + }, + "id": 253, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "G", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.deltaToTFFB.*.$function, 11)", + "textEditor": false + } + ], + "title": "Visual Metrics [$function]", + "type": "timeseries" + } + ], + "title": "Delta TTFB", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 62 + }, + "id": 214, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "massg" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 6, + "x": 0, + "y": 61 + }, + "id": 215, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.sustainable.totalCO2.$function, 'Total C02')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "massg" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 6, + "x": 6, + "y": 61 + }, + "id": 216, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "horizontal", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.sustainable.co2PerPageView.$function, 'CO2 Per Page View')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "massg" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 6, + "x": 12, + "y": 61 + }, + "id": 217, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "vertical", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.sustainable.co2FirstParty.$function, 'CO2 First Party')", + "textEditor": true + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [ + { + "options": { + "match": "null", + "result": { + "text": "N/A" + } + }, + "type": "special" + } + ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "#EAB839", + "value": 2000 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "massg" + }, + "overrides": [] + }, + "gridPos": { + "h": 4, + "w": 6, + "x": 18, + "y": 61 + }, + "id": 218, + "links": [], + "maxDataPoints": 100, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "10.0.1", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.sustainable.co2ThirdParty.$function, 'CO2 Third Party')", + "textEditor": true + } + ], + "type": "stat" + } + ], + "title": "Carbon emission (enable with --sustainable.enable)", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 63 + }, + "id": 115, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 62 + }, + "id": 318, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Performance metrics that you can add yourself by annotating your page. We automatically collect [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) metrics and [Element Timing API metrics](https://developer.mozilla.org/en-US/docs/Web/API/Element_timing_API) (when elements are painted on the screen).", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "Timing metrics collected using browser APIs like the Navigation Timing API.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 12, + "x": 0, + "y": 64 + }, + "id": 118, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.firstPaint.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.largestContentfulPaint.renderTime.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "D", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.loadEventEnd.$function, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "E", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.pageTimings.domContentLoadedTime.$function, 12)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "F", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.pageTimings.serverResponseTime.$function, 12)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "G", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.timeToContentfulPaint, 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "H", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.timeToFirstInteractive, 11)", + "textEditor": false + } + ], + "title": "Timings [$function]", + "type": "timeseries" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "Timings collected using the [Element Timing API](https://wicg.github.io/element-timing/).", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 12, + "x": 12, + "y": 64 + }, + "id": 119, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.elementTimings.*.renderTime.$function, 12)", + "textEditor": false + } + ], + "title": "Element Timings [$function]", + "type": "timeseries" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "All User Timing marks created on the page using the [User Timing API](https://www.w3.org/TR/user-timing/).", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 24, + "x": 0, + "y": 79 + }, + "id": 120, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.userTimings.marks.*.$function, 13)", + "textEditor": false + } + ], + "title": "User Timings Marks [$function]", + "type": "timeseries" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "All User Timing marks created on the page using the [User Timing API](https://www.w3.org/TR/user-timing/).", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 24, + "x": 0, + "y": 86 + }, + "id": 248, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.userTimings.measures.*.$function, 13)", + "textEditor": false + } + ], + "title": "User Timings Measures [$function]", + "type": "timeseries" + } + ], + "title": "Timings, element timings and user timings", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 64 + }, + "id": 269, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 63 + }, + "id": 315, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Main document timings is the timings for downloading the main HTML page.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 15, + "w": 24, + "x": 0, + "y": 65 + }, + "id": 265, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.mainDocumentTimings.*.$function, 12)", + "textEditor": false + } + ], + "title": "Main document timings [$function]", + "type": "timeseries" + } + ], + "title": "Main document timings", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 65 + }, + "id": 122, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The Visual Metrics are collected by recording and analysing a video of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 64 + }, + "id": 124, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, '24h'), 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "First Visual Change", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The Visual Metrics are collected by recording and analysing a video of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 64 + }, + "id": 126, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, '24h'), 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Speed Index", + "type": "timeseries" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 0, + "y": 72 + }, + "id": 128, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.pageTimings.serverResponseTime.$function, '24h'), 'TTFB')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.pageTimings.serverResponseTime.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "TTFB/Server response time", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": false, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byRegexp", + "options": "/earlier/" + }, + "properties": [ + { + "id": "custom.fillOpacity", + "value": 0 + }, + { + "id": "custom.lineWidth", + "value": 3 + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 12, + "x": 12, + "y": 72 + }, + "id": 130, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode(movingAverage($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, '24h'), 11)", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias(timeShift(movingAverage($base.$path.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.fullyLoaded.$function, '24h'), '7d'), 'One week earlier')", + "textEditor": false + } + ], + "title": "Fully Loaded", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "The Visual Metrics are collected by recording and analysing a video of the screen.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 10, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 3, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 24, + "x": 0, + "y": 80 + }, + "id": 179, + "links": [ + { + "targetBlank": true, + "title": "Page summary $page", + "url": "/dashboard/db/page-summary?$__url_time_range&$__all_variables" + } + ], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 11)", + "textEditor": false + } + ], + "timeFrom": "30d", + "title": "First Visual Change History", + "type": "timeseries" + } + ], + "title": "Timing trends", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 66 + }, + "id": 234, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 24, + "x": 0, + "y": 65 + }, + "id": 235, + "links": [], + "maxDataPoints": 100, + "options": { + "legend": { + "calcs": [ + "min", + "max" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.thirdParty.cookies, 'Third Party Cookies')", + "textEditor": true + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.firstParty.cookies, 'First Party Cookies')", + "textEditor": false + } + ], + "title": "Cookies", + "type": "timeseries" + } + ], + "title": "Cookies", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 67 + }, + "id": 136, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 35, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 2, + 2 + ], + "fill": "dash" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LargestImage" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 3, + 3 + ], + "fill": "dash" + } + } + ] + } + ] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 0, + "y": 67 + }, + "id": 142, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.thirdparty.category.*.requests.$function, 10)", + "textEditor": false + } + ], + "title": "Third party request by category", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 35, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 2, + 2 + ], + "fill": "dash" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LargestImage" + }, + "properties": [ + { + "id": "custom.lineStyle", + "value": { + "dash": [ + 3, + 3 + ], + "fill": "dash" + } + } + ] + } + ] + }, + "gridPos": { + "h": 10, + "w": 12, + "x": 12, + "y": 67 + }, + "id": 144, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.thirdparty.category.*.tools.$function, 10)", + "textEditor": false + } + ], + "title": "Third party tools by category", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "Activate by adding --thirdParty.cpu to to your run.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 77 + }, + "id": 134, + "links": [], + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.thirdparty.tool.*.cpu, 10)", + "textEditor": false + } + ], + "title": "CPU time spent per tool/domain - enable using --thirdParty.cpu [Chrome only]", + "type": "timeseries" + } + ], + "title": "Third party", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 68 + }, + "id": 176, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "All requests and their HTTP Status Code.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 15, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 9, + "w": 24, + "x": 0, + "y": 69 + }, + "id": 178, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull", + "range" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.pagexray.responseCodes.*, 10)", + "textEditor": false + } + ], + "title": "Response codes", + "type": "timeseries" + } + ], + "title": "Response codes", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 69 + }, + "id": 172, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 0, + "y": 70 + }, + "id": 111, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.console.*.$function, 11)", + "textEditor": false + } + ], + "title": "Console error and warnings", + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "Show number of errors from Browsertime and other tools.", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 12, + "y": 70 + }, + "id": 174, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "right", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.errors.$function, 11)", + "textEditor": false + } + ], + "title": "Errors collecting the metrics", + "type": "timeseries" + } + ], + "title": "Errors", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 70 + }, + "id": 261, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 71 + }, + "id": 307, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Variation over time in the in CPU benchmark metric (how long time it takes to run a JavaScript loop). Use this metric to make sure the CPU speed is constant over time.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 73 + }, + "id": 244, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.min, 'min')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.median, 'median')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.max, 'max')", + "textEditor": false + } + ], + "title": "CPU benchmark", + "type": "timeseries" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 87 + }, + "id": 267, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.browser.cpuBenchmark.stddev, 'stddev')", + "textEditor": false + } + ], + "title": "CPU benchmark stddev", + "type": "timeseries" + } + ], + "title": "CPU benchmark variation", + "type": "row" + }, + { + "collapsed": true, + "datasource": { + "type": "graphite", + "uid": "E-Pn3IaGz" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 71 + }, + "id": 243, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 72 + }, + "id": 308, + "options": { + "code": { + "language": "plaintext", + "showLineNumbers": false, + "showMiniMap": false + }, + "content": "Variation over time in the time to first byte metric (TTFB). Use it to make sure TTFB is stable over time.", + "mode": "markdown" + }, + "pluginVersion": "10.0.1", + "type": "text" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 74 + }, + "id": 266, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.min, 'min')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.median, 'median')", + "textEditor": false + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "hide": false, + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.max, 'max')", + "textEditor": false + } + ], + "title": "TTFB", + "type": "timeseries" + }, + { + "cacheTimeout": "", + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "links": [], + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green" + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Heading" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "semi-dark-green", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "LastVisualChange" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#cca300", + "mode": "fixed" + } + }, + { + "id": "custom.fillBelowTo", + "value": "FirstVisualChange" + } + ] + } + ] + }, + "gridPos": { + "h": 14, + "w": 24, + "x": 0, + "y": 88 + }, + "id": 245, + "links": [], + "options": { + "legend": { + "calcs": [ + "min", + "max", + "lastNotNull" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "tooltip": { + "mode": "single", + "sort": "none" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "G", + "target": "alias($base.$path.$testname.pageSummary.$group.$page.$browser.$connectivity.browsertime.statistics.timings.ttfb.stddev, 'stddev')", + "textEditor": false + } + ], + "title": "TTFB stddev", + "type": "timeseries" + } + ], + "title": "TTFB variation", + "type": "row" + } + ], + "refresh": "", + "schemaVersion": 38, + "style": "dark", + "tags": [], + "templating": { + "list": [ + { + "hide": 2, + "label": "sitespeed_io", + "name": "base", + "query": "sitespeed_io", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + }, + "options": [ + { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + } + ] + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "path", + "options": [], + "query": "$base.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "testname", + "options": [], + "query": "$base.$path.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.*", + "hide": 0, + "includeAll": false, + "label": "domain", + "multi": false, + "name": "group", + "options": [], + "query": "$base.$path.$testname.pageSummary.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.$group.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "page", + "options": [], + "query": "$base.$path.$testname.pageSummary.$group.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.$group.$page.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "browser", + "options": [], + "query": "$base.$path.$testname.pageSummary.$group.$page.*", + "refresh": 1, + "regex": "chrome|firefox|safari|edge", + "skipUrlSync": false, + "sort": 0, + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.$group.$page.$browser.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "connectivity", + "options": [], + "query": "$base.$path.$testname.pageSummary.$group.$page.$browser.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "type": "query", + "useTags": false + }, + { + "auto": false, + "auto_count": 30, + "auto_min": "10s", + "current": { + "selected": false, + "text": "median", + "value": "median" + }, + "hide": 0, + "name": "function", + "options": [ + { + "selected": false, + "text": "min", + "value": "min" + }, + { + "selected": false, + "text": "mean", + "value": "mean" + }, + { + "selected": true, + "text": "median", + "value": "median" + }, + { + "selected": false, + "text": "p90", + "value": "p90" + }, + { + "selected": false, + "text": "max", + "value": "max" + }, + { + "selected": false, + "text": "stddev", + "value": "stddev" + } + ], + "query": "min, mean,median,p90,max,stddev", + "queryValue": "", + "refresh": 2, + "skipUrlSync": false, + "type": "interval" + }, + { + "hide": 2, + "name": "resulturl", + "query": "https://changeme.example.org", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "https://changeme.example.org", + "text": "https://changeme.example.org", + "selected": false + }, + "options": [ + { + "value": "https://changeme.example.org", + "text": "https://changeme.example.org", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "screenshottype", + "query": "jpg", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "jpg", + "text": "jpg", + "selected": false + }, + "options": [ + { + "value": "jpg", + "text": "jpg", + "selected": false + } + ] + } + ] + }, + "time": { + "from": "now-7d", + "to": "now" + }, + "timepicker": { + "refresh_intervals": [ + "5s", + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ], + "time_options": [ + "5m", + "15m", + "1h", + "6h", + "12h", + "24h", + "2d", + "7d", + "30d" + ] + }, + "timezone": "browser", + "title": "Page metrics", + "uid": "9NDMzFfMk", + "version": 21, + "weekStart": "" +} \ No newline at end of file diff --git a/docker/grafana/provisioning/dashboards/Plus1.json b/docker/grafana/provisioning/dashboards/Plus1.json new file mode 100644 index 000000000..d67a1dbb3 --- /dev/null +++ b/docker/grafana/provisioning/dashboards/Plus1.json @@ -0,0 +1,3268 @@ +{ + "__inputs": [ + { + "name": "graphite", + "label": "graphite", + "description": "", + "type": "datasource", + "pluginId": "graphite", + "pluginName": "Graphite" + }, + { + "name": "VAR_BASE", + "type": "constant", + "label": "sitespeed_io", + "value": "sitespeed_io", + "description": "" + } + ], + "__requires": [ + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "7.5.0" + }, + { + "type": "panel", + "id": "grafana-piechart-panel", + "name": "Pie Chart", + "version": "1.6.1" + }, + { + "type": "panel", + "id": "graph", + "name": "Graph", + "version": "" + }, + { + "type": "datasource", + "id": "graphite", + "name": "Graphite", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "piechart", + "name": "Pie chart v2", + "version": "" + }, + { + "type": "panel", + "id": "stat", + "name": "Stat", + "version": "" + }, + { + "type": "panel", + "id": "text", + "name": "Text", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": "-- Grafana --", + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "type": "dashboard" + } + ] + }, + "editable": true, + "gnetId": null, + "graphTooltip": 0, + "id": null, + "iteration": 1616704198863, + "links": [], + "panels": [ + { + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 23, + "title": "Score", + "type": "row" + }, + { + "datasource": "graphite", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 1 + }, + "id": 9, + "options": { + "content": "Use the +1 container to get metrics from Lighthouse and GPSI", + "mode": "markdown" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "timeFrom": null, + "timeShift": null, + "type": "text" + }, + { + "datasource": "graphite", + "fieldConfig": { + "defaults": { + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "red", + "value": null + }, + { + "color": "yellow", + "value": 80 + }, + { + "color": "green", + "value": 90 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 3 + }, + "id": 26, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "mean" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refId": "A", + "target": "aliasByNode($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.score.*, 9)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "GPSI Score", + "type": "stat" + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 3 + }, + "hiddenSeries": false, + "id": 4, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "maxDataPoints": "", + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refId": "A", + "target": "aliasByNode($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.score.*, 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "title": "GPSI Score", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "none", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 17 + }, + "id": 30, + "panels": [], + "title": "CrUX Chrome data for origin $group", + "type": "row" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "displayName": "First Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 0, + "y": 18 + }, + "id": 39, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_CONTENTFUL_PAINT_MS.percentile, 'First Contentful Paint')", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "displayName": "Largest Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 6, + "y": 18 + }, + "id": 40, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.LARGEST_CONTENTFUL_PAINT_MS.percentile, 'Largest Contentful Paint')", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "displayName": "First Input Delay", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 12, + "y": 18 + }, + "id": 41, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_INPUT_DELAY_MS.percentile, 'First Input Delay')", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "displayName": "Cumulative Layout Shift", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 10 + }, + { + "color": "red", + "value": 25 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 18, + "y": 18 + }, + "id": 42, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.percentile, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "cacheTimeout": null, + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 6, + "x": 0, + "y": 25 + }, + "id": 28, + "interval": null, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "First Contentful Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "decimals": 0, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "percent" + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "slow" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "#E02F44", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "moderate" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "yellow", + "mode": "fixed" + } + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "fast" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "green", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 6, + "y": 25 + }, + "id": 31, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "displayLabels": [], + "legend": { + "calcs": [], + "displayMode": "table", + "placement": "right", + "values": [ + "value" + ] + }, + "pieType": "pie", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {} + }, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Largest Contentful Paint", + "type": "piechart" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "cacheTimeout": null, + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 6, + "x": 12, + "y": 25 + }, + "id": 32, + "interval": null, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_INPUT_DELAY_MS.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_INPUT_DELAY_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_INPUT_DELAY_MS.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "First Input Delay", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "cacheTimeout": null, + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 7, + "w": 6, + "x": 18, + "y": 25 + }, + "id": 33, + "interval": null, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 9)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Cumulative Layout Shift", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 6, + "x": 0, + "y": 32 + }, + "hiddenSeries": false, + "id": 35, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "title": "First Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 6, + "x": 6, + "y": 32 + }, + "hiddenSeries": false, + "id": 36, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "title": "Largest Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 6, + "x": 12, + "y": 32 + }, + "hiddenSeries": false, + "id": 37, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_INPUT_DELAY_MS.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_INPUT_DELAY_MS.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.FIRST_INPUT_DELAY_MS.slow, 100), 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "title": "First Input Delay", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 9, + "w": 6, + "x": 18, + "y": 32 + }, + "hiddenSeries": false, + "id": 38, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 9)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.summary.$group.gpsi.$type.originLoadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 9)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "title": "Cumulative Layout Shift", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 41 + }, + "id": 25, + "panels": [], + "title": "CrUX Chrome data for page $group$page", + "type": "row" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "cacheTimeout": null, + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 6, + "w": 6, + "x": 0, + "y": 42 + }, + "id": 16, + "interval": null, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "First Contentful Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "cacheTimeout": null, + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 6, + "w": 6, + "x": 6, + "y": 42 + }, + "id": 19, + "interval": null, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Largest Contentful Paint", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "cacheTimeout": null, + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 6, + "w": 6, + "x": 12, + "y": 42 + }, + "id": 20, + "interval": null, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_INPUT_DELAY_MS.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_INPUT_DELAY_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_INPUT_DELAY_MS.slow, 100), 10)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "First Input Delay", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "#E02F44" + }, + "breakPoint": "50%", + "cacheTimeout": null, + "combine": { + "label": "Others", + "threshold": 0 + }, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": {}, + "overrides": [] + }, + "fontSize": "80%", + "format": "percent", + "gridPos": { + "h": 6, + "w": 6, + "x": 18, + "y": 42 + }, + "id": 21, + "interval": null, + "legend": { + "show": true, + "values": true + }, + "legendType": "Right side", + "links": [], + "maxDataPoints": 1, + "nullPointMode": "connected", + "pieType": "pie", + "strokeWidth": 1, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE, 100), 10)", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Cumulative Layout Shift", + "type": "grafana-piechart-panel", + "valueName": "current" + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 11, + "w": 6, + "x": 0, + "y": 48 + }, + "hiddenSeries": false, + "id": 6, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "First Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 11, + "w": 6, + "x": 6, + "y": 48 + }, + "hiddenSeries": false, + "id": 10, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.LARGEST_CONTENTFUL_PAINT_MS.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.LARGEST_CONTENTFUL_PAINT_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.LARGEST_CONTENTFUL_PAINT_MS.slow, 100), 10)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Largest Contentful Paint", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 11, + "w": 6, + "x": 12, + "y": 48 + }, + "hiddenSeries": false, + "id": 11, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_INPUT_DELAY_MS.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_INPUT_DELAY_MS.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_INPUT_DELAY_MS.slow, 100), 10)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "First Input Delay", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": { + "slow": "dark-red" + }, + "bars": true, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 4, + "fillGradient": 0, + "gridPos": { + "h": 11, + "w": 6, + "x": 18, + "y": 48 + }, + "hiddenSeries": false, + "id": 12, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": true, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": true, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.fast, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.moderate, 100), 10)", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.slow, 100), 10)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Cumulative Layout Shift", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "percent", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 59 + }, + "id": 18, + "panels": [], + "title": "History", + "type": "row" + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 2, + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 14, + "w": 12, + "x": 0, + "y": 60 + }, + "hiddenSeries": false, + "id": 5, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_CONTENTFUL_PAINT_MS.percentile, 'First Contentful Paint')", + "textEditor": false + }, + { + "refCount": 0, + "refId": "B", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.FIRST_INPUT_DELAY_MS.percentile, 'First Input Delay')", + "textEditor": false + }, + { + "refCount": 0, + "refId": "C", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.LARGEST_CONTENTFUL_PAINT_MS.percentile, 'Largest Contentful Paint')", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Loading experience percentile", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 1, + "format": "ms", + "label": "", + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "decimals": 0, + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 14, + "w": 12, + "x": 12, + "y": 60 + }, + "hiddenSeries": false, + "id": 13, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.gpsi.$type.loadingExperience.CUMULATIVE_LAYOUT_SHIFT_SCORE.percentile, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": null, + "timeRegions": [], + "timeShift": null, + "title": "Loading experience percentile", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:1865", + "decimals": 0, + "format": "none", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:1866", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 74 + }, + "id": 44, + "panels": [], + "title": "Lighthouse Google Web Vitals", + "type": "row" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "displayName": "First Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1000 + }, + { + "color": "red", + "value": 3000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 0, + "y": 75 + }, + "id": 46, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.first-contentful-paint.numericValue, 'First Contentful Paint')", + "textEditor": true + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "displayName": "Largest Contentful Paint", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "yellow", + "value": 2500 + }, + { + "color": "red", + "value": 4000 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 6, + "y": 75 + }, + "id": 47, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.largest-contentful-paint.numericValue, 'First Contentful Paint')", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 12, + "y": 75 + }, + "id": 50, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.total-blocking-time.numericValue, 'Total Blocking ime')", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "cacheTimeout": null, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "displayName": "Cumulative Layout Shift", + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 10 + }, + { + "color": "red", + "value": 25 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 7, + "w": 6, + "x": 18, + "y": 75 + }, + "id": 49, + "interval": null, + "links": [], + "maxDataPoints": 1, + "options": { + "colorMode": "background", + "graphMode": "area", + "justifyMode": "center", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "7.5.0", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.cumulative-layout-shift.numericValue, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "timeFrom": null, + "timeShift": null, + "type": "stat" + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 82 + }, + "id": 55, + "panels": [], + "title": "Lighthouse score", + "type": "row" + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "links": [] + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 13, + "w": 24, + "x": 0, + "y": 83 + }, + "hiddenSeries": false, + "id": 2, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode(scale($base.$path.$testtype.pageSummary.$group.$page.lighthouse.categories.*.score, 100), 8)", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "title": "Lighthouse Score", + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:360", + "format": "short", + "label": null, + "logBase": 1, + "max": "100", + "min": "0", + "show": true + }, + { + "$$hashKey": "object:361", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "collapsed": false, + "datasource": "graphite", + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 96 + }, + "id": 57, + "panels": [], + "title": "Lighthouse Google Web Vitals history", + "type": "row" + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "links": [], + "unit": "ms" + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 10, + "w": 12, + "x": 0, + "y": 97 + }, + "hiddenSeries": false, + "id": 45, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.first-contentful-paint.numericValue, 'First Contentful Paint')", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:360", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:361", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "links": [], + "unit": "ms" + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 10, + "w": 12, + "x": 12, + "y": 97 + }, + "hiddenSeries": false, + "id": 51, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.largest-contentful-paint.numericValue, 'Largest Contentful Paint')", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:360", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:361", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "links": [], + "unit": "ms" + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 10, + "w": 12, + "x": 0, + "y": 107 + }, + "hiddenSeries": false, + "id": 52, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.total-blocking-time.numericValue, 'Total Blocking Time')", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:360", + "format": "ms", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:361", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + }, + { + "aliasColors": {}, + "bars": false, + "dashLength": 10, + "dashes": false, + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "links": [], + "unit": "none" + }, + "overrides": [] + }, + "fill": 0, + "fillGradient": 0, + "gridPos": { + "h": 10, + "w": 12, + "x": 12, + "y": 107 + }, + "hiddenSeries": false, + "id": 53, + "legend": { + "alignAsTable": true, + "avg": false, + "current": true, + "max": true, + "min": true, + "show": true, + "total": false, + "values": true + }, + "lines": true, + "linewidth": 1, + "nullPointMode": "connected", + "options": { + "alertThreshold": true + }, + "percentage": false, + "pluginVersion": "7.5.0", + "pointradius": 2, + "points": false, + "renderer": "flot", + "seriesOverrides": [], + "spaceLength": 10, + "stack": false, + "steppedLine": false, + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testtype.pageSummary.$group.$page.lighthouse.audits.cumulative-layout-shift.numericValue, 'Cumulative Layout Shift')", + "textEditor": false + } + ], + "thresholds": [], + "timeFrom": "30d", + "timeRegions": [], + "timeShift": null, + "tooltip": { + "shared": true, + "sort": 0, + "value_type": "individual" + }, + "type": "graph", + "xaxis": { + "buckets": null, + "mode": "time", + "name": null, + "show": true, + "values": [] + }, + "yaxes": [ + { + "$$hashKey": "object:360", + "format": "none", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + }, + { + "$$hashKey": "object:361", + "format": "short", + "label": null, + "logBase": 1, + "max": null, + "min": null, + "show": true + } + ], + "yaxis": { + "align": false, + "alignLevel": null + } + } + ], + "schemaVersion": 27, + "style": "dark", + "tags": [], + "templating": { + "list": [ + { + "description": null, + "error": null, + "hide": 2, + "label": "sitespeed_io", + "name": "base", + "query": "sitespeed_io", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + }, + "options": [ + { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + } + ] + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$base.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": null, + "multi": false, + "name": "path", + "options": [], + "query": "$base.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$base.$path.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": null, + "multi": false, + "name": "testtype", + "options": [], + "query": "$base.$path.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$base.$path.$testtype.pageSummary.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": "domain", + "multi": false, + "name": "group", + "options": [], + "query": "$base.$path.$testtype.pageSummary.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": {}, + "datasource": "graphite", + "definition": "$base.$path.$testtype.pageSummary.$group.*", + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": null, + "multi": false, + "name": "page", + "options": [], + "query": "$base.$path.$testtype.pageSummary.$group.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tags": [], + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "allValue": null, + "current": { + "selected": true, + "text": "desktop", + "value": "desktop" + }, + "description": null, + "error": null, + "hide": 0, + "includeAll": false, + "label": "GPSI type", + "multi": false, + "name": "type", + "options": [ + { + "selected": false, + "text": "mobile", + "value": "mobile" + }, + { + "selected": true, + "text": "desktop", + "value": "desktop" + } + ], + "query": "mobile,desktop", + "queryValue": "", + "skipUrlSync": false, + "type": "custom" + } + ] + }, + "time": { + "from": "now-7d", + "to": "now" + }, + "timepicker": { + "refresh_intervals": [ + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ] + }, + "timezone": "", + "title": "Plus1", + "uid": "abRtVXRGk", + "version": 7 +} \ No newline at end of file diff --git a/docker/grafana/provisioning/dashboards/Welcome.json b/docker/grafana/provisioning/dashboards/Welcome.json new file mode 100644 index 000000000..410ceda10 --- /dev/null +++ b/docker/grafana/provisioning/dashboards/Welcome.json @@ -0,0 +1,166 @@ +{ + "__inputs": [ + { + "name": "graphite", + "label": "graphite", + "description": "", + "type": "datasource", + "pluginId": "graphite", + "pluginName": "Graphite" + } + ], + "__requires": [ + { + "type": "panel", + "id": "dashlist", + "name": "Dashboard list", + "version": "" + }, + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "7.0.0" + }, + { + "type": "datasource", + "id": "graphite", + "name": "Graphite", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "text", + "name": "Text", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": "-- Grafana --", + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "type": "dashboard" + } + ] + }, + "editable": true, + "gnetId": null, + "graphTooltip": 0, + "id": null, + "links": [], + "panels": [ + { + "content": "

Welcome to sitespeed.io

\n

\nsitespeed.io | \nDocumentation | \nSetup your own dashboard | \nChangelog | \nTwitter | \nOpen Collective\n

\n\n

\nSitespeed.io is a set of Open Source tools that makes it easy to monitor and measure the performance of your web site.\n

\n

If you don't know what you can do with sitespeed.io, you should look at the page timing dashboard or checkout what the HTML result looks like.\n", + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "custom": { + "align": null + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 18, + "w": 13, + "x": 0, + "y": 0 + }, + "id": 4, + "mode": "html", + "pluginVersion": "7.0.0", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "timeFrom": null, + "timeShift": null, + "title": "", + "type": "text" + }, + { + "datasource": "graphite", + "description": "", + "fieldConfig": { + "defaults": { + "custom": {} + }, + "overrides": [] + }, + "folderId": null, + "gridPos": { + "h": 18, + "w": 11, + "x": 13, + "y": 0 + }, + "headings": true, + "id": 2, + "limit": 10, + "query": "", + "recent": false, + "search": true, + "starred": false, + "tags": [], + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "timeFrom": null, + "timeShift": null, + "title": "Installed dashboards", + "type": "dashlist" + } + ], + "schemaVersion": 25, + "style": "dark", + "tags": [], + "templating": { + "list": [] + }, + "time": { + "from": "now-6h", + "to": "now" + }, + "timepicker": { + "refresh_intervals": [ + "10s", + "30s", + "1m", + "5m", + "15m", + "30m", + "1h", + "2h", + "1d" + ] + }, + "timezone": "", + "title": "Welcome to sitespeed.io", + "uid": "3zStduRGk", + "version": 6 +} \ No newline at end of file diff --git a/docker/grafana/provisioning/dashboards/WikipediaLogin.json b/docker/grafana/provisioning/dashboards/WikipediaLogin.json new file mode 100644 index 000000000..9355f1bfc --- /dev/null +++ b/docker/grafana/provisioning/dashboards/WikipediaLogin.json @@ -0,0 +1,2735 @@ +{ + "__inputs": [ + { + "name": "graphite", + "label": "graphite", + "description": "", + "type": "datasource", + "pluginId": "graphite", + "pluginName": "Graphite" + }, + { + "name": "VAR_BASE", + "type": "constant", + "label": "base", + "value": "sitespeed_io", + "description": "" + }, + { + "name": "VAR_PATH", + "type": "constant", + "label": "path", + "value": "desktopUserJourney", + "description": "" + }, + { + "name": "VAR_RESULTURL", + "type": "constant", + "label": "resulturl", + "value": "https://s3.amazonaws.com/results.sitespeed.io", + "description": "" + }, + { + "name": "VAR_TESTNAME", + "type": "constant", + "label": "testname", + "value": "loginWikipedia", + "description": "" + }, + { + "name": "VAR_DOMAIN", + "type": "constant", + "label": "domain", + "value": "en_wikipedia_org", + "description": "" + }, + { + "name": "VAR_PAGE1", + "type": "constant", + "label": "page1", + "value": "LoginPage", + "description": "" + }, + { + "name": "VAR_PAGE2", + "type": "constant", + "label": "page2", + "value": "LoggedIn", + "description": "" + }, + { + "name": "VAR_PAGE3", + "type": "constant", + "label": "page3", + "value": "_wiki_Barack_Obama", + "description": "" + }, + { + "name": "VAR_PAGE4", + "type": "constant", + "label": "page4", + "value": "_wiki_President_of_the_United_States", + "description": "" + } + ], + "__elements": [], + "__requires": [ + { + "type": "grafana", + "id": "grafana", + "name": "Grafana", + "version": "8.3.3" + }, + { + "type": "datasource", + "id": "graphite", + "name": "Graphite", + "version": "1.0.0" + }, + { + "type": "panel", + "id": "stat", + "name": "Stat", + "version": "" + }, + { + "type": "panel", + "id": "text", + "name": "Text", + "version": "" + }, + { + "type": "panel", + "id": "timeseries", + "name": "Time series", + "version": "" + } + ], + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": "-- Grafana --", + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "target": { + "limit": 100, + "matchAny": false, + "tags": [], + "type": "dashboard" + }, + "type": "dashboard" + } + ] + }, + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "id": null, + "iteration": 1646754293149, + "links": [], + "liveNow": false, + "panels": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 3, + "w": 23, + "x": 0, + "y": 0 + }, + "id": 28, + "options": { + "content": "# Wikipedia - logged in user\nHere we test the Wikipedia as a logged in user. We measure the \n[login page](https://en.wikipedia.org/w/index.php?title=Special:UserLogin&returnto=Main+Page), log in the user and measure when we are redirected back to the main page. We wait for 21 seconds and then \ngo the [Barack Obama page](https://en.wikipedia.org/wiki/Barack_Obama). When the page finished loading, we then waits another 21 seconds and then go to the [President page](https://en.wikipedia.org/wiki/President_of_the_United_States).\n\n ", + "mode": "markdown" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "type": "text" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 3 + }, + "id": 6, + "panels": [], + "title": "Screenshots", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 0, + "y": 4 + }, + "id": 2, + "options": { + "content": "\n", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "title": "Login page", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 6, + "y": 4 + }, + "id": 42, + "options": { + "content": "\n", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "title": "Login step and redirect to main page", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 12, + "y": 4 + }, + "id": 43, + "options": { + "content": "\n", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "title": "Barack Obama page", + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "description": "", + "gridPos": { + "h": 5, + "w": 6, + "x": 18, + "y": 4 + }, + "id": 44, + "options": { + "content": "\n", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "title": "President of the United States page", + "type": "text" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 9 + }, + "id": 13, + "panels": [], + "title": "Video", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 0, + "y": 10 + }, + "id": 14, + "options": { + "content": "", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 6, + "y": 10 + }, + "id": 45, + "options": { + "content": "", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 12, + "y": 10 + }, + "id": 46, + "options": { + "content": "", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "type": "text" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 6, + "w": 6, + "x": 18, + "y": 10 + }, + "id": 47, + "options": { + "content": "", + "mode": "html" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refId": "A", + "target": "" + } + ], + "type": "text" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 16 + }, + "id": 9, + "panels": [], + "title": "Visual Metrics", + "type": "row" + }, + { + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 0, + "y": 17 + }, + "id": 7, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 11)" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function, 11)" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "C", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, 11)" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "refCount": 0, + "refId": "D", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.visualMetrics.LastVisualChange.$function, 11)" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 6, + "y": 17 + }, + "id": 17, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 11)" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function, 11)" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, 11)" + }, + { + "refCount": 0, + "refId": "D", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.visualMetrics.LastVisualChange.$function, 11)" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 12, + "y": 17 + }, + "id": 18, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 11)" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function, 11)" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, 11)" + }, + { + "refCount": 0, + "refId": "D", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.visualMetrics.LastVisualChange.$function, 11)" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 11, + "w": 6, + "x": 18, + "y": 17 + }, + "id": 48, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.visualMetrics.FirstVisualChange.$function, 11)" + }, + { + "refCount": 0, + "refId": "B", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.visualMetrics.LargestImage.$function, 11)" + }, + { + "refCount": 0, + "refId": "C", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.visualMetrics.SpeedIndex.$function, 11)" + }, + { + "refCount": 0, + "refId": "D", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.visualMetrics.LastVisualChange.$function, 11)" + } + ], + "type": "timeseries" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 28 + }, + "id": 20, + "panels": [], + "title": "CPU Long Tasks", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 0, + "y": 29 + }, + "id": 21, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 3, + "y": 29 + }, + "id": 22, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 6, + "y": 29 + }, + "id": 23, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 9, + "y": 29 + }, + "id": 24, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 12, + "y": 29 + }, + "id": 25, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 15, + "y": 29 + }, + "id": 26, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 100 + }, + { + "color": "red", + "value": 300 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 18, + "y": 29 + }, + "id": 49, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "stat" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "thresholds" + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "#EAB839", + "value": 1 + }, + { + "color": "red", + "value": 2 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 3, + "x": 21, + "y": 29 + }, + "id": 50, + "options": { + "colorMode": "background", + "graphMode": "none", + "justifyMode": "auto", + "orientation": "auto", + "reduceOptions": { + "calcs": [ + "lastNotNull" + ], + "fields": "", + "values": false + }, + "text": {}, + "textMode": "auto" + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "stat" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 34 + }, + "id": 30, + "panels": [], + "title": "CPU Long Tasks history", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 0, + "y": 35 + }, + "id": 31, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 6, + "y": 35 + }, + "id": 33, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 12, + "y": 35 + }, + "id": 35, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "ms" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 18, + "y": 35 + }, + "id": 53, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.cpu.longTasks.totalBlockingTime.$function, 'Total Blocking Time')" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 0, + "y": 40 + }, + "id": 32, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 6, + "y": 40 + }, + "id": 34, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 12, + "y": 40 + }, + "id": 36, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "decimals": 0, + "mappings": [], + "min": 0, + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "none" + }, + "overrides": [] + }, + "gridPos": { + "h": 5, + "w": 6, + "x": 18, + "y": 40 + }, + "id": 52, + "options": { + "legend": { + "calcs": [ + "max", + "min" + ], + "displayMode": "list", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "alias($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.browsertime.statistics.cpu.longTasks.tasks.$function, 'Long Tasks')" + } + ], + "type": "timeseries" + }, + { + "collapsed": false, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 45 + }, + "id": 38, + "panels": [], + "title": "Response transfer size", + "type": "row" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 17, + "w": 6, + "x": 0, + "y": 46 + }, + "id": 39, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page1.$browser.$connectivity.pagexray.contentTypes.*.transferSize, 10)" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 17, + "w": 6, + "x": 6, + "y": 46 + }, + "id": 40, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page2.$browser.$connectivity.pagexray.contentTypes.*.transferSize, 10)" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 17, + "w": 6, + "x": 12, + "y": 46 + }, + "id": 41, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page3.$browser.$connectivity.pagexray.contentTypes.*.transferSize, 10)" + } + ], + "type": "timeseries" + }, + { + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisLabel": "", + "axisPlacement": "auto", + "barAlignment": 0, + "drawStyle": "line", + "fillOpacity": 0, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineInterpolation": "linear", + "lineWidth": 1, + "pointSize": 5, + "scaleDistribution": { + "type": "linear" + }, + "showPoints": "never", + "spanNulls": true, + "stacking": { + "group": "A", + "mode": "none" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "decbytes" + }, + "overrides": [] + }, + "gridPos": { + "h": 17, + "w": 6, + "x": 18, + "y": 46 + }, + "id": 51, + "options": { + "legend": { + "calcs": [ + "lastNotNull", + "max", + "min" + ], + "displayMode": "table", + "placement": "bottom" + }, + "tooltip": { + "mode": "single" + } + }, + "pluginVersion": "8.3.3", + "targets": [ + { + "refCount": 0, + "refId": "A", + "target": "aliasByNode($base.$path.$testname.pageSummary.$domain.$page4.$browser.$connectivity.pagexray.contentTypes.*.transferSize, 10)" + } + ], + "type": "timeseries" + } + ], + "schemaVersion": 34, + "style": "dark", + "tags": [], + "templating": { + "list": [ + { + "hide": 2, + "name": "base", + "query": "sitespeed_io", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + }, + "options": [ + { + "value": "sitespeed_io", + "text": "sitespeed_io", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "path", + "query": "${VAR_PATH}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_PATH}", + "text": "${VAR_PATH}", + "selected": false + }, + "options": [ + { + "value": "${VAR_PATH}", + "text": "${VAR_PATH}", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "resulturl", + "query": "https://changeme.example.org", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "https://changeme.example.org", + "text": "https://changeme.example.org", + "selected": false + }, + "options": [ + { + "value": "https://changeme.example.org", + "text": "https://changeme.example.org", + "selected": false + } + ] + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.*.*.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "browser", + "options": [], + "query": "$base.$path.$testname.pageSummary.*.*.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "current": {}, + "datasource": { + "type": "graphite", + "uid": "graphite" + }, + "definition": "$base.$path.$testname.pageSummary.*.*.$browser.*", + "hide": 0, + "includeAll": false, + "multi": false, + "name": "connectivity", + "options": [], + "query": "$base.$path.$testname.pageSummary.*.*.$browser.*", + "refresh": 1, + "regex": "", + "skipUrlSync": false, + "sort": 0, + "tagValuesQuery": "", + "tagsQuery": "", + "type": "query", + "useTags": false + }, + { + "auto": false, + "auto_count": 30, + "auto_min": "10s", + "current": { + "selected": false, + "text": "median", + "value": "median" + }, + "hide": 0, + "name": "function", + "options": [ + { + "selected": false, + "text": "min", + "value": "min" + }, + { + "selected": false, + "text": "mean", + "value": "mean" + }, + { + "selected": true, + "text": "median", + "value": "median" + }, + { + "selected": false, + "text": "p90", + "value": "p90" + }, + { + "selected": false, + "text": "max", + "value": "max" + }, + { + "selected": false, + "text": "stddev", + "value": "stddev" + } + ], + "query": "min, mean,median,p90,max,stddev", + "refresh": 2, + "skipUrlSync": false, + "type": "interval" + }, + { + "hide": 2, + "name": "testname", + "query": "${VAR_TESTNAME}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_TESTNAME}", + "text": "${VAR_TESTNAME}", + "selected": false + }, + "options": [ + { + "value": "${VAR_TESTNAME}", + "text": "${VAR_TESTNAME}", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "domain", + "query": "${VAR_DOMAIN}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_DOMAIN}", + "text": "${VAR_DOMAIN}", + "selected": false + }, + "options": [ + { + "value": "${VAR_DOMAIN}", + "text": "${VAR_DOMAIN}", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "page1", + "query": "${VAR_PAGE1}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_PAGE1}", + "text": "${VAR_PAGE1}", + "selected": false + }, + "options": [ + { + "value": "${VAR_PAGE1}", + "text": "${VAR_PAGE1}", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "page2", + "query": "${VAR_PAGE2}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_PAGE2}", + "text": "${VAR_PAGE2}", + "selected": false + }, + "options": [ + { + "value": "${VAR_PAGE2}", + "text": "${VAR_PAGE2}", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "page3", + "query": "${VAR_PAGE3}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_PAGE3}", + "text": "${VAR_PAGE3}", + "selected": false + }, + "options": [ + { + "value": "${VAR_PAGE3}", + "text": "${VAR_PAGE3}", + "selected": false + } + ] + }, + { + "hide": 2, + "name": "page4", + "query": "${VAR_PAGE4}", + "skipUrlSync": false, + "type": "constant", + "current": { + "value": "${VAR_PAGE4}", + "text": "${VAR_PAGE4}", + "selected": false + }, + "options": [ + { + "value": "${VAR_PAGE4}", + "text": "${VAR_PAGE4}", + "selected": false + } + ] + } + ] + }, + "time": { + "from": "now-24h", + "to": "now" + }, + "timepicker": {}, + "timezone": "", + "title": "Wikipedia login", + "uid": "d-pdqGBGdse", + "version": 47, + "weekStart": "" +} \ No newline at end of file diff --git a/docker/grafana/provisioning/dashboards/default.yaml b/docker/grafana/provisioning/dashboards/default.yaml new file mode 100644 index 000000000..da92ff305 --- /dev/null +++ b/docker/grafana/provisioning/dashboards/default.yaml @@ -0,0 +1,24 @@ +apiVersion: 1 + +providers: + # an unique provider name. Required + - name: 'sitespeed.io' + # Org id. Default to 1 + orgId: 1 + # name of the dashboard folder. + folder: 'sitespeed.io' + # folder UID. will be automatically generated if not specified + folderUid: '' + # provider type. Default to 'file' + type: file + # disable dashboard deletion + disableDeletion: false + # how often Grafana will scan for changed dashboards + updateIntervalSeconds: 10 + # allow updating provisioned dashboards from the UI + allowUiUpdates: true + options: + # path to dashboard files on disk. Required when using the 'file' type + path: /var/lib/grafana/dashboards + # use folder names from filesystem to create folders in Grafana + foldersFromFilesStructure: true diff --git a/docker/grafana/provisioning/datasources/graphite.yaml b/docker/grafana/provisioning/datasources/graphite.yaml new file mode 100644 index 000000000..67383c33a --- /dev/null +++ b/docker/grafana/provisioning/datasources/graphite.yaml @@ -0,0 +1,51 @@ +# Configuration file version +apiVersion: 1 + +# List of data sources to delete from the database. +deleteDatasources: + - name: graphite + orgId: 1 + +# List of data sources to insert/update depending on what's +# available in the database. +datasources: + # Sets the name you use to refer to + # the data source in panels and queries. + - name: graphite + # Sets the data source type. + type: graphite + # Sets the access mode, either + # proxy or direct (Server or Browser in the UI). + # Some data sources are incompatible with any setting + # but proxy (Server). + access: proxy + # Sets the organization id. Defaults to orgId 1. + orgId: 1 + # Sets a custom UID to reference this + # data source in other parts of the configuration. + # If not specified, Grafana generates one. + uid: + # Sets the data source's URL, including the + # port. + url: http://graphite:80 + # Sets the database user, if necessary. + user: + # Sets the database name, if necessary. + database: + # Enables basic authorization. + basicAuth: true + # Sets the basic authorization username. + basicAuthUser: guest + # Enables credential headers. + withCredentials: false + # Toggles whether the data source is pre-selected + # for new panels. You can set only one default + # data source per organization. + isDefault: true + secureJsonData: + # Sets the basic authorization password. + basicAuthPassword: guest + version: 1 + # Allows users to edit data sources from the + # Grafana UI. + editable: true \ No newline at end of file diff --git a/docker/grafana/provisioning/datasources/json.yaml b/docker/grafana/provisioning/datasources/json.yaml new file mode 100644 index 000000000..210936539 --- /dev/null +++ b/docker/grafana/provisioning/datasources/json.yaml @@ -0,0 +1,18 @@ +# Configuration file version +apiVersion: 1 + +# List of data sources to delete from the database. +deleteDatasources: + - name: json-api + orgId: 1 + +# List of data sources to insert/update depending on what's +# available in the database. +datasources: + # Sets the name you use to refer to + # the data source in panels and queries. + - name: json-api + # Sets the data source type. + type: marcusolsson-json-datasource + url: https://changeme.example.com + editable: true \ No newline at end of file diff --git a/docker/scripts/start.sh b/docker/scripts/start.sh index f33bbdfd8..c006ad238 100755 --- a/docker/scripts/start.sh +++ b/docker/scripts/start.sh @@ -1,8 +1,19 @@ #!/bin/bash +# +# All browsers do not exist in all architectures. +if [[ `which google-chrome` ]]; then + google-chrome --version +elif [[ `which chromium-browser` ]]; then + chromium-browser --version +fi -google-chrome --version -firefox --version -microsoft-edge --version +if [[ `which firefox` ]]; then + firefox --version +fi + +if [[ `which microsoft-edge` ]]; then + microsoft-edge --version +fi BROWSERTIME=/usr/src/app/bin/browsertimeWebPageReplay.js SITESPEEDIO=/usr/src/app/bin/sitespeed.js diff --git a/docker/webpagereplay/wpr b/docker/webpagereplay/linux/amd64/wpr similarity index 54% rename from docker/webpagereplay/wpr rename to docker/webpagereplay/linux/amd64/wpr index ff09154bf..0ede8fdfc 100755 Binary files a/docker/webpagereplay/wpr and b/docker/webpagereplay/linux/amd64/wpr differ diff --git a/docker/webpagereplay/linux/arm64/wpr b/docker/webpagereplay/linux/arm64/wpr new file mode 100755 index 000000000..cbb701d7e Binary files /dev/null and b/docker/webpagereplay/linux/arm64/wpr differ diff --git a/docs/_config.yml b/docs/_config.yml index f35977566..3cdde0930 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -4,7 +4,7 @@ markdown: kramdown compress_html: clippings: all endings: all -include: ["_headers"] +include: ["_headers", "_redirects"] highlighter: none kramdown: syntax_highlighter_opts: diff --git a/docs/_headers b/docs/_headers index f4ade9168..077e612e9 100644 --- a/docs/_headers +++ b/docs/_headers @@ -22,4 +22,6 @@ /js/* Cache-Control: public, max-age=3600000 /css/* - Cache-Control: public, max-age=3600000 + Cache-Control: public, max-age=3600000 +/feed/* + Access-Control-Allow-Origin: * \ No newline at end of file diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index af797366f..e324e0f75 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -27,15 +27,15 @@

Connect

sitespeed.io

');return i.appendChild(o),r.appendChild(i),n.appendChild(r),n}},{"../../helpers/dom":1,"../../helpers/svg":6}],24:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e("../../helpers/dom"),r=e("../../helpers/svg");n.createAlignmentLines=function(e){return{endline:r.newLine({x1:"0",x2:"0",y1:"0",y2:e},"line-end"),startline:r.newLine({x1:"0",x2:"0",y1:"0",y2:e},"line-start")}},n.makeHoverEvtListeners=function(i){return{onMouseEnterPartial:function(){return function(e){var t=e.target;o.addClass(t,"active");var n=t.x.baseVal.valueInSpecifiedUnits+t.width.baseVal.valueInSpecifiedUnits+"%",r=t.x.baseVal.valueInSpecifiedUnits+"%";i.endline.x1.baseVal.valueAsString=n,i.endline.x2.baseVal.valueAsString=n,i.startline.x1.baseVal.valueAsString=r,i.startline.x2.baseVal.valueAsString=r,o.addClass(i.endline,"active"),o.addClass(i.startline,"active")}},onMouseLeavePartial:function(){return function(e){var t=e.target;o.removeClass(t,"active"),o.removeClass(i.endline,"active"),o.removeClass(i.startline,"active")}}}}},{"../../helpers/dom":1,"../../helpers/svg":6}],25:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var h=e("../../helpers/misc"),f=e("../../helpers/svg"),l=function(e,t,n,r,i){void 0===i&&(i=!1);var o,a,s=e.diagramHeight,l=100/n,u="sub-second-line";if(i){var d=n-.2"+e.url+"
"+Math.round(e.start)+"ms - "+Math.round(e.end)+"ms
total: "+(isNaN(e.total)?"n/a ":Math.round(e.total))+"ms",showOverlay:s.showAlignmentHelpers?d.onMouseEnterPartial:void 0,unit:f.unit,width:n,x:i,y:r},a=O.createRow(f,t,x,q,o,e,function(){f.overlayManager.toggleOverlay(t,r+s.rowHeight,450,e,S)});S.push(a),h.appendChild(a),h.appendChild(L.newG("row-overlay-holder"))}),s.showAlignmentHelpers&&void 0!==u&&g.appendChild(u),m.appendChild(g),m.appendChild(h),m.appendChild(p),m.appendChild(P.makeTooltip(s)),m}},{"../helpers/svg":6,"../transformers/styling-converters":15,"./details-overlay/overlay-manager":17,"./details-overlay/pub-sub":18,"./row/svg-row":22,"./row/svg-tooltip":23,"./sub-components/svg-alignment-helper":24,"./sub-components/svg-general-components":25,"./sub-components/svg-marks":26}]},{},[8])(8)}); \ No newline at end of file +!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).perfCascade=e()}(function(){return function r(i,o,a){function s(t,e){if(!o[t]){if(!i[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(l)return l(t,!0);throw(n=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",n}n=o[t]={exports:{}},i[t][0].call(n.exports,function(e){return s(i[t][1][e]||e)},n,n.exports,r,i,o,a)}return o[t].exports}for(var l="function"==typeof require&&require,e=0;e."))}function i(e,t,n){t in e||console.warn(new Error("Trying to set non-existing attribute "+t+" = "+n+" on a <"+e.tagName.toLowerCase()+">.")),e.setAttributeNS("",t,n)}function o(t,n){Object.keys(n).forEach(function(e){r(t,e,n[e].toString())})}Object.defineProperty(n,"__esModule",{value:!0}),n.makeBodyEl=n.makeHtmlEl=n.safeSetAttributes=n.safeSetStyles=n.safeSetAttribute=n.safeSetStyle=n.forEachNodeList=n.getLastItemOfNodeList=n.removeChildren=n.getParentByClassName=n.removeClass=n.addClass=void 0,n.addClass=function(e,t){var n=e.classList;return n?t.split(" ").forEach(function(e){return n.add(e)}):e.setAttribute("class",e.getAttribute("class")+" "+t),e},n.removeClass=function(e,t){var n=e.classList;return n?n.remove(t):e.setAttribute("class",(e.getAttribute("class")||"").replace(new RegExp("(\\s|^)"+t+"(\\s|$)","g"),"$2")),e},n.getParentByClassName=function(e,t){if("function"==typeof e.closest)return e.closest("."+t);for(;e;){if(e.classList.contains(t))return e;e=e.parentElement}return null},n.removeChildren=function(e){for(;e.hasChildNodes();)e.removeChild(e.lastChild);return e},n.getLastItemOfNodeList=function(e){if(e&&0!==e.length)return e.item(e.length-1)},n.forEachNodeList=function(e,t){Array.prototype.forEach.call(e,t)},n.safeSetStyle=r,n.safeSetAttribute=i,n.safeSetStyles=o,n.safeSetAttributes=function(t,n){Object.keys(n).forEach(function(e){i(t,e,n[e].toString())})},n.makeHtmlEl=function(){var e=document.createElement("html");return e.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns","http://www.w3.org/2000/xmlns/"),e},n.makeBodyEl=function(e,t){void 0===e&&(e={}),void 0===t&&(t="");var n=document.createElement("body");return n.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),o(n,e),n.innerHTML=t,n}},{}],2:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getHeaders=n.getHeader=n.hasHeader=void 0;function r(t){return function(e){return e.name.toLowerCase()===t}}n.hasHeader=function(e,t){return t=r(t.toLowerCase()),e.some(t)};var i=!!Array.prototype.find;n.getHeader=function(e,t){return t=r(t.toLowerCase()),(t=i?e.find(t):e.map(t).pop())?t.value:void 0},n.getHeaders=function(e,t){var n=r(t.toLowerCase());return e.filter(n).map(function(e){return[t,e.value]})}},{}],3:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.audio=n.video=n.flash=n.font=n.error=n.warning=n.css=n.html=n.svg=n.image=n.javascript=n.other=n.plain=n.err5xx=n.err4xx=n.err3xx=n.noTls=void 0;var i,o,a,s,l,u,d,c,p,h,f,v,m,g,y=e("./svg"),b=function(e,t,n,r,i,o){t=y.newSvg("",{x:e,y:t}),i=y.newG("icon "+r,{transform:"scale("+i+")"});return i.appendChild(o),i.appendChild(y.newTitle(n)),t.appendChild(i),t};function w(e,t,n,r){return void 0===r&&(r=1),void 0===u&&(u=y.newPath("M6 6q0 .75-.525 1.275Q4.95 7.8 4.2 7.8q-.75 0-1.275-.525Q2.4 6.75 2.4\n 6q0-.75.525-1.275Q3.45 4.2 4.2 4.2q.75 0 1.275.525Q6 5.25 6 6zm9.6 3.6v4.2H2.4V12l3-3\n 1.5 1.5 4.8-4.8zm.9-6.6h-15q-.122 0-.21.09-.09.088-.09.21v11.4q0\n .122.09.21.088.09.21.09h15q.122 0 .21-.09.09-.088.09-.21V3.3q0-.122-.09-.21Q16.623\n 3 16.5 3zm1.5.3v11.4q0 .62-.44 1.06-.44.44-1.06.44h-15q-.62 0-1.06-.44Q0 15.32 0\n 14.7V3.3q0-.62.44-1.06.44-.44 1.06-.44h15q.62 0 1.06.44.44.44.44 1.06z")),b(e,t,n,"icon-image",r,u.cloneNode(!1))}function C(e,t,n,r){return void 0===r&&(r=1),void 0===p&&(p=y.newPath("M6 6q0 .75-.525 1.275Q4.95 7.8 4.2 7.8q-.75 0-1.275-.525Q2.4 6.75 2.4\n 6q0-.75.525-1.275Q3.45 4.2 4.2 4.2q.75 0 1.275.525Q6 5.25 6 6zm9.6 3.6v4.2H2.4V12l3-3\n 1.5 1.5 4.8-4.8zm.9-6.6h-15q-.122 0-.21.09-.09.088-.09.21v11.4q0\n .122.09.21.088.09.21.09h15q.122 0 .21-.09.09-.088.09-.21V3.3q0-.122-.09-.21Q16.623\n 3 16.5 3zm1.5.3v11.4q0 .62-.44 1.06-.44.44-1.06.44h-15q-.62 0-1.06-.44Q0 15.32 0\n 14.7V3.3q0-.62.44-1.06.44-.44 1.06-.44h15q.62 0 1.06.44.44.44.44 1.06z")),b(e,t,n,"icon-warning",r,p.cloneNode(!1))}n.noTls=function(e,t,n,r){return void 0===r&&(r=1),void 0===i&&(i=y.newPath("M18 6.216v2.77q0 .28-.206.486-.205.206-.486.206h-.693q-.28 0-.486-.206-.21-.205-.21\n -.487v-2.77q0-1.145-.81-1.957-.813-.81-1.96-.81-1.146 0-1.957.81-.81.812-.81 1.958v2.077h1.037q.434\n 0 .737.303.302.303.302.736v6.23q0 .433-.305.736t-.737.303H1.038q-.433 0-.736-.3Q0 15.996 0\n 15.56V9.33q0-.433.303-.736t.735-.303h7.27V6.218q0-2 1.422-3.423 1.423-1.423 3.424-1.423 2\n 0 3.424 1.424Q18 4.214 18 6.216")),b(e,t,n,"icon-no-tls",r,i.cloneNode(!1))},n.err3xx=function(e,t,n,r){return void 0===r&&(r=1),void 0===o&&(o=y.newPath("M17 2.333V7q0 .27-.198.47-.198.197-.47.197h-4.665q-.438 0-.615-.417-.177-.406.146-.72l1.437-1.436Q11.095\n 3.667 9 3.667q-1.083 0-2.068.422-.984.42-1.703 1.14-.72.715-1.14 1.7-.426.984-.426 2.07 0 1.08.422 2.065.42.984\n 1.14 1.703.718.72 1.702 1.14.984.422 2.067.422 1.24 0 2.344-.54 1.104-.543 1.864-1.533.073-.105.24-.126.146 0\n .26.095l1.427 1.436q.095.084.1.214.006.13-.08.234-1.133 1.376-2.75 2.13Q10.793 17 9 17q-1.625\n 0-3.104-.635-1.48-.636-2.552-1.71-1.073-1.072-1.71-2.55Q1 10.625 1 9t.635-3.104q.636-1.48 1.71-2.552\n 1.072-1.073 2.55-1.71Q7.375 1 9 1q1.53 0 2.964.578 1.432.578 2.546\n 1.63l1.355-1.343q.302-.323.73-.146.405.173.405.61z")),b(e,t,n,"icon-redirect",r,o.cloneNode(!1))},n.err4xx=function(e,t,n,r){return C(e,t,n,r=void 0===r?1:r)},n.err5xx=function(e,t,n,r){return C(e,t,n,r=void 0===r?1:r)},n.plain=function(e,t,n,r){return void 0===r&&(r=1),void 0===a&&(a=y.newPath("M15.247 4.393q.25.25.43.678.177.43.177.79v10.287q0\n .357-.25.607t-.607.25h-12q-.357 0-.607-.25t-.25-.606V1.858q0-.358.25-.608T2.997 1h8q.357 0\n .786.18.428.177.678.427zm-3.964-2.18V5.57h3.357q-.09-.256-.196-.364L11.65 2.41q-.108-.106-.367\n -.196zm3.428 13.644V6.714H11q-.357 0-.607-.25t-.25-.607V2.143h-6.86v13.714H14.71zM5.57\n 8.143q0-.125.08-.205.08-.08.204-.08h6.286q.125 0 .205.08.08.08.08.205v.57q0 .126-.08.207-.08.08\n -.205.08H5.854q-.125 0-.205-.08-.08-.08-.08-.206v-.57zm6.57 2q.125 0 .205.08.08.08.08.206V11q0\n .125-.08.205-.08.08-.205.08H5.854q-.125 0-.205-.08-.08-.08-.08-.205v-.57q0-.126.08-.207.08-.08.2\n -.08h6.286zm0 2.286q.125 0 .205.08.08.08.08.2v.572q0 .125-.08.205-.08.08-.205.08H5.854q-.125 0-.205\n -.08-.08-.08-.08-.205v-.572q0-.124.08-.204.08-.08.2-.08h6.286z")),b(e,t,n,"icon-plain",r,a.cloneNode(!1))},n.other=function(e,t,n,r){return void 0===r&&(r=1),void 0===s&&(s=y.newPath("M10.8 13.5v3q0 .2-.15.35-.15.15-.35.15h-3q-.2 0-.35-.15-.15-.15-.15-.35v-3q0-.2.15-.35.15\n -.15.35-.15h3q.2 0 .35.15.15.15.15.35zM14.75 6q0 .675-.193 1.262-.193.588-.437.957-.244.365\n -.688.74-.443.375-.718.543-.275.17-.763.444-.51.286-.852.81-.344.526-.344.84 0 .21-.15.405-.15.194\n -.35.194h-3q-.186 0-.318-.23-.13-.234-.13-.47v-.564q0-1.037.812-1.956.812-.917 1.787-1.355.74-.336\n 1.05-.7.314-.362.314-.95 0-.524-.583-.924-.58-.4-1.343-.4-.814 0-1.35.362-.44.312-1.34 1.437-.16.2\n -.386.2-.15 0-.313-.1L3.4 4.987q-.16-.124-.193-.312-.03-.188.07-.35Q5.277 1 9.077 1q1 0 2.01.387\n 1.01.388 1.825 1.038.812.65 1.325 1.594.51.94.51 1.98z")),b(e,t,n,"icon-other",r,s.cloneNode(!1))},n.javascript=function(e,t,n,r){return void 0===r&&(r=1),void 0===l&&(l=y.newPath("M13.516 2.9c-2.766 0-4.463 1.522-4.463 3.536 0 1.733 1.295 2.82 3.256 3.52\n 1.413.49 1.973.926 1.973 1.644 0 .787-.647 1.296-1.873 1.296-1.137 0-2.26-.368-2.96-.736l-.54\n 2.19c.665.367 1.996.734 3.344.734 3.238 0 4.744-1.68 4.744-3.658\n 0-1.68-.966-2.767-3.05-3.537-1.54-.6-2.186-.93-2.186-1.68 0-.6.56-1.14 1.714-1.14\n 1.137 0 1.996.33 2.45.56l.596-2.138c-.7-.332-1.663-.596-3.01-.596zm-9.032.192v7.44c0\n 1.822-.702 2.33-1.822 2.33-.525 0-.997-.09-1.365-.212L1 14.805c.525.175 1.33.28 1.96.28\n 2.574 0 4.185-1.173 4.185-4.534V3.097h-2.66z")),b(e,t,n,"icon-js",r,l.cloneNode(!1))},n.image=w,n.svg=function(e,t,n,r){return w(e,t,n,r=void 0===r?1:r)},n.html=function(e,t,n,r){return void 0===r&&(r=1),void 0===d&&(d=y.newPath("M5.626 13.31l-.492.492q-.098.098-.226.098t-.226-.098L.098 9.22Q0 9.12 0\n 8.99q0-.127.098-.226L4.682 4.18q.098-.097.226-.097t.226.098l.492.49q.1.1.1.23t-.1.23L1.76\n 8.99l3.866 3.866q.1.098.1.226t-.1.226zM11.44 2.815l-3.67\n 12.7q-.04.127-.152.19-.113.065-.23.026l-.61-.162q-.13-.04-.193-.152-.064-.112-.024-.24l3.67-12.698q.04\n -.128.157-.192.113-.064.23-.025l.61.167q.13.04.193.152.063.113.023.24zM17.9\n 9.22l-4.582 4.58q-.098.098-.226.098t-.226-.098l-.492-.492q-.1-.098-.1-.226t.1-.226L16.24\n 8.99l-3.867-3.865q-.1-.098-.1-.226t.1-.23l.492-.49q.098-.1.226-.1t.23.1l4.58 4.583q.1.1.1.226 0 .13-.1.23z")),b(e,t,n,"icon-html",r,d.cloneNode(!1))},n.css=function(e,t,n,r){return void 0===r&&(r=1),void 0===c&&(c=y.newPath("M15.436.99q.625 0 1.095.416.47.415.47 1.04 0 .564-.4 1.35-2.97 5.624-4.16 6.724-.865.814\n -1.946.814-1.127 0-1.935-.827-.81-.827-.81-1.962 0-1.144.822-1.895l5.705-5.175Q14.8.99\n 15.435.99zM7.31 10.232q.35.68.953 1.162.603.483 1.345.68l.01.634q.035 1.904-1.16 3.102-1.192\n 1.198-3.114 1.198-1.1 0-1.948-.416-.85-.415-1.364-1.14-.514-.723-.773-1.635Q1 12.905 1\n 11.85l.366.268q.304.224.555.398.25.175.53.327.277.15.41.15.368 0 .493-.33.224-.59.515-1.005.29\n -.415.62-.68.332-.263.788-.424.455-.16.92-.228.465-.066 1.118-.094z")),b(e,t,n,"icon-css",r,c.cloneNode(!1))},n.warning=C,n.error=function(e,t,n,r){return void 0===r&&(r=1),void 0===h&&(h=y.newPath("M9 1q2.177 0 4.016 1.073 1.838 1.073 2.91 2.91Q17 6.823 17 9q0 2.177-1.073 4.016-1.073\n 1.838-2.91 2.91Q11.177 17 9 17q-2.177 0-4.016-1.073-1.838-1.073-2.91-2.91Q1 11.177 1 9q0-2.177 1.073-4.016\n 1.073-1.838 2.91-2.91Q6.823 1 9 1zm1.333 12.99v-1.98q0-.145-.093-.244-.094-.1-.23-.1h-2q-.135 0-.24.105\n -.103.106-.103.24v1.98q0 .136.104.24.106.104.24.104h2q.137 0 .23-.1.094-.098.094-.243zm-.02-3.584l.187\n -6.468q0-.125-.104-.188-.104-.084-.25-.084H7.854q-.146 0-.25.084-.104.062-.104.188l.177 6.468q0\n .104.104.183.106.076.25.076h1.93q.146 0 .245-.078.1-.08.11-.184z")),b(e,t,n,"icon-no-gzip",r,h.cloneNode(!1))},n.font=function(e,t,n,r){return void 0===r&&(r=1),void 0===f&&(f=y.newPath("M7.97 5.754L6.338 10.08q.317 0 1.312.02.994.02 1.542.02.183 0 .548-.02-.836-2.432-1.77\n -4.345zM1 16.38l.02-.76q.22-.068.538-.12.317-.053.548-.102.23-.048.476-.14.245-.09.428-.278.182\n -.187.298-.485l2.28-5.923 2.69-6.962H9.51q.077.135.105.202l1.972 4.615q.317.75 1.02 2.476.7 1.726\n 1.095 2.64.144.327.558 1.39.413 1.062.692 1.62.192.432.336.547.183.145.847.284.663.14.807.197.058.37.058.55\n 0 .04-.005.13t-.005.128q-.605 0-1.827-.076-1.22-.08-1.836-.08-.73 0-2.067.07-1.337.067-1.712.076 0-.412.04\n -.75l1.258-.27q.01 0 .12-.022l.15-.033q.038-.01.14-.044.1-.034.143-.06l.1-.08q.06-.048.082-.106.024-.056.024\n -.133 0-.152-.298-.926t-.693-1.71q-.392-.93-.402-.96l-4.325-.02q-.25.56-.734 1.88-.487 1.32-.487 1.56 0\n .213.136.362.134.15.418.235.285.087.467.13.185.044.55.08.366.04.395.04.01.183.01.558 0 .087-.02.26-.558\n 0-1.678-.095-1.12-.098-1.678-.098-.08 0-.26.04-.18.037-.208.037-.77.136-1.808.136Z")),b(e,t,n,"icon-font",r,f.cloneNode(!1))},n.flash=function(e,t,n,r){return void 0===r&&(r=1),void 0===v&&(v=y.newPath("M13.724 4.738q.195.216.076.476L7.96 17.73q-.142.27-.456.27-.043 0-.15-.022-.185-.054-.277\n -.205-.092-.15-.05-.325l2.132-8.74L4.765 9.8q-.044.01-.13.01-.195 0-.336-.118-.193-.162-.14-.422L6.337.346q.043\n -.15.173-.25Q6.64 0 6.81 0h3.548q.206 0 .346.135.14.135.14.32 0 .086-.053.194L8.94 5.654l4.285\n -1.06q.086-.02.13-.02.205 0 .367.16z")),b(e,t,n,"icon-flash",r,v.cloneNode(!1))},n.video=function(e,t,n,r){return void 0===r&&(r=1),void 0===m&&(m=y.newPath("M17 4.107v9.714q0 .38-.348.53-.116.05-.223.05-.25 0-.41-.17l-3.6-3.6v1.48q0 1.067-.757 1.82-.754.756\n -1.817.756H3.57q-1.06 0-1.816-.753Q1 13.17 1 12.106V5.82q0-1.06.754-1.816.755-.754 1.817-.754h6.29q1.07 0\n 1.82.754.76.755.76 1.817V7.3l3.597-3.59q.16-.17.4-.17.107 0 .22.045.35.153.35.528z")),b(e,t,n,"icon-video",r,m.cloneNode(!1))},n.audio=function(e,t,n,r){return void 0===r&&(r=1),void 0===g&&(g=y.newPath("M8.385 3.756v10.46q0 .252-.183.434-.183.183-.433.183t-.44-.183l-3.2-3.202H1.61q-.25\n 0-.43-.183-.18-.182-.18-.432V7.14q0-.25.182-.432.182-.183.432-.183h2.52l3.202-3.202q.182-.183.432\n -.183t.43.183q.182.183.182.433zm3.692 5.23q0 .73-.41 1.36-.407.63-1.08.9-.097.048-.24.048-.25 0\n -.434-.178-.182-.177-.182-.437 0-.21.12-.35.12-.14.28-.24.16-.1.33-.22.166-.12.28-.34.117-.22.117\n -.55 0-.33-.115-.55-.115-.224-.28-.344-.163-.12-.326-.22-.165-.1-.28-.24-.116-.14-.116-.34 0-.26.183\n -.44t.43-.176q.146 0 .24.048.676.26 1.08.894.41.636.41 1.367zm2.46 0q0 1.472-.816 2.717t-2.16 1.813q\n -.12.048-.24.048-.26 0-.44-.183-.18-.18-.18-.43 0-.37.378-.56.54-.28.73-.42.713-.52 1.11-1.302.4\n -.783.4-1.667 0-.886-.4-1.67-.4-.783-1.11-1.303-.192-.145-.73-.424-.376-.192-.376-.567 0-.25.183\n -.434.183-.18.433-.18.123 0 .25.047 1.344.567 2.16 1.812.82 1.244.82 2.716zm2.463 0q0 2.212\n -1.22 4.063-1.222 1.85-3.25 2.72-.126.05-.25.05-.25 0-.434-.19-.183-.183-.183-.433 0-.346.375\n -.568.068-.04.217-.1.15-.064.216-.1.45-.244.79-.494 1.19-.875 1.85-2.183.67-1.306.67-2.777 0\n -1.47-.663-2.78-.664-1.304-1.846-2.18-.346-.25-.79-.49-.065-.035-.214-.1-.15-.06-.22-.1\n -.375-.22-.375-.57 0-.25.183-.43.183-.182.433-.182.123 0 .25.047 2.027.876 3.25 2.727Q17 6.775 17 8.99Z")),b(e,t,n,"icon-audio",r,g.cloneNode(!1))}},{"./svg":6}],4:[function(e,t,n){"use strict";function r(e,t){var n=0;if(e&&!(e.length<1))for(var r=e.length;nn?e.authority.substr(0,n)+"..."+t[t.length-1].substr(-r):e.authority+"..."+t[t.length-1].substr(-r)},n.roundNumber=function(e,t){return void 0===t&&(t=2),Math.round(e*Math.pow(10,t))/Math.pow(10,t)},n.isInStatusCodeRange=function(e,t,n){return t<=e&&e<=n};var i=/[^a-z-]/g;n.toCssClass=function(e){return e.toLowerCase().replace(i,"")},n.pluralize=function(e,t){return e+(1(local time: "+e.toLocaleString()+")":void 0};n.formatBytes=function(e){if(void 0===e)return"";var t=e+" bytes";return 1048576<=e?t+" (~"+r.roundNumber(e/1048576,1)+" MB)":1024<=e?t+" (~"+r.roundNumber(e/1024,0)+" kB)":t};var a={'"':""","&":"&","'":"'","<":"<",">":">"},s=new RegExp(Object.keys(a).join("|"),"g");n.escapeHtml=function(e){if(null==(e=void 0===e?"":e))return"";if("string"!=typeof e){if("function"!=typeof e.toString)throw TypeError("Invalid parameter");e=e.toString()}return e.replace(s,function(e){return a[e]})};var l=new RegExp("[^-A-Za-z0-9+&@#/%?=~_|!:,.;()]","g");n.sanitizeUrlForLink=function(e){var t=e.replace(l,"_");return 0===t.indexOf("http://")||0===t.indexOf("https://")?t:(console.warn("skipped link, due to potentially unsafe url",e),"")};var u=new RegExp("[^a-zA-Z0-9]","g");function d(e){return"number"==typeof e?e:"string"==typeof e?parseInt(e,10):void 0}n.sanitizeAlphaNumeric=function(e){return e.toString().replace(u,"")},n.toInt=d,n.validateOptions=function(n){function e(e){var t=d(n[e]);if(void 0===t)throw TypeError('option "'+e+'" needs to be a number');n[e]=t}function t(e){n[e]=!!n[e]}return e("leftColumnWidth"),e("rowHeight"),e("selectedPage"),t("showAlignmentHelpers"),t("showIndicatorIcons"),t("showMimeTypeIcon"),n}},{"./misc":4}],6:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getNodeTextWidth=n.newPath=n.newTextEl=n.newTitle=n.newLine=n.newRect=n.newA=n.newForeignObject=n.newClipPath=n.newG=n.newSvg=void 0;var o=e("./dom"),a="http://www.w3.org/2000/svg";function r(e,t){var n=void 0===t?{}:t,r=n.attributes,i=void 0===r?{}:r,t=n.css,r=void 0===t?{}:t,t=n.text,t=void 0===t?"":t,n=n.className,n=void 0===n?"":n,e=document.createElementNS(a,e);return n&&o.addClass(e,n),t&&(e.textContent=t),o.safeSetStyles(e,r),o.safeSetAttributes(e,i),e}function i(e,t,n){return r("svg",{className:e,attributes:t,css:n=void 0===n?{}:n})}n.newSvg=i,n.newG=function(e,t,n){return r("g",{className:e,attributes:t=void 0===t?{}:t,css:n=void 0===n?{}:n})},n.newClipPath=function(e){return r("clipPath",{attributes:{id:e}})},n.newForeignObject=function(e,t,n){return r("foreignObject",{attributes:e,className:t=void 0===t?"":t,css:n=void 0===n?{}:n})},n.newA=function(e){return r("a",{className:e})},n.newRect=function(e,t,n){return r("rect",{attributes:e,className:t=void 0===t?"":t,css:n=void 0===n?{}:n})},n.newLine=function(e,t){return r("line",{className:t=void 0===t?"":t,attributes:e})},n.newTitle=function(e){var t=document.createElementNS(a,"title");return t.setAttribute("text",e),t},n.newTextEl=function(e,t,n){return r("text",{text:e,attributes:t=void 0===t?{}:t,css:n=void 0===n?{}:n})},n.newPath=function(e){var t=document.createElementNS(a,"path");return t.setAttribute("d",e),t};var s,l,u=function(){return void 0===s&&(s=i("water-fall-chart temp",{className:"water-fall-chart temp",width:"9999px"},{left:"0px",position:"absolute",top:"0px",visibility:"hidden","z-index":"99999"})),void 0===s.parentElement&&window.document.body.appendChild(s),clearTimeout(l),l=setTimeout(function(){s.parentNode.removeChild(s)},500),s};n.getNodeTextWidth=function(e,t){if(void 0===t&&(t=!1),0===(e.textContent||"").length)return 0;var n,r=u();t?(n=e.style.textShadow,i=e):((i=e.cloneNode(!0)).setAttribute("x","0"),i.setAttribute("y","0")),i.style.textShadow="0",r.appendChild(i),window.document.body.appendChild(r);var i=i.getComputedTextLength();return t&&void 0!==n&&(e.style.textShadow=n),i}},{"./dom":1}],7:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.makeLegend=void 0,n.makeLegend=function(){var e=document.createElement("ul");return e.className="resource-legend",e.innerHTML='\n
  • Blocked
  • \n
  • DNS
  • \n
  • Connect
  • \n
  • SSL (TLS)
  • \n
  • Send
  • \n
  • Wait
  • \n
  • Receive
  • ',e}},{}],8:[function(e,t,n){"use strict";var o=this&&this.__assign||function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n=this.getPageCount())throw new Error("Page does not exist - Invalid pageIndex selected");this.selectedPageIndex=e;var n=this.doc.pages[this.selectedPageIndex];this.onPageUpdateCbs.forEach(function(e){e(t.selectedPageIndex,n)})}},r.prototype.onPageUpdate=function(e){if(1=this.doc.pages.length&&(this.selectedPageIndex=this.doc.pages.length-1)}n.default=e},{"../helpers/dom":1}],10:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getKeys=void 0;var u=e("../helpers/har"),d=e("../helpers/parse"),c=e("./helpers"),p=function(e,t){return[e,d.parseAndFormat(t,d.parsePositive,d.formatBytes)]},r=function(e,t){return[e,d.parseAndFormat(t,d.parsePositive)]},h=function(e){return 1",i="",e=t.filter(function(e){return"error"===e.type}).map(function(e){return[e.title,e.description]}),n=t.filter(function(e){return"warning"===e.type}).map(function(e){return[e.title,e.description]}),t=t.filter(function(e){return"error"!==e.type&&"warning"!==e.type}).map(function(e){return[e.title,e.description]});0'+d.pluralize("Error",e.length)+"\n
    "+h.makeDefinitionList(e)+"
    ");0'+d.pluralize("Warning",n.length)+"\n
    "+h.makeDefinitionList(n)+"
    ");0Info\n
    '+h.makeDefinitionList(t)+"
    ");return g("General",i+r)}(r.general,o)),u.push((i=r.request,o=r.requestHeaders,g("Request","
    \n "+h.makeDefinitionList(i)+"\n
    \n

    All Request Headers

    \n
    \n "+h.makeDefinitionList(o)+"\n
    "))),u.push((i=r.response,o=r.responseHeaders,g("Response","
    \n "+h.makeDefinitionList(i)+"\n
    \n

    All Response Headers

    \n
    \n "+h.makeDefinitionList(o)+"\n
    "))),u.push(g("Timings",h.makeDefinitionList(r.timings,!0))),u.push((a=e,y("Raw Data",function(){return'\n \n
    '+c.escapeHtml(JSON.stringify(a,null,2))+"
    \n "},"raw-data rendered-data"))),"image"===n&&u.push((s=e,y("Preview",function(e){return''}))),e.response.content&&e.response.content.mimeType&&0===e.response.content.mimeType.indexOf("text/")&&e.response.content.text&&u.push((e=(e=e).response.content.text||"",l=e.replace(f,"\n").replace(m,"\t"),y("Content ("+(e=(e=e.match(v))?e.length:1)+" Line"+(1Copy Content to Clipboard\n
    '+c.escapeHtml(l)+"
    \n "},"content rendered-data"))),u.filter(function(e){return void 0!==e})}},{"../helpers/misc":4,"../helpers/parse":5,"./extract-details-keys":10,"./helpers":14}],13:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.transformPage=n.transformDoc=void 0;var o=e("../helpers/misc"),l=e("../helpers/parse"),u=e("./har-heuristics"),d=e("./har-tabs"),c=e("./helpers");n.transformDoc=function(e,n){var r=void 0!==e.log?e.log:e;return{pages:p(r).map(function(e,t){return i(r,t,n)})}};var p=function(e){return e.pages&&0a&&(a=e.startTime)}),n.fixedLengthMs&&(a=n.fixedLengthMs),{docIsTLS:s,durationMs:a+=100,entries:e,marks:t,title:i.title}}n.transformPage=i;var h=function(t,e,n){if(void 0===t)return[];function r(e,t){return e.startTime-t.startTime}var i=Object.keys(t).filter(function(e){return"number"==typeof t[e]&&0<=t[e]}).map(function(e){return{name:l.escapeHtml(e.replace(/^[_]/,""))+" ("+o.roundNumber(t[e],0)+" ms)",startTime:t[e]}});return(n.showUserTiming?a(e,n).concat(i):i).sort(r)},a=function(i,o){var t,n=o.showUserTimingEndMarker?function(e){return 0===e.indexOf("_userTime.")}:function(e){return 0===e.indexOf("_userTime.")&&0!==e.indexOf("_userTime.endTimer-")},e=n;Array.isArray(o.showUserTiming)&&(t=o.showUserTiming,e=function(e){return n(e)&&0<=t.indexOf(e.replace(/^_userTime\./,""))});var a=/^_userTime\.((?:startTimer-)?(.+))$/;return Object.keys(i).filter(e).map(function(e){var t=a.exec(e)||[,void 0,void 0],n=t[1],r=t[2];return(n=l.escapeHtml(n))!==(r=l.escapeHtml(r))&&i["_userTime.endTimer-"+r]?{duration:t=i["_userTime.endTimer-"+r]-i[e],name:(o.showUserTimingEndMarker?n:r)+" ("+i[e]+" - "+(i[e]+t)+" ms)",startTime:i[e]}:{name:n,startTime:i[e]}})},f=function(a,s){var l=s.timings,u=s._chunks||[];return["blocked","dns","connect","send","wait","receive"].reduce(function(e,t){var n=v(t,s,e,a);if(n.end&&n.start>=n.end)return e;if("connect"===t&&l.ssl&&-1!==l.ssl){var r=parseInt(""+s._ssl_start,10)||n.start,i=parseInt(""+s._ssl_end,10)||n.start+l.ssl,o=parseInt(""+s._ssl_start,10)?n.start:i;return e.concat([c.createWaterfallEntryTiming("ssl",Math.round(r),Math.round(i))]).concat([c.createWaterfallEntryTiming(t,Math.round(o),Math.round(n.end))])}return"receive"===t&&u&&0")}var i=e("../helpers/misc"),o=e("../helpers/parse"),a=e("../waterfall/row/svg-indicators");n.makeDefinitionList=function(e,n){return void 0===n&&(n=!1),e.map(function(e){return"\n
    "+r(e[0])+"
    \n
    "+r(e[1])+"
    \n ";var t}).join("")},n.mimeToRequestType=function(e){if(void 0===e)return"other";var t=(e=e.split("/"))[1];switch(void 0!==t&&(t=-1"}).join("\n"),a=t.tabs.map(function(e){var t="tab";e.tabClass&&(t+=" "+e.tabClass);var n="";if(e.content)n=e.content;else{if("function"!=typeof e.renderContent)throw TypeError("Invalid Details Tab");n=e.renderContent(r),e.content=n}return'
    '+n+"
    "}).join("\n");return i.innerHTML='\n
    \n
    \n

    #'+e+' \n '+l.escapeHtml(t.url)+'\n

    \n \n
    \n "+a+"\n
    \n ",n.appendChild(i),n}},{"../../helpers/dom":1,"../../helpers/parse":5}],17:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.OverlayManager=void 0;var h=e("../../helpers/dom"),f=e("../../helpers/misc"),v=e("./svg-details-overlay"),e=(m.prototype.getCombinedOverlayHeight=function(){return this.openOverlays.reduce(function(e,t){return e+(t.height||0)},0)},m.prototype.openOverlay=function(t,e,n,r,i){var o;this.openOverlays.some(function(e){return e.index===t})||((o=this).openOverlays.push({defaultY:e,entry:r,index:t,onClose:function(){o.closeOverlay(t,n,i)},openTabIndex:0}),this.openOverlays=this.openOverlays.sort(function(e,t){return e.index>t.index?1:-1}),this.renderOverlays(n,i),this.context.pubSub.publishToOverlayChanges({changedIndex:t,combinedOverlayHeight:o.getCombinedOverlayHeight(),type:"open"}))},m.prototype.toggleOverlay=function(t,e,n,r,i){this.openOverlays.some(function(e){return e.index===t})?this.closeOverlay(t,n,i):this.openOverlay(t,e,n,r,i)},m.prototype.closeOverlay=function(r,e,t){this.openOverlays.splice(this.openOverlays.reduce(function(e,t,n){return t.index===r?n:e},-1),1),this.renderOverlays(e,t),this.context.pubSub.publishToOverlayChanges({changedIndex:r,combinedOverlayHeight:this.getCombinedOverlayHeight(),type:"closed"})},m.prototype.renderOverlays=function(u,e){function d(e,t,n){p+=n,e.actualY=t,e.height=n}var c=this,p=0;e.forEach(function(e,t){var n=f.find(c.openOverlays,function(e){return e.index===t}),r=e.nextElementSibling,i=r.firstElementChild;if(c.realignRow(e,p),void 0!==n){if(i&&void 0!==n.actualY){var o=i.querySelector(".info-overlay-bg"),a=i.querySelector("foreignObject"),s=i.querySelector(".info-overlay-close-btn rect"),l=i.querySelector(".info-overlay-close-btn text");return d(n,n.defaultY+p,n.height),o.setAttribute("y",n.actualY.toString()),a.setAttribute("y",n.actualY.toString()),l.setAttribute("y",n.actualY.toString()),void s.setAttribute("y",n.actualY.toString())}a=e.nextElementSibling,s=(l=n).defaultY+p,e=v.createRowInfoOverlay(l,s,u),(n=e.querySelector("img.preview"))&&!n.src&&n.setAttribute("src",(n.attributes.getNamedItem("data-src")||{value:""}).value),e.querySelector("a").addEventListener("keydown",m.firstElKeypress),h.getLastItemOfNodeList(e.querySelectorAll("button")).addEventListener("keydown",m.lastElKeypress),a.appendChild(e),d(l,s,e.getBoundingClientRect().height)}else i&&null!==r&&(r.querySelector("a").removeEventListener("keydown",m.firstElKeypress),h.getLastItemOfNodeList(r.querySelectorAll("button")).removeEventListener("keydown",m.lastElKeypress),h.removeChildren(r))})},m.showFullName=function(e){null!==(e=e.getElementsByClassName("row-fixed").item(0))&&void 0!==e&&e.dispatchEvent(new MouseEvent("mouseenter"))},m.firstElKeypress=function(e){!f.isTabUp(e)||(e=h.getParentByClassName(e.target,"row-overlay-holder"))&&e.previousElementSibling&&m.showFullName(e.previousElementSibling)},m.lastElKeypress=function(e){!f.isTabDown(e)||(e=h.getParentByClassName(e.target,"row-overlay-holder"))&&e.nextElementSibling&&m.showFullName(e.nextElementSibling)},m);function m(e){this.context=e,this.openOverlays=[],this.realignRow=function(e,t){e.setAttribute("transform","translate(0, "+t+")")}}n.OverlayManager=e,n.default=e},{"../../helpers/dom":1,"../../helpers/misc":4,"./svg-details-overlay":19}],18:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.PubSub=void 0;var r=(i.prototype.subscribeToOverlayChanges=function(e){this.subscribers.push(e)},i.prototype.subscribeToSpecificOverlayChanges=function(t,n){this.subscribers.push(function(e){e.changedIndex===t&&n(e)})},i.prototype.publishToOverlayChanges=function(t){this.subscribers.forEach(function(e){return e(t)})},i);function i(){this.subscribers=[]}n.PubSub=r,n.default=r},{}],19:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.createRowInfoOverlay=void 0;var d=e("../../helpers/dom"),c=e("../../helpers/svg"),p=e("./html-details-body");function h(e){var t=e.target;"button"===t.tagName.toLowerCase()&&t.classList.contains("copy-tab-data")&&((e=document.createElement("textarea")).value=t.nextElementSibling?t.nextElementSibling.innerText:"",document.body.appendChild(e),e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),document.body.removeChild(e))}n.createRowInfoOverlay=function(e,t,n){var r,i=e.index+1,o=(o=t,r=n,a=c.newG("info-overlay-holder"),o=c.newRect({height:r,rx:2,ry:2,width:"100%",x:"0",y:o},"info-overlay-bg"),a.appendChild(o),a),a=c.newForeignObject({height:n,width:"100%",x:"0",y:t}),s=p.createDetailsBody(i,n,e.entry);function l(){return s.getElementsByClassName("tab-button")}function u(n){e.openTabIndex=n,d.forEachNodeList(s.getElementsByClassName("tab"),function(e,t){e.style.display=n===t?"block":"none",l().item(t).classList.toggle("active",n===t)})}return(t=(n=t,(t=c.newA("info-overlay-close-btn")).appendChild(c.newRect({height:23,width:23,x:"100%",y:n})),t.appendChild(c.newTextEl("✕",{dx:7,dy:16,x:"100%",y:n})),t.appendChild(c.newTitle("Close Overlay")),t)).addEventListener("click",function(){e.onClose(e.index),s.removeEventListener("click",h)}),s.addEventListener("click",h),d.forEachNodeList(l(),function(e,t){e.addEventListener("click",function(){return u(t)})}),u(e.openTabIndex),a.appendChild(s),o.appendChild(a),o.appendChild(t),o}},{"../../helpers/dom":1,"../../helpers/svg":6,"./html-details-body":16}],20:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.getIndicatorIcons=n.makeIcon=void 0;var o=e("../../helpers/misc");function a(e,t){return{type:e,title:t,width:20}}n.makeIcon=a,n.getIndicatorIcons=function(e){if(0===(i=e.responseDetails.indicators.filter(function(e){return"icon"===e.displayType})).length)return[];var t=[],n="",r=i.filter(function(e){return"error"===e.type}),e=i.filter(function(e){return"warning"===e.type}),i=i.filter(function(e){return"error"!==e.type&&"warning"!==e.type});return 0total: "+Math.round(t.total)+"ms",o={cssClass:c.timingTypeToCssClass(t.type),height:n.height-6,hideOverlay:n.hideOverlay,label:""+t.type+"
    "+Math.round(t.start)+"ms - "+Math.round(t.end)+"ms"+r,showOverlay:n.showOverlay,unit:n.unit,width:t.total,x:t.start||.001,y:n.y},a=h(o,"segment "+o.cssClass),l=Math.min(l,o.x),"receive"===e.type&&e.chunks&&0');return e.appendChild(t),r.appendChild(e),n.appendChild(r),n}},{"../../helpers/dom":1,"../../helpers/svg":6}],24:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.makeHoverEvtListeners=n.createAlignmentLines=void 0;var r=e("../../helpers/dom"),i=e("../../helpers/svg");n.createAlignmentLines=function(e){return{endline:i.newLine({x1:"0",x2:"0",y1:"0",y2:e},"line-end"),startline:i.newLine({x1:"0",x2:"0",y1:"0",y2:e},"line-start")}},n.makeHoverEvtListeners=function(n){return{onMouseEnterPartial:function(){return function(e){var t=e.target;r.addClass(t,"active");e=t.x.baseVal.valueInSpecifiedUnits+t.width.baseVal.valueInSpecifiedUnits+"%",t=t.x.baseVal.valueInSpecifiedUnits+"%";n.endline.x1.baseVal.valueAsString=e,n.endline.x2.baseVal.valueAsString=e,n.startline.x1.baseVal.valueAsString=t,n.startline.x2.baseVal.valueAsString=t,r.addClass(n.endline,"active"),r.addClass(n.startline,"active")}},onMouseLeavePartial:function(){return function(e){e=e.target;r.removeClass(e,"active"),r.removeClass(n.endline,"active"),r.removeClass(n.startline,"active")}}}}},{"../../helpers/dom":1,"../../helpers/svg":6}],25:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.createTimeScale=void 0;var p=e("../../helpers/misc"),h=e("../../helpers/svg");n.createTimeScale=function(e,t){for(var n=h.newG("time-scale full-width"),r=200*Math.ceil(t/1e4),i=1e3/r,o=t/1e3,a=t/r,s=0;s<=a;s++)!function(e,t,n,r,i){void 0===i&&(i=!1);var o,a,s,l=e.diagramHeight,u=100/n,d="sub-second-line";i&&(a=n-.2"+e.url+"
    "+Math.round(e.start)+"ms - "+Math.round(e.end)+"ms
    total: "+(isNaN(e.total)?"n/a ":Math.round(e.total))+"ms",showOverlay:o.showAlignmentHelpers?a.onMouseEnterPartial:void 0,unit:l.unit,width:n,x:i,y:r},i=C.createRow(l,t,h,f,i,e,function(){l.overlayManager.toggleOverlay(t,r+o.rowHeight,450,e,v)});v.push(i),s.appendChild(i),s.appendChild(g.newG("row-overlay-holder"))}),o.showAlignmentHelpers&&void 0!==t&&d.appendChild(t),u.appendChild(d),u.appendChild(s),u.appendChild(r),u.appendChild(x.makeTooltip(o)),u}},{"../helpers/svg":6,"../transformers/styling-converters":15,"./details-overlay/overlay-manager":17,"./details-overlay/pub-sub":18,"./row/svg-row":22,"./row/svg-tooltip":23,"./sub-components/svg-alignment-helper":24,"./sub-components/svg-general-components":25,"./sub-components/svg-marks":26}]},{},[8])(8)}); \ No newline at end of file diff --git a/lib/plugins/html/assets/js/video.core.novtt.min.js b/lib/plugins/html/assets/js/video.core.novtt.min.js deleted file mode 100644 index 722490803..000000000 --- a/lib/plugins/html/assets/js/video.core.novtt.min.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Video.js 7.10.2 - * Copyright Brightcove, Inc. - * Available under Apache License Version 2.0 - * - * - * Includes vtt.js - * Available under Apache License Version 2.0 - * - */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("global/window"),require("global/document")):"function"==typeof define&&define.amd?define(["global/window","global/document"],t):(e=e||self).videojs=t(e.window,e.document)}(this,function(h,d){"use strict";h=h&&Object.prototype.hasOwnProperty.call(h,"default")?h.default:h,d=d&&Object.prototype.hasOwnProperty.call(d,"default")?d.default:d;var p="7.10.2",c=[],e=function(a,l){return function(e,t,n){var i=l.levels[t],r=new RegExp("^("+i+")$");if("log"!==e&&n.unshift(e.toUpperCase()+":"),n.unshift(a+":"),c){c.push([].concat(n));var s=c.length-1e3;c.splice(0,0',n=i.firstChild,i.setAttribute("style","display:none; position:absolute;"),d.body.appendChild(i));for(var s={},o=0;ox',e=t.firstChild.href}return e}function Ht(e){if("string"==typeof e){var t=/^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/.exec(e);if(t)return t.pop().toLowerCase()}return""}function Vt(e,t){void 0===t&&(t=h.location);var n=Rt(e);return(":"===n.protocol?t.protocol:n.protocol)+n.host!==t.protocol+t.host}var Kt=function(i){function e(e){var t;void 0===e&&(e=[]);for(var n=e.length-1;0<=n;n--)if(e[n].enabled){Dt(e,e[n]);break}return(t=i.call(this,e)||this).changing_=!1,t}Ue(e,i);var t=e.prototype;return t.addTrack=function(e){var t=this;e.enabled&&Dt(this,e),i.prototype.addTrack.call(this,e),e.addEventListener&&(e.enabledChange_=function(){t.changing_||(t.changing_=!0,Dt(t,e),t.changing_=!1,t.trigger("change"))},e.addEventListener("enabledchange",e.enabledChange_))},t.removeTrack=function(e){i.prototype.removeTrack.call(this,e),e.removeEventListener&&e.enabledChange_&&(e.removeEventListener("enabledchange",e.enabledChange_),e.enabledChange_=null)},e}(Mt),Wt=function(i){function e(e){var t;void 0===e&&(e=[]);for(var n=e.length-1;0<=n;n--)if(e[n].selected){Ft(e,e[n]);break}return(t=i.call(this,e)||this).changing_=!1,Object.defineProperty(He(t),"selectedIndex",{get:function(){for(var e=0;e - * Copyright (c) 2014 David Björklund - * Available under the MIT license - * - */,en=Object.prototype.toString;var tn=function(e){var r={};return e&&e.trim().split("\n").forEach(function(e){var t=e.indexOf(":"),n=e.slice(0,t).trim().toLowerCase(),i=e.slice(t+1).trim();"undefined"==typeof r[n]?r[n]=i:Array.isArray(r[n])?r[n].push(i):r[n]=[r[n],i]}),r},nn=on,rn=on;function sn(e,t,n){var i=e;return Zt(t)?(n=t,"string"==typeof e&&(i={uri:e})):i=r({},t,{uri:e}),i.callback=n,i}function on(e,t,n){return an(t=sn(e,t,n))}function an(i){if("undefined"==typeof i.callback)throw new Error("callback argument missing");var r=!1,s=function(e,t,n){r||(r=!0,i.callback(e,t,n))};function t(e){return clearTimeout(a),e instanceof Error||(e=new Error(""+(e||"Unknown XMLHttpRequest Error"))),e.statusCode=0,s(e,v)}function e(){if(!o){var e;clearTimeout(a),e=i.useXDR&&void 0===l.status?200:1223===l.status?204:l.status;var t=v,n=null;return 0!==e?(t={body:function(){var e=void 0;if(e=l.response?l.response:l.responseText||function(e){try{if("document"===e.responseType)return e.responseXML;var t=e.responseXML&&"parsererror"===e.responseXML.documentElement.nodeName;if(""===e.responseType&&!t)return e.responseXML}catch(e){}return null}(l),f)try{e=JSON.parse(e)}catch(e){}return e}(),statusCode:e,method:u,headers:{},url:c,rawRequest:l},l.getAllResponseHeaders&&(t.headers=tn(l.getAllResponseHeaders()))):n=new Error("Internal XMLHttpRequest Error"),s(n,t,t.body)}}var n,o,a,l=i.xhr||null,c=(l=l||(i.cors||i.useXDR?new on.XDomainRequest:new on.XMLHttpRequest)).url=i.uri||i.url,u=l.method=i.method||"GET",h=i.body||i.data,d=l.headers=i.headers||{},p=!!i.sync,f=!1,v={body:void 0,headers:{},statusCode:0,method:u,url:c,rawRequest:l};if("json"in i&&!1!==i.json&&(f=!0,d.accept||d.Accept||(d.Accept="application/json"),"GET"!==u&&"HEAD"!==u&&(d["content-type"]||d["Content-Type"]||(d["Content-Type"]="application/json"),h=JSON.stringify(!0===i.json?h:i.json))),l.onreadystatechange=function(){4===l.readyState&&setTimeout(e,0)},l.onload=e,l.onerror=t,l.onprogress=function(){},l.onabort=function(){o=!0},l.ontimeout=t,l.open(u,c,!p,i.username,i.password),p||(l.withCredentials=!!i.withCredentials),!p&&0=e?t.push(r):r.startTime===r.endTime&&r.startTime<=e&&r.startTime+.5>=e&&t.push(r)}if(a=!1,t.length!==this.activeCues_.length)a=!0;else for(var s=0;s