new browsertime with ttb and maxPotentialFid (#2783)
* new browsertime with ttb and maxPotentialFid * lint * show cpu info per run
This commit is contained in:
parent
99d17ee0ef
commit
792b598e5a
|
|
@ -1 +1 @@
|
|||
7.0.2
|
||||
7.1.0
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -60,7 +60,9 @@ const defaultConfig = {
|
|||
'axe.minor',
|
||||
'axe.moderate',
|
||||
'cpu.longTasksTotalDuration',
|
||||
'cpu.longTasks'
|
||||
'cpu.longTasks',
|
||||
'cpu.totalBlockingTime',
|
||||
'cpu.maxPotentialFid'
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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, ''));
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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):
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
if browsertime.timings.firstInput !== undefined
|
||||
a#firstInput
|
||||
h3 First Input Delay
|
||||
p Measured First Input Delay
|
||||
table
|
||||
tr
|
||||
th Name
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue