Skip to content

Commit

Permalink
core(metrics): consumable details audit output
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickhulce
patrickhulce committed May 3, 2018
1 parent 9cc23a3 commit b732dc3
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 155 deletions.
42 changes: 12 additions & 30 deletions lighthouse-core/audits/metrics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class Metrics extends Audit {
const interactive = await artifacts.requestInteractive(metricComputationData);
const speedIndex = await artifacts.requestSpeedIndex(metricComputationData);
const estimatedInputLatency = await artifacts.requestEstimatedInputLatency(metricComputationData); // eslint-disable-line max-len
const metrics = [];
const metrics = {};

// Include the simulated/observed performance metrics
const metricsMap = {
Expand All @@ -52,11 +52,8 @@ class Metrics extends Audit {
};

for (const [metricName, values] of Object.entries(metricsMap)) {
metrics.push({
metricName,
timing: Math.round(values.timing),
timestamp: values.timestamp,
});
metrics[metricName] = Math.round(values.timing);
if (values.timestamp) metrics[`${metricName}Ts`] = values.timestamp;
}

// Include all timestamps of interest from trace of tab
Expand All @@ -66,37 +63,22 @@ class Metrics extends Audit {
const uppercased = traceEventName.slice(0, 1).toUpperCase() + traceEventName.slice(1);
const metricName = `observed${uppercased}`;
const timestamp = traceOfTab.timestamps[traceEventName];
metrics.push({metricName, timing, timestamp});
metrics[metricName] = Math.round(timing);
metrics[`${metricName}Ts`] = timestamp;
}

// Include some visual metrics from speedline
metrics.push({
metricName: 'observedFirstVisualChange',
timing: speedline.first,
timestamp: (speedline.first + speedline.beginning) * 1000,
});
metrics.push({
metricName: 'observedLastVisualChange',
timing: speedline.complete,
timestamp: (speedline.complete + speedline.beginning) * 1000,
});
metrics.push({
metricName: 'observedSpeedIndex',
timing: speedline.speedIndex,
timestamp: (speedline.speedIndex + speedline.beginning) * 1000,
});

const headings = [
{key: 'metricName', itemType: 'text', text: 'Name'},
{key: 'timing', itemType: 'ms', granularity: 10, text: 'Value (ms)'},
];

const tableDetails = Audit.makeTableDetails(headings, metrics);
metrics.observedFirstVisualChange = speedline.first;
metrics.observedFirstVisualChangeTs = (speedline.first + speedline.beginning) * 1000;
metrics.observedLastVisualChange = speedline.complete;
metrics.observedLastVisualChangeTs = (speedline.complete + speedline.beginning) * 1000;
metrics.observedSpeedIndex = Math.round(speedline.speedIndex);
metrics.observedSpeedIndexTs = Math.round((speedline.speedIndex + speedline.beginning) * 1000);

return {
score: 1,
rawValue: interactive.timing,
details: tableDetails,
details: {items: [metrics]},
};
}
}
Expand Down
50 changes: 25 additions & 25 deletions lighthouse-core/lib/traces/pwmetrics-events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@

const log = require('lighthouse-logger');

