new browsertime with ttb and maxPotentialFid (#2783)

* new browsertime with ttb and maxPotentialFid

* lint

* show cpu info per run
This commit is contained in:
Peter Hedenskog 2019-11-14 10:14:30 +01:00 committed by GitHub
parent 99d17ee0ef
commit 792b598e5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 99 additions and 8 deletions

View File

@ -1 +1 @@
7.0.2
7.1.0

View File

@ -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(

View File

@ -60,7 +60,9 @@ const defaultConfig = {
'axe.minor',
'axe.moderate',
'cpu.longTasksTotalDuration',
'cpu.longTasks'
'cpu.longTasks',
'cpu.totalBlockingTime',
'cpu.maxPotentialFid'
]
}
};

View File

@ -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
)
);
}

View File

@ -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, ''));

View File

@ -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 <code>--browsertime.minLongTaskLength</code>). 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 <a href="https://www.sitespeed.io/documentation/sitespeed.io/scripting/#measuring-first-input-delay---fid">use scripting</a> to actively do something with the page for this metric to be collected.

View File

@ -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}

View File

@ -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):

View File

@ -1,6 +1,7 @@
if browsertime.timings.firstInput !== undefined
a#firstInput
h3 First Input Delay
p Measured First Input Delay
table
tr
th Name

View File

@ -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}

View File

@ -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)}`
);
}
}

View File

@ -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',

6
npm-shrinkwrap.json generated
View File

@ -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",

View File

@ -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",