diff --git a/docs/_includes/version/browsertime.txt b/docs/_includes/version/browsertime.txt index 2f963cd6d..3769235d3 100644 --- a/docs/_includes/version/browsertime.txt +++ b/docs/_includes/version/browsertime.txt @@ -1 +1 @@ -7.0.2 \ No newline at end of file +7.1.0 \ No newline at end of file diff --git a/lib/plugins/browsertime/aggregator.js b/lib/plugins/browsertime/aggregator.js index 5fe02a0e1..f32bef92f 100644 --- a/lib/plugins/browsertime/aggregator.js +++ b/lib/plugins/browsertime/aggregator.js @@ -115,6 +115,20 @@ module.exports = { ['cpu', 'longTasks', 'totalDuration'], browsertimeRunData.cpu.longTasks.totalDuration ); + + statsHelpers.pushGroupStats( + this.statsPerType, + this.groups[group], + ['cpu', 'longTasks', 'totalBlockingTime'], + browsertimeRunData.cpu.longTasks.totalBlockingTime + ); + + statsHelpers.pushGroupStats( + this.statsPerType, + this.groups[group], + ['cpu', 'longTasks', 'maxPotentialFid'], + browsertimeRunData.cpu.longTasks.maxPotentialFid + ); } if (browsertimeRunData.cpu.categories) { for (let categoryName of Object.keys( diff --git a/lib/plugins/html/index.js b/lib/plugins/html/index.js index 84c5de240..3b2ea71c7 100644 --- a/lib/plugins/html/index.js +++ b/lib/plugins/html/index.js @@ -60,7 +60,9 @@ const defaultConfig = { 'axe.minor', 'axe.moderate', 'cpu.longTasksTotalDuration', - 'cpu.longTasks' + 'cpu.longTasks', + 'cpu.totalBlockingTime', + 'cpu.maxPotentialFid' ] } }; diff --git a/lib/plugins/html/setup/detailed.js b/lib/plugins/html/setup/detailed.js index 7e5f01d76..848fc14ed 100644 --- a/lib/plugins/html/setup/detailed.js +++ b/lib/plugins/html/setup/detailed.js @@ -235,6 +235,18 @@ module.exports = function(data) { 'CPU Long Tasks total duration', 'cpuLongTasksTotalDurationPerPage', h.time.ms + ), + row( + summary.cpu.longTasks.totalBlockingTime, + 'Total Blocking Time', + 'totalBlockingTime', + h.time.ms + ), + row( + summary.cpu.longTasks.maxPotentialFid, + 'Max Potential First Input Delay', + 'maxPotentialFirstInputDelay', + h.time.ms ) ); } diff --git a/lib/plugins/html/setup/summaryBoxes.js b/lib/plugins/html/setup/summaryBoxes.js index ba6467084..02c37fb6b 100644 --- a/lib/plugins/html/setup/summaryBoxes.js +++ b/lib/plugins/html/setup/summaryBoxes.js @@ -78,6 +78,22 @@ function timingBox(stat, name, formatter, box) { } else { label = 'error'; } + } else if (box === 'cpu.maxPotentialFid') { + if (stat.median === 0) { + label = 'ok'; + } else if (stat.median < 300) { + label = 'warning'; + } else { + label = 'error'; + } + } else if (box === 'cpu.totalBlockingTime') { + if (stat.median === 0) { + label = 'ok'; + } else if (stat.median < 500) { + label = 'warning'; + } else { + label = 'error'; + } } return _box(stat, name, label, formatter, name.replace(/\s/g, '')); diff --git a/lib/plugins/html/templates/help.pug b/lib/plugins/html/templates/help.pug index 75be42b3d..25c3808e1 100644 --- a/lib/plugins/html/templates/help.pug +++ b/lib/plugins/html/templates/help.pug @@ -178,3 +178,12 @@ block content h5(id='axeModeratelViolations') Moderate Axe violations p The number of moderate accessibility violations on your page found by Axe. + + h5(id='totalBlockingTime') Total Blocking Time + p The blocking time of a given long task is its duration in excess of 50 ms (or the time you have configured with --browsertime.minLongTaskLength). And the total blocking time for a page is the sum of the blocking time for each long task that happens after first contentful paint. + + h5(id='maxPotentialFid') Max Potential First Input Delay + p The worst-case First Input Delay that your users might experience during load. This is calculated using CPU long tasks. + + h5(id='firstInputDelay') First Input Delay + p First Input Delay measures the time from when a user first interacts with your site (when they click a link, tap on a button etc) to the time when the browser is actually able to respond to that interaction. You need to use scripting to actively do something with the page for this metric to be collected. diff --git a/lib/plugins/html/templates/url/cpu/index.pug b/lib/plugins/html/templates/url/cpu/index.pug index f22670421..3f7df448e 100644 --- a/lib/plugins/html/templates/url/cpu/index.pug +++ b/lib/plugins/html/templates/url/cpu/index.pug @@ -18,6 +18,15 @@ if browsertime && browsertime.cpu && browsertime.cpu.longTasks th Type th Quantity th Total duration (ms) + tr + td Total Blocking Time + td + td #{browsertime.cpu.longTasks.totalBlockingTime} + tr + td Max Potential First Input Delay + td + td #{browsertime.cpu.longTasks.maxPotentialFid} + tr td Long Tasks before First Paint td #{browsertime.cpu.longTasks.beforeFirstPaint.tasks} diff --git a/lib/plugins/html/templates/url/iteration/index.pug b/lib/plugins/html/templates/url/iteration/index.pug index 925ab7e7b..b725e98a5 100644 --- a/lib/plugins/html/templates/url/iteration/index.pug +++ b/lib/plugins/html/templates/url/iteration/index.pug @@ -94,6 +94,16 @@ block content tr td RUM Speed Index: td #{h.time.ms(d.browsertime.run.timings.rumSpeedIndex)} + if d.browsertime && d.browsertime.run && d.browsertime.run.cpu && d.browsertime.run.cpu.longTasks + tr + td Total Blocking Time: + td #{h.time.ms(d.browsertime.run.cpu.longTasks.totalBlockingTime)} + tr + td Max Potential FID [median]: + td #{h.time.ms(d.browsertime.run.cpu.longTasks.maxPotentialFid)} + tr + td CPU long tasks: + td #{d.browsertime.run.cpu.longTasks.tasks} if !d.browsertime && d.webpagetest tr td Render (first view): diff --git a/lib/plugins/html/templates/url/metrics/firstInput.pug b/lib/plugins/html/templates/url/metrics/firstInput.pug index 51da6fed9..5dd2a0275 100644 --- a/lib/plugins/html/templates/url/metrics/firstInput.pug +++ b/lib/plugins/html/templates/url/metrics/firstInput.pug @@ -1,6 +1,7 @@ if browsertime.timings.firstInput !== undefined a#firstInput h3 First Input Delay + p Measured First Input Delay table tr th Name diff --git a/lib/plugins/html/templates/url/summary/index.pug b/lib/plugins/html/templates/url/summary/index.pug index ff3cf3fc1..8fdb1f77f 100644 --- a/lib/plugins/html/templates/url/summary/index.pug +++ b/lib/plugins/html/templates/url/summary/index.pug @@ -69,6 +69,12 @@ block content td First Paint [median]: td #{h.time.ms(d.browsertime.pageSummary.statistics.timings.firstPaint.median)} if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.statistics.cpu && d.browsertime.pageSummary.statistics.cpu.longTasks + tr + td Total Blocking Time [median]: + td #{h.time.ms(d.browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median)} + tr + td Max Potential FID [median]: + td #{h.time.ms(d.browsertime.pageSummary.statistics.cpu.longTasks.maxPotentialFid.median)} tr td CPU long tasks [median]: td #{d.browsertime.pageSummary.statistics.cpu.longTasks.tasks.median} diff --git a/lib/plugins/pagexray/index.js b/lib/plugins/pagexray/index.js index 20e4f06b4..9a71351a1 100644 --- a/lib/plugins/pagexray/index.js +++ b/lib/plugins/pagexray/index.js @@ -3,7 +3,7 @@ const pagexrayAggregator = require('./pagexrayAggregator'); const pagexray = require('pagexray'); const urlParser = require('url'); const log = require('intel').getLogger('plugin.pagexray'); - +const h = require('../../support/helpers'); const DEFAULT_PAGEXRAY_PAGESUMMARY_METRICS = [ 'contentTypes', 'transferSize', @@ -86,7 +86,7 @@ module.exports = { log.info( `The server responded with a ${ asset.status - } status code for ${asset.url}` + } status code for ${h.short(asset.url, 60)}` ); } } diff --git a/lib/support/friendlynames.js b/lib/support/friendlynames.js index e1db414b2..24d7bd746 100644 --- a/lib/support/friendlynames.js +++ b/lib/support/friendlynames.js @@ -90,6 +90,18 @@ module.exports = { } }, cpu: { + totalBlockingTime: { + path: 'statistics.cpu.longTasks.totalBlockingTime.median', + summaryPath: 'cpu.longTasks.totalBlockingTime', + name: 'Total Blocking Time', + format: time.ms + }, + maxPotentialFid: { + path: 'statistics.cpu.longTasks.maxPotentialFid.median', + summaryPath: 'cpu.longTasks.maxPotentialFid', + name: 'Max Potential FID', + format: time.ms + }, longTasks: { path: 'statistics.cpu.longTasks.tasks.median', summaryPath: 'cpu.longTasks.tasks', diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 5a2edf26f..abad3eb33 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -3431,9 +3431,9 @@ "integrity": "sha1-81HTKWnTL6XXpVZxVCY9korjvR8=" }, "browsertime": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-7.0.2.tgz", - "integrity": "sha512-Esbv93C97Y8ieJK73HkCR9tiIMxJC9Mz8l45sImNJTGYCmsVJU3DTODhQsEuxvsMkGDKRiAdKQRFquNoajzUow==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-7.1.0.tgz", + "integrity": "sha512-2W46UdF42Q6z1RyKu103qu5zS4363nQN4THVnSlJI4AlOaPxPx/+qilXw+aV5ZlSS0m6xzIqtQoc2y73CnvtPA==", "requires": { "@cypress/xvfb": "1.2.4", "@sitespeed.io/chromedriver": "78.0.3904-70", diff --git a/package.json b/package.json index 544e3fd02..16aefa9af 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@google-cloud/storage": "3.2.0", "axe-core": "3.4.0", "aws-sdk": "2.517.0", - "browsertime": "7.0.2", + "browsertime": "7.1.0", "cli-color": "1.4.0", "concurrent-queue": "7.0.2", "dayjs": "1.8.15",