mirror
/
sitespeed.io
mirror of https://github.com/sitespeedio/sitespeed.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sitespeed.io/docker/grafana/provisioning/dashboards/PageMetrics.json

11644 lines
311 KiB
JSON
Raw Blame History

{
"__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": "<a href=\"$resulturl/$testname/$base.$path.$group.$page.$browser.$connectivity.$screenshottype\">\n<img src=\"$resulturl/$testname/$base.$path.$group.$page.$browser.$connectivity.$screenshottype\"></a>",
"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": "<video controls width=\"100%\"src=\"$resulturl/$testname/$base.$path.$group.$page.$browser.$connectivity.mp4\"></video>\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": "<a href=\"$resulturl/$testname/$base.$path.$group.$page.largestContentfulPaint.$browser.$connectivity.$screenshottype\">\n<img src=\"$resulturl/$testname/$base.$path.$group.$page.largestContentfulPaint.$browser.$connectivity.$screenshottype\"></a>\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": "<a href=\"$resulturl/$testname/$base.$path.$group.$page.layoutShift.$browser.$connectivity.$screenshottype\">\n<img src=\"$resulturl/$testname/$base.$path.$group.$page.layoutShift.$browser.$connectivity.$screenshottype\"></a>\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": ""
}
Reference in New Issue View Git Blame Copy Permalink