function findValueInMetricsAuditFn(metricName, timingOrTimestamp) {
function findValueInMetricsAuditFn(metricName) {
return auditResults => {
const metricsAudit = auditResults.metrics;
if (!metricsAudit || !metricsAudit.details || !metricsAudit.details.items) return;

const values = metricsAudit.details.items.find(item => item.metricName === metricName);
return values && values[timingOrTimestamp];
const values = metricsAudit.details.items[0];
return values && values[metricName];
};
}

Expand All @@ -33,68 +33,68 @@ class Metrics {
{
name: 'Navigation Start',
id: 'navstart',
getTs: findValueInMetricsAuditFn('observedNavigationStart', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedNavigationStart', 'timing'),
getTs: findValueInMetricsAuditFn('observedNavigationStartTs'),
getTiming: findValueInMetricsAuditFn('observedNavigationStart'),
},
{
name: 'First Contentful Paint',
id: 'ttfcp',
getTs: findValueInMetricsAuditFn('observedFirstContentfulPaint', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedFirstContentfulPaint', 'timing'),
getTs: findValueInMetricsAuditFn('observedFirstContentfulPaintTs'),
getTiming: findValueInMetricsAuditFn('observedFirstContentfulPaint'),
},
{
name: 'First Meaningful Paint',
id: 'ttfmp',
getTs: findValueInMetricsAuditFn('observedFirstMeaningfulPaint', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedFirstMeaningfulPaint', 'timing'),
getTs: findValueInMetricsAuditFn('observedFirstMeaningfulPaintTs'),
getTiming: findValueInMetricsAuditFn('observedFirstMeaningfulPaint'),
},
{
name: 'Speed Index',
id: 'si',
getTs: findValueInMetricsAuditFn('observedSpeedIndex', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedSpeedIndex', 'timing'),
getTs: findValueInMetricsAuditFn('observedSpeedIndexTs'),
getTiming: findValueInMetricsAuditFn('observedSpeedIndex'),
},
{
name: 'First Visual Change',
id: 'fv',
getTs: findValueInMetricsAuditFn('observedFirstVisualChange', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedFirstVisualChange', 'timing'),
getTs: findValueInMetricsAuditFn('observedFirstVisualChangeTs'),
getTiming: findValueInMetricsAuditFn('observedFirstVisualChange'),
},
{
name: 'Visually Complete 100%',
id: 'vc100',
getTs: findValueInMetricsAuditFn('observedLastVisualChange', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedLastVisualChange', 'timing'),
getTs: findValueInMetricsAuditFn('observedLastVisualChangeTs'),
getTiming: findValueInMetricsAuditFn('observedLastVisualChange'),
},
{
name: 'First CPU Idle',
id: 'ttfi',
getTs: findValueInMetricsAuditFn('firstCPUIdle', 'timestamp'),
getTiming: findValueInMetricsAuditFn('firstCPUIdle', 'timing'),
getTs: findValueInMetricsAuditFn('firstCPUIdleTs'),
getTiming: findValueInMetricsAuditFn('firstCPUIdle'),
},
{
name: 'Interactive',
id: 'tti',
getTs: findValueInMetricsAuditFn('interactive', 'timestamp'),
getTiming: findValueInMetricsAuditFn('interactive', 'timing'),
getTs: findValueInMetricsAuditFn('interactiveTs'),
getTiming: findValueInMetricsAuditFn('interactive'),
},
{
name: 'End of Trace',
id: 'eot',
getTs: findValueInMetricsAuditFn('observedTraceEnd', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedTraceEnd', 'timing'),
getTs: findValueInMetricsAuditFn('observedTraceEndTs'),
getTiming: findValueInMetricsAuditFn('observedTraceEnd'),
},
{
name: 'On Load',
id: 'onload',
getTs: findValueInMetricsAuditFn('observedLoad', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedLoad', 'timing'),
getTs: findValueInMetricsAuditFn('observedLoadTs'),
getTiming: findValueInMetricsAuditFn('observedLoad'),
},
{
name: 'DOM Content Loaded',
id: 'dcl',
getTs: findValueInMetricsAuditFn('observedDomContentLoaded', 'timestamp'),
getTiming: findValueInMetricsAuditFn('observedDomContentLoaded', 'timing'),
getTs: findValueInMetricsAuditFn('observedDomContentLoadedTs'),
getTiming: findValueInMetricsAuditFn('observedDomContentLoaded'),
},
];
}
Expand Down
19 changes: 10 additions & 9 deletions lighthouse-core/test/audits/metrics-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,6 @@ describe('Performance: metrics', () => {
const result = await Audit.audit(artifacts, {settings});

assert.deepStrictEqual(result.details.items[0], {
metricName: 'firstContentfulPaint',
timing: 2038,
timestamp: undefined,
});

const metrics = {};
result.details.items.forEach(item => metrics[item.metricName] = Math.round(item.timing));

assert.deepStrictEqual(metrics, {
firstContentfulPaint: 2038,
firstMeaningfulPaint: 2851,
firstCPUIdle: 5308,
Expand All @@ -46,15 +37,25 @@ describe('Performance: metrics', () => {
estimatedInputLatency: 104,

observedNavigationStart: 0,
observedNavigationStartTs: 225414172015,
observedFirstPaint: 499,
observedFirstPaintTs: 225414670868,
observedFirstContentfulPaint: 499,
observedFirstContentfulPaintTs: 225414670885,
observedFirstMeaningfulPaint: 783,
observedFirstMeaningfulPaintTs: 225414955343,
observedTraceEnd: 12540,
observedTraceEndTs: 225426711887,
observedLoad: 2199,
observedLoadTs: 225416370913,
observedDomContentLoaded: 560,
observedDomContentLoadedTs: 225414732309,
observedFirstVisualChange: 520,
observedFirstVisualChangeTs: 225414692015,
observedLastVisualChange: 818,
observedLastVisualChangeTs: 225414990015,
observedSpeedIndex: 605,
observedSpeedIndexTs: 225414776724,
});
});
});
122 changes: 31 additions & 91 deletions lighthouse-core/test/results/sample_v2.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1491,99 +1491,39 @@
"description": "Metrics",
"helpText": "Collects all available metrics.",
"details": {
"type": "table",
"headings": [
{
"key": "metricName",
"itemType": "text",
"text": "Name"
},
{
"key": "timing",
"itemType": "ms",
"granularity": 10,
"text": "Value (ms)"
}
],
"items": [
{
"metricName": "firstContentfulPaint",
"timing": 3969,
"timestamp": 185607289047
},
{
"metricName": "firstMeaningfulPaint",
"timing": 3969,
"timestamp": 185607289048
},
{
"metricName": "firstCPUIdle",
"timing": 4927,
"timestamp": 185608247190
},
{
"metricName": "interactive",
"timing": 4927,
"timestamp": 185608247190
},
{
"metricName": "speedIndex",
"timing": 4417,
"timestamp": 185607736912
},
{
"metricName": "estimatedInputLatency",
"timing": 16
},
{
"metricName": "observedNavigationStart",
"timing": 0,
"timestamp": 185603319912
},
{
"metricName": "observedFirstPaint",
"timing": 3969.131,
"timestamp": 185607289043
},
{
"metricName": "observedFirstContentfulPaint",
"timing": 3969.135,
"timestamp": 185607289047
},
{
"metricName": "observedFirstMeaningfulPaint",
"timing": 3969.136,
"timestamp": 185607289048
},
{
"metricName": "observedTraceEnd",
"timing": 10281.277,
"timestamp": 185613601189
},
{
"metricName": "observedLoad",
"timing": 4924.462,
"timestamp": 185608244374
},
{
"metricName": "observedDomContentLoaded",
"timing": 4900.822,
"timestamp": 185608220734
},
{
"metricName": "observedFirstVisualChange",
"timing": 3969,
"timestamp": 185607288912
},
{
"metricName": "observedLastVisualChange",
"timing": 4791,
"timestamp": 185608110912
},
{
"metricName": "observedSpeedIndex",
"timing": 4416.851239995658,
"timestamp": 185607736763.24002
"firstContentfulPaint": 3969,
"firstContentfulPaintTs": 185607289047,
"firstMeaningfulPaint": 3969,
"firstMeaningfulPaintTs": 185607289048,
"firstCPUIdle": 4927,
"firstCPUIdleTs": 185608247190,
"interactive": 4927,
"interactiveTs": 185608247190,
"speedIndex": 4417,
"speedIndexTs": 185607736912,
"estimatedInputLatency": 16,
"observedNavigationStart": 0,
"observedNavigationStartTs": 185603319912,
"observedFirstPaint": 3969,
"observedFirstPaintTs": 185607289043,
"observedFirstContentfulPaint": 3969,
"observedFirstContentfulPaintTs": 185607289047,
"observedFirstMeaningfulPaint": 3969,
"observedFirstMeaningfulPaintTs": 185607289048,
"observedTraceEnd": 10281,
"observedTraceEndTs": 185613601189,
"observedLoad": 4924,
"observedLoadTs": 185608244374,
"observedDomContentLoaded": 4901,
"observedDomContentLoadedTs": 185608220734,
"observedFirstVisualChange": 3969,
"observedFirstVisualChangeTs": 185607288912,
"observedLastVisualChange": 4791,
"observedLastVisualChangeTs": 185608110912,
"observedSpeedIndex": 4417,
"observedSpeedIndexTs": 185607736763
}
]
}
Expand Down

0 comments on commit b732dc3

Please sign in to comment.