{ "__inputs": [ { "name": "DS_INSPECTIT-INFLUX", "label": "inspectit-influx", "description": "", "type": "datasource", "pluginId": "influxdb", "pluginName": "InfluxDB" } ], "__requires": [ { "type": "panel", "id": "text", "name": "Text", "version": "" }, { "type": "panel", "id": "graph", "name": "Graph", "version": "" }, { "type": "grafana", "id": "grafana", "name": "Grafana", "version": "3.1.1" }, { "type": "datasource", "id": "influxdb", "name": "InfluxDB", "version": "1.0.0" } ], "id": null, "title": "EUM 3rd Party Resources Overview", "tags": [], "style": "dark", "timezone": "browser", "editable": true, "hideControls": false, "sharedCrosshair": false, "rows": [ { "collapse": false, "editable": true, "height": "250px", "panels": [ { "content": "

3rd Party Overview

\nToday most of the consumer web pages have about 40% of third party content. You don't want them to slow you down so you need to keep track of how they are doing. Here we give an overview of the timings and how much of the content of your pages is third party.", "editable": true, "error": false, "id": 1, "links": [], "mode": "html", "span": 4, "title": "", "type": "text" }, { "aliasColors": { "1st party": "#3F6833", "3rd party": "#BF1B00" }, "bars": false, "datasource": "${DS_INSPECTIT-INFLUX}", "editable": true, "error": false, "fill": 5, "grid": { "threshold1": null, "threshold1Color": "rgba(216, 200, 27, 0.27)", "threshold2": null, "threshold2Color": "rgba(234, 112, 112, 0.22)" }, "id": 2, "interval": ">5s", "legend": { "alignAsTable": false, "avg": false, "current": false, "hideEmpty": false, "max": false, "min": false, "show": true, "total": false, "values": false }, "lines": true, "linewidth": 2, "links": [], "nullPointMode": "null as zero", "percentage": false, "pointradius": 5, "points": false, "renderer": "flot", "seriesOverrides": [], "span": 8, "stack": true, "steppedLine": false, "targets": [ { "alias": "1st Party", "dsType": "influxdb", "groupBy": [ { "params": [ "auto" ], "type": "time" }, { "params": [ "none" ], "type": "fill" } ], "hide": false, "measurement": "eum_browser_resourceload", "policy": "default", "query": "SELECT count(\"duration\") FROM \"eum_browser_resourceload\" WHERE \"url\" =~ /.*\\/\\/$firstPartyHosts(\\/|$).*/ AND $timeFilter GROUP BY time($interval)", "rawQuery": true, "refId": "A", "resultFormat": "time_series", "select": [ [ { "params": [ "duration" ], "type": "field" }, { "params": [], "type": "count" } ] ], "tags": [ { "key": "url", "operator": "=", "value": "select tag value" } ] }, { "alias": "3rd Party", "dsType": "influxdb", "groupBy": [ { "params": [ "auto" ], "type": "time" }, { "params": [ "none" ], "type": "fill" } ], "hide": false, "measurement": "eum_browser_resourceload", "policy": "default", "query": "SELECT count(\"duration\") FROM \"eum_browser_resourceload\" WHERE \"url\" !~ /.*\\/\\/$firstPartyHosts(\\/|$).*/ AND $timeFilter GROUP BY time($interval)", "rawQuery": true, "refId": "B", "resultFormat": "time_series", "select": [ [ { "params": [ "duration" ], "type": "field" }, { "params": [], "type": "count" } ] ], "tags": [ { "key": "url", "operator": "=", "value": "select tag value" } ] } ], "thresholds": [], "timeFrom": null, "timeShift": null, "title": "Number of 1st vs 3rd Party Requests", "tooltip": { "msResolution": true, "shared": true, "sort": 0, "value_type": "individual" }, "type": "graph", "xaxis": { "mode": "time", "name": null, "show": true, "values": [] }, "yaxes": [ { "format": "short", "label": null, "logBase": 1, "max": null, "min": null, "show": true }, { "format": "short", "label": null, "logBase": 1, "max": null, "min": null, "show": true } ] } ], "repeat": null, "repeatIteration": null, "repeatRowId": null, "showTitle": false, "title": "Row", "titleSize": "h6" }, { "collapse": false, "editable": true, "height": "250px", "panels": [ { "aliasColors": { "eum_browser_resourceload.sum {firstparty: false}": "#3F6833", "eum_browser_resourceload.sum {firstparty: true}": "#BF1B00", "firstparty: false": "#BF1B00", "firstparty: true": "#3F6833", "undefined": "#BF1B00" }, "bars": false, "datasource": "${DS_INSPECTIT-INFLUX}", "editable": true, "error": false, "fill": 6, "grid": { "threshold1": null, "threshold1Color": "rgba(216, 200, 27, 0.27)", "threshold2": null, "threshold2Color": "rgba(234, 112, 112, 0.22)" }, "id": 3, "interval": ">5s", "legend": { "avg": false, "current": false, "max": false, "min": false, "show": true, "total": false, "values": false }, "lines": true, "linewidth": 2, "links": [], "nullPointMode": "null as zero", "percentage": false, "pointradius": 5, "points": false, "renderer": "flot", "seriesOverrides": [], "span": 6, "stack": true, "steppedLine": false, "targets": [ { "alias": "1st Party", "dsType": "influxdb", "groupBy": [ { "params": [ "auto" ], "type": "time" } ], "measurement": "eum_browser_resourceload", "policy": "default", "query": "SELECT sum(\"size\") FROM \"eum_browser_resourceload\" WHERE \"url\" =~ /.*\\/\\/$firstPartyHosts(\\/|$).*/ AND $timeFilter GROUP BY time($interval)", "rawQuery": true, "refId": "A", "resultFormat": "time_series", "select": [ [ { "params": [ "size" ], "type": "field" }, { "params": [], "type": "sum" } ] ], "tags": [] }, { "alias": "3rd Party", "dsType": "influxdb", "groupBy": [ { "params": [ "auto" ], "type": "time" } ], "measurement": "eum_browser_resourceload", "policy": "default", "query": "SELECT sum(\"size\") FROM \"eum_browser_resourceload\" WHERE \"url\" !~ /.*\\/\\/$firstPartyHosts(\\/|$).*/ AND $timeFilter GROUP BY time($interval)", "rawQuery": true, "refId": "B", "resultFormat": "time_series", "select": [ [ { "params": [ "size" ], "type": "field" }, { "params": [], "type": "sum" } ] ], "tags": [] } ], "thresholds": [], "timeFrom": null, "timeShift": null, "title": "1st vs 3rd Party Size Weight", "tooltip": { "msResolution": true, "shared": true, "sort": 0, "value_type": "cumulative" }, "type": "graph", "xaxis": { "mode": "time", "name": null, "show": true, "values": [] }, "yaxes": [ { "format": "bytes", "label": "", "logBase": 1, "max": null, "min": null, "show": true }, { "format": "short", "label": "", "logBase": 1, "max": null, "min": null, "show": true } ] }, { "aliasColors": { "eum_browser_resourceload.sum {firstparty: false}": "#3F6833", "eum_browser_resourceload.sum {firstparty: true}": "#BF1B00", "firstparty: false": "#BF1B00", "firstparty: true": "#3F6833" }, "bars": false, "datasource": "${DS_INSPECTIT-INFLUX}", "editable": true, "error": false, "fill": 6, "grid": { "threshold1": null, "threshold1Color": "rgba(216, 200, 27, 0.27)", "threshold2": null, "threshold2Color": "rgba(234, 112, 112, 0.22)" }, "id": 4, "interval": ">5s", "legend": { "avg": false, "current": false, "max": false, "min": false, "show": true, "total": false, "values": false }, "lines": true, "linewidth": 2, "links": [], "nullPointMode": "null as zero", "percentage": false, "pointradius": 5, "points": false, "renderer": "flot", "seriesOverrides": [], "span": 6, "stack": true, "steppedLine": false, "targets": [ { "alias": "1st Party", "dsType": "influxdb", "groupBy": [ { "params": [ "1m" ], "type": "time" }, { "params": [ "firstparty" ], "type": "tag" }, { "params": [ "none" ], "type": "fill" } ], "measurement": "eum_browser_resourceload", "policy": "default", "query": "SELECT sum(\"duration\") FROM \"eum_browser_resourceload\" WHERE \"url\" =~ /.*\\/\\/$firstPartyHosts(\\/|$).*/ AND $timeFilter GROUP BY time($interval)", "rawQuery": true, "refId": "A", "resultFormat": "time_series", "select": [ [ { "params": [ "duration" ], "type": "field" }, { "params": [], "type": "sum" } ] ], "tags": [] }, { "alias": "3rd Party", "dsType": "influxdb", "groupBy": [ { "params": [ "1m" ], "type": "time" }, { "params": [ "firstparty" ], "type": "tag" }, { "params": [ "none" ], "type": "fill" } ], "measurement": "eum_browser_resourceload", "policy": "default", "query": "SELECT sum(\"duration\") FROM \"eum_browser_resourceload\" WHERE \"url\" !~ /.*\\/\\/$firstPartyHosts(\\/|$).*/ AND $timeFilter GROUP BY time($interval)", "rawQuery": true, "refId": "B", "resultFormat": "time_series", "select": [ [ { "params": [ "duration" ], "type": "field" }, { "params": [], "type": "sum" } ] ], "tags": [] } ], "thresholds": [], "timeFrom": null, "timeShift": null, "title": "1st vs 3rd Party Duration Sum", "tooltip": { "msResolution": true, "shared": true, "sort": 0, "value_type": "cumulative" }, "type": "graph", "xaxis": { "mode": "time", "name": null, "show": true, "values": [] }, "yaxes": [ { "format": "ms", "label": null, "logBase": 1, "max": null, "min": null, "show": true }, { "format": "short", "label": null, "logBase": 1, "max": null, "min": null, "show": true } ] } ], "repeat": null, "repeatIteration": null, "repeatRowId": null, "showTitle": false, "title": "New row", "titleSize": "h6" }, { "collapse": false, "editable": true, "height": "450px", "panels": [ { "content": "

Focus on single resources

\nThis graph shows the average loading time for each 3rd party resource.
\nThis allows you to easily identify which resources slow down your site.", "editable": true, "error": false, "id": 5, "links": [], "mode": "html", "span": 4, "title": "", "type": "text" }, { "aliasColors": {}, "bars": false, "datasource": "${DS_INSPECTIT-INFLUX}", "editable": true, "error": false, "fill": 1, "grid": { "threshold1": null, "threshold1Color": "rgba(216, 200, 27, 0.27)", "threshold2": null, "threshold2Color": "rgba(234, 112, 112, 0.22)" }, "id": 6, "interval": ">5s", "legend": { "alignAsTable": false, "avg": true, "current": false, "max": true, "min": true, "rightSide": false, "show": false, "total": false, "values": true }, "lines": true, "linewidth": 2, "links": [], "nullPointMode": "null as zero", "percentage": false, "pointradius": 5, "points": false, "renderer": "flot", "seriesOverrides": [ { "alias": "" } ], "span": 8, "stack": false, "steppedLine": false, "targets": [ { "alias": "$tag_url", "dsType": "influxdb", "groupBy": [ { "params": [ "1m" ], "type": "time" }, { "params": [ "url" ], "type": "tag" }, { "params": [ "null" ], "type": "fill" } ], "hide": false, "measurement": "eum_browser_resourceload", "policy": "default", "query": "SELECT mean(\"duration\") FROM \"eum_browser_resourceload\" WHERE \"url\" !~ /.*\\/\\/$firstPartyHosts(\\/|$).*/ AND $timeFilter GROUP BY time($interval), \"url\"", "rawQuery": true, "refId": "A", "resultFormat": "time_series", "select": [ [ { "params": [ "duration" ], "type": "field" }, { "params": [], "type": "mean" } ] ], "tags": [ { "key": "url", "operator": "!~", "value": "/.*:\\/\\/(localhost|nbookche|192\\.168\\.179\\.62):(.*)/" } ] } ], "thresholds": [], "timeFrom": null, "timeShift": null, "title": "3rd Party Resources Loading Times Compared", "tooltip": { "msResolution": true, "shared": false, "sort": 0, "value_type": "cumulative" }, "type": "graph", "xaxis": { "mode": "time", "name": null, "show": true, "values": [] }, "yaxes": [ { "format": "ms", "label": null, "logBase": 1, "max": null, "min": null, "show": true }, { "format": "short", "label": null, "logBase": 1, "max": null, "min": null, "show": true } ] } ], "repeat": null, "repeatIteration": null, "repeatRowId": null, "showTitle": false, "title": "New row", "titleSize": "h6" } ], "time": { "from": "2017-04-21T10:39:25.997Z", "to": "2017-04-21T10:39:28.882Z" }, "timepicker": { "refresh_intervals": [ "5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d" ], "time_options": [ "5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d" ] }, "templating": { "list": [ { "current": {}, "datasource": "${DS_INSPECTIT-INFLUX}", "hide": 0, "includeAll": false, "label": "First Party Hosts", "multi": true, "name": "firstPartyHosts", "options": [], "query": "SHOW TAG VALUES FROM eum_browser_resourceload with key = \"url\"", "refresh": 1, "regex": "(?:.*\\/\\/)([^\\/]+)(?:$|\\/.*)", "type": "query", "useTags": false }, { "auto": true, "auto_count": 50, "current": { "tags": [], "text": "auto", "value": "$__auto_interval" }, "datasource": null, "hide": 0, "includeAll": false, "label": "Interval", "multi": false, "name": "interval", "options": [ { "selected": true, "text": "auto", "value": "$__auto_interval" }, { "selected": false, "text": "1m", "value": "1m" }, { "selected": false, "text": "10m", "value": "10m" }, { "selected": false, "text": "30m", "value": "30m" }, { "selected": false, "text": "1h", "value": "1h" }, { "selected": false, "text": "6h", "value": "6h" }, { "selected": false, "text": "12h", "value": "12h" }, { "selected": false, "text": "1d", "value": "1d" }, { "selected": false, "text": "7d", "value": "7d" }, { "selected": false, "text": "14d", "value": "14d" }, { "selected": false, "text": "30d", "value": "30d" } ], "query": "1m,10m,30m,1h,6h,12h,1d,7d,14d,30d", "refresh": 0, "type": "interval" } ] }, "annotations": { "list": [] }, "refresh": false, "schemaVersion": 12, "version": 10, "links": [], "gnetId": null }