mirror
/
sitespeed.io
mirror of https://github.com/sitespeedio/sitespeed.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Sync metrics name and make sure we show them on all places. (#3004) 

* Sync metrics name and make sure we show them on all places.

* lint
This commit is contained in:
Peter Hedenskog 2020-05-19 12:20:54 +02:00 committed by GitHub
parent 1f4c9441d3
commit 3b9b7fa2cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 96 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/documentation/sitespeed.io/metrics/index.md
View File

@ -131,7 +131,7 @@ The Largest Contentful Paint (LCP) metric reports the render time of the largest
Measure when specfific elements occur on the screen. To get this metric you need to annotate your HTML element with the attribute **elementtiming**.
### Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. This is a Chrome only metric. We report this in % (how many percentage of the layout moved).
Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. This is a Chrome only metric.
### Time To DOM Content Flushed
Internal Firefox metric activated by setting the preference **dom.performance.time_to_dom_content_flushed.enabled** to true.

18
lib/plugins/browsertime/aggregator.js
View File

@ -23,6 +23,24 @@ module.exports = {
);
}
if (browsertimeRunData.timings.largestContentfulPaint) {
statsHelpers.pushGroupStats(
this.statsPerType,
this.groups[group],
['timings', 'largestContentfulPaint'],
browsertimeRunData.timings.largestContentfulPaint.renderTime
);
}
if (browsertimeRunData.pageinfo.layoutShift) {
statsHelpers.pushGroupStats(
this.statsPerType,
this.groups[group],
['pageinfo', 'layoutShift'],
browsertimeRunData.pageinfo.layoutShift
);
}
forEach(timings, timing => {
if (browsertimeRunData.timings[timing]) {
statsHelpers.pushGroupStats(

3
lib/plugins/html/index.js
View File

@ -28,14 +28,17 @@ const defaultConfig = {
'score.privacy',
'score.performance',
'timings.firstPaint',
'timings.firstContentfulPaint',
'timings.fullyLoaded',
'timings.pageLoadTime',
'timings.largestContentfulPaint',
'timings.FirstVisualChange',
'timings.LastVisualChange',
'timings.SpeedIndex',
'timings.PerceptualSpeedIndex',
'timings.VisualReadiness',
'timings.VisualComplete',
'pageinfo.layoutShift',
'requests.total',
'requests.javascript',
'requests.css',

37
lib/plugins/html/setup/detailed.js
View File

@ -20,7 +20,6 @@ module.exports = function(data) {
if (!data) {
return [];
}
const rows = [];
const coach = data.coach;
@ -115,13 +114,22 @@ module.exports = function(data) {
if (browsertime) {
const summary = browsertime.summary;
rows.push(
row(summary.rumSpeedIndex, 'RUMSpeed Index', 'rumSpeedIndex', h.time.ms),
row(summary.firstPaint, 'First Paint', 'firstPaint', h.time.ms),
row(summary.fullyLoaded, 'Fully Loaded', 'fullyLoaded', h.time.ms)
row(summary.firstPaint, 'First Paint', 'firstPaint', h.time.ms)
);
if (summary.timings) {
rows.push(
row(
summary.timings.fullyLoaded,
'Fully Loaded',
'fullyLoaded',
h.time.ms
)
);
}
if (summary.timeToDomContentFlushed) {
rows.push(
row(
@ -133,6 +141,17 @@ module.exports = function(data) {
);
}
if (summary.timings && summary.timings.largestContentfulPaint) {
rows.push(
row(
summary.timings.largestContentfulPaint,
'Largest Contentful Paint',
'largestContentfulPaint',
h.time.ms
)
);
}
if (summary.paintTiming) {
const paintTimings = Object.keys(summary.paintTiming);
for (let pt of paintTimings) {
@ -151,6 +170,16 @@ module.exports = function(data) {
}
}
if (summary.pageinfo && summary.pageinfo.layoutShift) {
rows.push(
row(
summary.pageinfo.layoutShift,
'Cumulative Layout Shift',
'cumulativeLayoutShift'
)
);
}
if (summary.visualMetrics) {
rows.push(
row(

5
lib/plugins/html/setup/summaryBoxesDefaultLimits.js
View File

@ -25,6 +25,8 @@ module.exports = {
// All timings are in ms
timings: {
firstPaint: { green: 1000, yellow: 2000 },
firstContentfulPaint: {},
largestContenfulPaint: {},
fullyLoaded: {},
pageLoadTime: {},
FirstVisualChange: { green: 1000, yellow: 2000 },
@ -34,6 +36,9 @@ module.exports = {
VisualReadiness: { green: 500, yellow: 1000 },
VisualComplete: {}
},
pageinfo: {
layoutShift: {}
},
requests: {
total: { green: 80, yellow: 200 },
javascript: {},

2
lib/plugins/html/templates/detailed.pug
View File

@ -14,7 +14,7 @@ block content
th p90
th max
each metric in metrics
if metric.node && metric.node.min
if metric.node && (metric.node.min || metric.node.min === 0)
tr
td(data-title='Metric', data-value=metric.name)
if (metric.metricName)

2
lib/plugins/html/templates/help.pug
View File

@ -45,7 +45,7 @@ block content
h2(id='timingMetrics') Timing metrics
h5(id='backEndTime') BackEndTime
h5(id='backEndTime') BackEndTime / TTFB
p The time it takes for the network and the server to generate and start sending the HTML. Collected using the Navigation Timing API with the definition: responseStart - navigationStart
h5(id='frontEndTime') FrontEndTime

2
lib/plugins/html/templates/url/iteration/index.pug
View File

@ -98,7 +98,7 @@ block content
if cls || cls === 0
tr
td CLS
td #{cls.toFixed(2)} %
td #{cls}
- tbt = get(d, 'browsertime.run.cpu.longTasks.totalBlockingTime')
if tbt
tr

4
lib/plugins/html/templates/url/metrics/layoutShift.pug
View File

@ -1,9 +1,9 @@
if browsertime.pageinfo && browsertime.pageinfo.layoutShift !== undefined
a#layoutShift
h3 Detected unexpected layout shifts
h3 Detected Cumulative Layout Shift
if (browsertime.pageinfo.layoutShift === 0)
p No layout shift detected.
else
p #{browsertime.pageinfo.layoutShift.toFixed(2)} % layout shift collected from the
p #{browsertime.pageinfo.layoutShift.toFixed(2)} layout shift collected from the
a(href='https://web.dev/layout-instability-api') The Layout Instability API
| .

2
lib/plugins/html/templates/url/summary/index.pug
View File

@ -92,7 +92,7 @@ block content
if cls || cls === 0
tr
td CLS [median]
td #{cls.toFixed(2)} %
td #{cls}
- tbt = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median')
if tbt
tr

2
lib/plugins/html/templates/url/summary/summaryBox.pug
View File

@ -72,7 +72,7 @@ if btStatistics
each timing in timingMetrics
+getRow(timing, pageInfo, 'data.browsertime.pageSummary.statistics.timings.' + timing , pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.' + timing, h.time.ms)
+getRow('CLS', pageInfo, 'data.browsertime.pageSummary.statistics.pageinfo.layoutShift' , pageInfo.data.browsertime.pageSummary.browserScripts, 'pageinfo.layoutShift', h.percent)
+getRow('CLS', pageInfo, 'data.browsertime.pageSummary.statistics.pageinfo.layoutShift' , pageInfo.data.browsertime.pageSummary.browserScripts, 'pageinfo.layoutShift', h.noop)
if btStatistics.timings && btStatistics.timings.userTimings && btStatistics.timings.userTimings.marks
tr

22
lib/support/friendlynames.js
View File

@ -10,6 +10,18 @@ module.exports = {
name: 'First Paint',
format: time.ms
},
firstContentfulPaint: {
path: "statistics.timings.paintTiming['first-contentful-paint'].median",
summaryPath: "paintTiming['first-contentful-paint']",
name: 'First Contentful Paint',
format: time.ms
},
largestContentfulPaint: {
path: 'statistics.timings.largestContentfulPaint.median',
summaryPath: 'timings.largestContentfulPaint',
name: 'Largest Contentful Paint',
format: time.ms
},
loadEventEnd: {
path: 'statistics.timings.loadEventEnd.median',
summaryPath: 'loadEventEnd',
@ -31,7 +43,7 @@ module.exports = {
backEndTime: {
path: 'statistics.timings.pageTimings.backEndTime.median',
summaryPath: 'pageTimings.backEndTime',
name: 'Backend Time',
name: 'TTFB',
format: time.ms
},
pageLoadTime: {
@ -120,6 +132,14 @@ module.exports = {
name: 'Total Duration of Long Tasks',
format: time.ms
}
},
pageinfo: {
layoutShift: {
path: 'statistics.pageinfo.layoutShift.median',
summaryPath: 'pageinfo.layoutShift',
name: 'Cumulative Layout Shift',
format: noop
}
}
},
pagexray: {

4
lib/support/statsHelpers.js
View File

@ -55,6 +55,10 @@ module.exports = {
options = options || {};
let percentiles = options.percentiles || [0, 90, 100];
let decimals = options.decimals || 0;
if (stats.median() < 1) {
decimals = 4;
}
let data = {
median: parseFloat(stats.median().toFixed(decimals)),
mean: parseFloat(stats.amean().toFixed(decimals))

6
npm-shrinkwrap.json generated
View File

@ -1471,9 +1471,9 @@
"integrity": "sha1-81HTKWnTL6XXpVZxVCY9korjvR8="
},
"browsertime": {
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/browsertime/-/browsertime-8.12.0.tgz",
"integrity": "sha512-mO5CHSn2fdmaPJGAUWepQFOZBYOnY0wQjWiByNDwAgit+OZmGfo7v5gYJjqCPx16YzVP+BqaKO+tXL4ieyAGuQ==",
"version": "8.12.1",
"resolved": "https://registry.npmjs.org/browsertime/-/browsertime-8.12.1.tgz",
"integrity": "sha512-xdvhYWbl+lneLuyPRcWwelL9Xu1bussQYQFM5GzLZ+Wy+zKLWNooX3zZRlHgYuOYLN7zBJ/Kl8LzYnANimg08Q==",
"requires": {
"@cypress/xvfb": "1.2.4",
"@sitespeed.io/chromedriver": "81.0.4044-69",

2
package.json
View File

@ -74,7 +74,7 @@
"@tgwf/co2": "0.6.1",
"aws-sdk": "2.613.0",
"axe-core": "3.5.3",
"browsertime": "8.12.0",
"browsertime": "8.12.1",
"coach-core": "5.0.1",
"cli-color": "1.4.0",
"concurrent-queue": "7.0.2",