Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core(lightwallet): adds computed/timing-summary.js (refactor) #9814

Merged
merged 8 commits into from
Oct 22, 2019
Merged

core(lightwallet): adds computed/timing-summary.js (refactor) #9814

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
750bcf5
core(lightwallet): adds computed/timing-summary.js (refactor)
khempenius Oct 2, 2019
b9cd3c0
Merge branch 'master' of https://github.com/GoogleChrome/lighthouse i…
khempenius Oct 10, 2019
a381912
Add in LCP
khempenius Oct 10, 2019
9740271
Add debug info to LH.Artifacts.TimingSummary
khempenius Oct 10, 2019
b918783
Switch to nested format for TimingSummary object
khempenius Oct 11, 2019
e0ddea4
Update samples
khempenius Oct 15, 2019
52328e8
make timing-summary a computed artifact
khempenius Oct 16, 2019
4a3446a
Make DebugInfo a Record
khempenius Oct 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 9 additions & 124 deletions lighthouse-core/audits/metrics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,7 @@
'use strict';

const Audit = require('./audit.js');
const TraceOfTab = require('../computed/trace-of-tab.js');
const Speedline = require('../computed/speedline.js');
const FirstContentfulPaint = require('../computed/metrics/first-contentful-paint.js');
const FirstMeaningfulPaint = require('../computed/metrics/first-meaningful-paint.js');
const LargestContentfulPaint = require('../computed/metrics/largest-contentful-paint.js');
const FirstCPUIdle = require('../computed/metrics/first-cpu-idle.js');
const Interactive = require('../computed/metrics/interactive.js');
const SpeedIndex = require('../computed/metrics/speed-index.js');
const EstimatedInputLatency = require('../computed/metrics/estimated-input-latency.js');
const TotalBlockingTime = require('../computed/metrics/total-blocking-time.js');
const ComputedTimingSummary = require('../computed/metrics/timing-summary.js');

class Metrics extends Audit {
/**
Expand All @@ -39,79 +30,14 @@ class Metrics extends Audit {
static async audit(artifacts, context) {
const trace = artifacts.traces[Audit.DEFAULT_PASS];
const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
const metricComputationData = {trace, devtoolsLog, settings: context.settings};

/**
* @template TArtifacts
* @template TReturn
* @param {{request: (artifact: TArtifacts, context: LH.Audit.Context) => Promise<TReturn>}} Artifact
* @param {TArtifacts} artifact
* @return {Promise<TReturn|undefined>}
*/
const requestOrUndefined = (Artifact, artifact) => {
return Artifact.request(artifact, context).catch(_ => undefined);
};

const traceOfTab = await TraceOfTab.request(trace, context);
const speedline = await Speedline.request(trace, context);
const firstContentfulPaint = await FirstContentfulPaint.request(metricComputationData, context);
const firstMeaningfulPaint = await FirstMeaningfulPaint.request(metricComputationData, context);
const largestContentfulPaint = await requestOrUndefined(LargestContentfulPaint, metricComputationData); // eslint-disable-line max-len
const firstCPUIdle = await requestOrUndefined(FirstCPUIdle, metricComputationData);
const interactive = await requestOrUndefined(Interactive, metricComputationData);
const speedIndex = await requestOrUndefined(SpeedIndex, metricComputationData);
const estimatedInputLatency = await EstimatedInputLatency.request(metricComputationData, context); // eslint-disable-line max-len
const totalBlockingTime = await TotalBlockingTime.request(metricComputationData, context); // eslint-disable-line max-len

/** @type {UberMetricsItem} */
const metrics = {
// Include the simulated/observed performance metrics
firstContentfulPaint: firstContentfulPaint.timing,
firstContentfulPaintTs: firstContentfulPaint.timestamp,
firstMeaningfulPaint: firstMeaningfulPaint.timing,
firstMeaningfulPaintTs: firstMeaningfulPaint.timestamp,
largestContentfulPaint: largestContentfulPaint && largestContentfulPaint.timing,
largestContentfulPaintTs: largestContentfulPaint && largestContentfulPaint.timestamp,
firstCPUIdle: firstCPUIdle && firstCPUIdle.timing,
firstCPUIdleTs: firstCPUIdle && firstCPUIdle.timestamp,
interactive: interactive && interactive.timing,
interactiveTs: interactive && interactive.timestamp,
speedIndex: speedIndex && speedIndex.timing,
speedIndexTs: speedIndex && speedIndex.timestamp,
estimatedInputLatency: estimatedInputLatency.timing,
estimatedInputLatencyTs: estimatedInputLatency.timestamp,
totalBlockingTime: totalBlockingTime.timing,

// Include all timestamps of interest from trace of tab
observedNavigationStart: traceOfTab.timings.navigationStart,
observedNavigationStartTs: traceOfTab.timestamps.navigationStart,
observedFirstPaint: traceOfTab.timings.firstPaint,
observedFirstPaintTs: traceOfTab.timestamps.firstPaint,
observedFirstContentfulPaint: traceOfTab.timings.firstContentfulPaint,
observedFirstContentfulPaintTs: traceOfTab.timestamps.firstContentfulPaint,
observedFirstMeaningfulPaint: traceOfTab.timings.firstMeaningfulPaint,
observedFirstMeaningfulPaintTs: traceOfTab.timestamps.firstMeaningfulPaint,
observedLargestContentfulPaint: traceOfTab.timings.largestContentfulPaint,
observedLargestContentfulPaintTs: traceOfTab.timestamps.largestContentfulPaint,
observedTraceEnd: traceOfTab.timings.traceEnd,
observedTraceEndTs: traceOfTab.timestamps.traceEnd,
observedLoad: traceOfTab.timings.load,
observedLoadTs: traceOfTab.timestamps.load,
observedDomContentLoaded: traceOfTab.timings.domContentLoaded,
observedDomContentLoadedTs: traceOfTab.timestamps.domContentLoaded,

// Include some visual metrics from speedline
observedFirstVisualChange: speedline.first,
observedFirstVisualChangeTs: (speedline.first + speedline.beginning) * 1000,
observedLastVisualChange: speedline.complete,
observedLastVisualChangeTs: (speedline.complete + speedline.beginning) * 1000,
observedSpeedIndex: speedline.speedIndex,
observedSpeedIndexTs: (speedline.speedIndex + speedline.beginning) * 1000,
};
const summary = await ComputedTimingSummary
.request({trace, devtoolsLog}, context);
const metrics = summary.metrics;
khempenius marked this conversation as resolved.
Show resolved Hide resolved
const debugInfo = summary.debugInfo;

for (const [name, value] of Object.entries(metrics)) {
const key = /** @type {keyof UberMetricsItem} */ (name);
if (typeof value !== 'undefined') {
const key = /** @type {keyof LH.Artifacts.TimingSummary} */ (name);
if (typeof value === 'number') {
metrics[key] = Math.round(value);
}
}
Expand All @@ -120,56 +46,15 @@ class Metrics extends Audit {
const details = {
type: 'debugdata',
// TODO: Consider not nesting metrics under `items`.
items: [metrics, {lcpInvalidated: traceOfTab.lcpInvalidated}],
items: [metrics, debugInfo],
};

return {
score: 1,
numericValue: (interactive && interactive.timing) || 0,
numericValue: metrics.interactive || 0,
details,
};
}
}

/**
* @typedef UberMetricsItem
* @property {number} firstContentfulPaint
* @property {number=} firstContentfulPaintTs
* @property {number} firstMeaningfulPaint
* @property {number=} firstMeaningfulPaintTs
* @property {number=} largestContentfulPaint
* @property {number=} largestContentfulPaintTs
* @property {number=} firstCPUIdle
* @property {number=} firstCPUIdleTs
* @property {number=} interactive
* @property {number=} interactiveTs
* @property {number=} speedIndex
* @property {number=} speedIndexTs
* @property {number} estimatedInputLatency
* @property {number=} estimatedInputLatencyTs
* @property {number} totalBlockingTime
* @property {number} observedNavigationStart
* @property {number} observedNavigationStartTs
* @property {number=} observedFirstPaint
* @property {number=} observedFirstPaintTs
* @property {number} observedFirstContentfulPaint
* @property {number} observedFirstContentfulPaintTs
* @property {number=} observedFirstMeaningfulPaint
* @property {number=} observedFirstMeaningfulPaintTs
* @property {number=} observedLargestContentfulPaint
* @property {number=} observedLargestContentfulPaintTs
* @property {number=} observedTraceEnd
* @property {number=} observedTraceEndTs
* @property {number=} observedLoad
* @property {number=} observedLoadTs
* @property {number=} observedDomContentLoaded
* @property {number=} observedDomContentLoadedTs
* @property {number} observedFirstVisualChange
* @property {number} observedFirstVisualChangeTs
* @property {number} observedLastVisualChange
* @property {number} observedLastVisualChangeTs
* @property {number} observedSpeedIndex
* @property {number} observedSpeedIndexTs
*/

module.exports = Metrics;
111 changes: 111 additions & 0 deletions lighthouse-core/computed/metrics/timing-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
/**
* @license Copyright 2019 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
'use strict';

const TraceOfTab = require('../trace-of-tab.js');
const Speedline = require('../speedline.js');
const FirstContentfulPaint = require('./first-contentful-paint.js');
const FirstMeaningfulPaint = require('./first-meaningful-paint.js');
const LargestContentfulPaint = require('./largest-contentful-paint.js');
const FirstCPUIdle = require('./first-cpu-idle.js');
const Interactive = require('./interactive.js');
const SpeedIndex = require('./speed-index.js');
const EstimatedInputLatency = require('./estimated-input-latency.js');
const TotalBlockingTime = require('./total-blocking-time.js');
const makeComputedArtifact = require('../computed-artifact.js');

class TimingSummary {
/**
* @param {LH.Trace} trace
* @param {LH.DevtoolsLog} devtoolsLog
* @param {LH.Audit.Context} context
* @return {Promise<{metrics: LH.Artifacts.TimingSummary, debugInfo: Array<Record<string,boolean>>}>}
*/
static async summarize(trace, devtoolsLog, context) {
const metricComputationData = {trace, devtoolsLog, settings: context.settings};
/**
* @template TArtifacts
* @template TReturn
* @param {{request: (artifact: TArtifacts, context: LH.Audit.Context) => Promise<TReturn>}} Artifact
* @param {TArtifacts} artifact
* @return {Promise<TReturn|undefined>}
*/
const requestOrUndefined = (Artifact, artifact) => {
return Artifact.request(artifact, context).catch(_ => undefined);
};

const traceOfTab = await TraceOfTab.request(trace, context);
const speedline = await Speedline.request(trace, context);
const firstContentfulPaint = await FirstContentfulPaint.request(metricComputationData, context);
const firstMeaningfulPaint = await FirstMeaningfulPaint.request(metricComputationData, context);
const largestContentfulPaint = await requestOrUndefined(LargestContentfulPaint, metricComputationData); // eslint-disable-line max-len
const firstCPUIdle = await requestOrUndefined(FirstCPUIdle, metricComputationData);
const interactive = await requestOrUndefined(Interactive, metricComputationData);
const speedIndex = await requestOrUndefined(SpeedIndex, metricComputationData);
const estimatedInputLatency = await EstimatedInputLatency.request(metricComputationData, context); // eslint-disable-line max-len
const totalBlockingTime = await TotalBlockingTime.request(metricComputationData, context); // eslint-disable-line max-len

/** @type {LH.Artifacts.TimingSummary} */
const metrics = {
// Include the simulated/observed performance metrics
firstContentfulPaint: firstContentfulPaint.timing,
firstContentfulPaintTs: firstContentfulPaint.timestamp,
firstMeaningfulPaint: firstMeaningfulPaint.timing,
firstMeaningfulPaintTs: firstMeaningfulPaint.timestamp,
khempenius marked this conversation as resolved.
Show resolved Hide resolved
largestContentfulPaint: largestContentfulPaint && largestContentfulPaint.timing,
largestContentfulPaintTs: largestContentfulPaint && largestContentfulPaint.timestamp,
firstCPUIdle: firstCPUIdle && firstCPUIdle.timing,
firstCPUIdleTs: firstCPUIdle && firstCPUIdle.timestamp,
interactive: interactive && interactive.timing,
interactiveTs: interactive && interactive.timestamp,
speedIndex: speedIndex && speedIndex.timing,
speedIndexTs: speedIndex && speedIndex.timestamp,
estimatedInputLatency: estimatedInputLatency.timing,
estimatedInputLatencyTs: estimatedInputLatency.timestamp,
totalBlockingTime: totalBlockingTime.timing,

// Include all timestamps of interest from trace of tab
observedNavigationStart: traceOfTab.timings.navigationStart,
observedNavigationStartTs: traceOfTab.timestamps.navigationStart,
observedFirstPaint: traceOfTab.timings.firstPaint,
observedFirstPaintTs: traceOfTab.timestamps.firstPaint,
observedFirstContentfulPaint: traceOfTab.timings.firstContentfulPaint,
observedFirstContentfulPaintTs: traceOfTab.timestamps.firstContentfulPaint,
observedFirstMeaningfulPaint: traceOfTab.timings.firstMeaningfulPaint,
observedFirstMeaningfulPaintTs: traceOfTab.timestamps.firstMeaningfulPaint,
observedLargestContentfulPaint: traceOfTab.timings.largestContentfulPaint,
observedLargestContentfulPaintTs: traceOfTab.timestamps.largestContentfulPaint,
observedTraceEnd: traceOfTab.timings.traceEnd,
observedTraceEndTs: traceOfTab.timestamps.traceEnd,
observedLoad: traceOfTab.timings.load,
observedLoadTs: traceOfTab.timestamps.load,
observedDomContentLoaded: traceOfTab.timings.domContentLoaded,
observedDomContentLoadedTs: traceOfTab.timestamps.domContentLoaded,

// Include some visual metrics from speedline
observedFirstVisualChange: speedline.first,
observedFirstVisualChangeTs: (speedline.first + speedline.beginning) * 1000,
observedLastVisualChange: speedline.complete,
observedLastVisualChangeTs: (speedline.complete + speedline.beginning) * 1000,
observedSpeedIndex: speedline.speedIndex,
observedSpeedIndexTs: (speedline.speedIndex + speedline.beginning) * 1000,
};
/** @type {Array<Record<string,boolean>>} */
const debugInfo = [{lcpInvalidated: traceOfTab.lcpInvalidated}];

return {metrics, debugInfo};
}
/**
* @param {{trace: LH.Trace, devtoolsLog: LH.DevtoolsLog}} data
khempenius marked this conversation as resolved.
Show resolved Hide resolved
* @param {LH.Audit.Context} context
* @return {Promise<{metrics: LH.Artifacts.TimingSummary, debugInfo: Array<Record<string,boolean>>}>}
*/
static async compute_(data, context) {
return TimingSummary.summarize(data.trace, data.devtoolsLog, context);
}
}

module.exports = makeComputedArtifact(TimingSummary);
6 changes: 2 additions & 4 deletions lighthouse-core/lib/traces/pwmetrics-events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@

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

/** @typedef {import('../../audits/metrics.js').UberMetricsItem} UberMetricsItem */

/**
* @param {LH.Audit.Results} auditResults
* @return {UberMetricsItem|undefined}
* @return {LH.Artifacts.TimingSummary|undefined}
*/
function getUberMetrics(auditResults) {
const metricsAudit = auditResults.metrics;
Expand All @@ -32,7 +30,7 @@ class Metrics {

/**
* Returns simplified representation of all metrics
* @return {Array<{id: string, name: string, tsKey: keyof UberMetricsItem}>} metrics to consider
* @return {Array<{id: string, name: string, tsKey: keyof LH.Artifacts.TimingSummary}>} metrics to consider
*/
static get metricsDefinitions() {
return [
Expand Down
69 changes: 69 additions & 0 deletions lighthouse-core/test/computed/metrics/timing-summary-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/**
* @license Copyright 2019 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
'use strict';

const TimingSummary = require('../../../computed/metrics/timing-summary.js');

const trace = require('../../fixtures/traces/progressive-app-m60.json');
const devtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json');

/* eslint-env jest */
describe('Timing summary', () => {
it('contains the correct data', async () => {
const context = {settings: {throttlingMethod: 'simulate'}, computedCache: new Map()};
const result = await TimingSummary.request({trace, devtoolsLog}, context);

expect(result.metrics).toMatchInlineSnapshot(`
Object {
"estimatedInputLatency": 77.79999999999995,
"estimatedInputLatencyTs": undefined,
"firstCPUIdle": 3351.3320000492968,
"firstCPUIdleTs": undefined,
"firstContentfulPaint": 1306.6100000208244,
"firstContentfulPaintTs": undefined,
"firstMeaningfulPaint": 1510.6100000208241,
"firstMeaningfulPaintTs": undefined,
"interactive": 3426.8545000551967,
"interactiveTs": undefined,
"largestContentfulPaint": undefined,
"largestContentfulPaintTs": undefined,
"observedDomContentLoaded": 560.294,
"observedDomContentLoadedTs": 225414732309,
"observedFirstContentfulPaint": 498.87,
"observedFirstContentfulPaintTs": 225414670885,
"observedFirstMeaningfulPaint": 783.328,
"observedFirstMeaningfulPaintTs": 225414955343,
"observedFirstPaint": 498.853,
"observedFirstPaintTs": 225414670868,
"observedFirstVisualChange": 520,
"observedFirstVisualChangeTs": 225414692015,
"observedLargestContentfulPaint": undefined,
"observedLargestContentfulPaintTs": undefined,
"observedLastVisualChange": 818,
"observedLastVisualChangeTs": 225414990015,
"observedLoad": 2198.898,
"observedLoadTs": 225416370913,
"observedNavigationStart": 0,
"observedNavigationStartTs": 225414172015,
"observedSpeedIndex": 604.7093900063634,
"observedSpeedIndexTs": 225414776724.39,
"observedTraceEnd": 12539.872,
"observedTraceEndTs": 225426711887,
"speedIndex": 1656.6335047609864,
"speedIndexTs": undefined,
"totalBlockingTime": 726.4774999940996,
}
`);
// Includes performance metrics
expect(result.metrics.firstContentfulPaint).toBeDefined();
// Includes timestamps from trace of tab
expect(result.metrics.observedFirstContentfulPaint).toBeDefined();
// Includs visual metrics from Speedline
expect(result.metrics.observedFirstVisualChange).toBeDefined();

expect(result.debugInfo).toEqual([{'lcpInvalidated': false}]);
});
});
Loading