diff --git a/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js index b1198ad635fe..f516118b7e97 100644 --- a/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js +++ b/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js @@ -330,7 +330,7 @@ module.exports = [ largestContentfulPaintAllFrames: '<5000', cumulativeLayoutShift: '0.197 +/- 0.001', cumulativeLayoutShiftMainFrame: '0.001 +/- 0.0005', - oldCumulativeLayoutShift: '0.001 +/- 0.0005', + totalCumulativeLayoutShift: '0.001 +/- 0.0005', }, { lcpInvalidated: false, diff --git a/lighthouse-core/audits/metrics.js b/lighthouse-core/audits/metrics.js index aa3f5976e0dc..2afb9c845bb3 100644 --- a/lighthouse-core/audits/metrics.js +++ b/lighthouse-core/audits/metrics.js @@ -12,10 +12,10 @@ const ComputedTimingSummary = require('../computed/metrics/timing-summary.js'); const DECIMAL_METRIC_KEYS = new Set([ 'cumulativeLayoutShift', 'cumulativeLayoutShiftMainFrame', - 'oldCumulativeLayoutShift', + 'totalCumulativeLayoutShift', 'observedCumulativeLayoutShift', 'observedCumulativeLayoutShiftMainFrame', - 'observedOldCumulativeLayoutShift', + 'observedTotalCumulativeLayoutShift', ]); class Metrics extends Audit { diff --git a/lighthouse-core/computed/metrics/cumulative-layout-shift.js b/lighthouse-core/computed/metrics/cumulative-layout-shift.js index fc40a06f72c9..110652d24a18 100644 --- a/lighthouse-core/computed/metrics/cumulative-layout-shift.js +++ b/lighthouse-core/computed/metrics/cumulative-layout-shift.js @@ -94,19 +94,18 @@ class CumulativeLayoutShift { } /** - * Calculates the original Cumulative Layout Shift metric, summing main-frame - * layout-shift events from the entire trace. + * Sum all layout shift events from the entire trace. * @param {Array} layoutShiftEvents * @return {number} */ - static calculateOldCumulativeLayoutShift(layoutShiftEvents) { + static calculateTotalCumulativeLayoutShift(layoutShiftEvents) { return layoutShiftEvents.reduce((sum, e) => sum += e.weightedScore, 0); } /** * @param {LH.Trace} trace * @param {LH.Artifacts.ComputedContext} context - * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, oldCumulativeLayoutShift: number}>} + * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, totalCumulativeLayoutShift: number}>} */ static async compute_(trace, context) { const traceOfTab = await TraceOfTab.request(trace, context); @@ -115,14 +114,14 @@ class CumulativeLayoutShift { CumulativeLayoutShift.getLayoutShiftEvents(traceOfTab.frameTreeEvents); const mainFrameShiftEvents = allFrameShiftEvents.filter(e => e.isMainFrame); - // The original Cumulative Layout Shift metric, the sum of main-frame shift events from the entire trace. - const oldCumulativeLayoutShift = mainFrameShiftEvents - .reduce((sum, e) => sum += e.weightedScore, 0); + // The original Cumulative Layout Shift metric, the sum of all main-frame shift events. + const totalCumulativeLayoutShift = + CumulativeLayoutShift.calculateTotalCumulativeLayoutShift(mainFrameShiftEvents); return { cumulativeLayoutShift: CumulativeLayoutShift.calculate(allFrameShiftEvents), cumulativeLayoutShiftMainFrame: CumulativeLayoutShift.calculate(mainFrameShiftEvents), - oldCumulativeLayoutShift, + totalCumulativeLayoutShift, }; } } diff --git a/lighthouse-core/computed/metrics/timing-summary.js b/lighthouse-core/computed/metrics/timing-summary.js index 23729cdfb1b7..10b46ab257b1 100644 --- a/lighthouse-core/computed/metrics/timing-summary.js +++ b/lighthouse-core/computed/metrics/timing-summary.js @@ -60,7 +60,7 @@ class TimingSummary { const { cumulativeLayoutShift, cumulativeLayoutShiftMainFrame, - oldCumulativeLayoutShift, + totalCumulativeLayoutShift, } = cumulativeLayoutShiftValues || {}; /** @type {LH.Artifacts.TimingSummary} */ @@ -88,7 +88,7 @@ class TimingSummary { maxPotentialFID: maxPotentialFID && maxPotentialFID.timing, cumulativeLayoutShift, cumulativeLayoutShiftMainFrame, - oldCumulativeLayoutShift, + totalCumulativeLayoutShift, // Include all timestamps of interest from trace of tab observedTimeOrigin: traceOfTab.timings.timeOrigin, @@ -117,7 +117,7 @@ class TimingSummary { observedDomContentLoadedTs: traceOfTab.timestamps.domContentLoaded, observedCumulativeLayoutShift: cumulativeLayoutShift, observedCumulativeLayoutShiftMainFrame: cumulativeLayoutShiftMainFrame, - observedOldCumulativeLayoutShift: oldCumulativeLayoutShift, + observedTotalCumulativeLayoutShift: totalCumulativeLayoutShift, // Include some visual metrics from speedline observedFirstVisualChange: speedline.first, diff --git a/lighthouse-core/test/audits/__snapshots__/metrics-test.js.snap b/lighthouse-core/test/audits/__snapshots__/metrics-test.js.snap index c0c3f88688ad..486a3afbd2e1 100644 --- a/lighthouse-core/test/audits/__snapshots__/metrics-test.js.snap +++ b/lighthouse-core/test/audits/__snapshots__/metrics-test.js.snap @@ -45,17 +45,17 @@ Object { "observedLoadTs": 23466696096, "observedNavigationStart": 0, "observedNavigationStartTs": 23466023130, - "observedOldCumulativeLayoutShift": undefined, "observedSpeedIndex": 1583, "observedSpeedIndexTs": 23467605703, "observedTimeOrigin": 0, "observedTimeOriginTs": 23466023130, + "observedTotalCumulativeLayoutShift": undefined, "observedTraceEnd": 6006, "observedTraceEndTs": 23472029453, - "oldCumulativeLayoutShift": undefined, "speedIndex": 1583, "speedIndexTs": 23467606130, "totalBlockingTime": 0, + "totalCumulativeLayoutShift": undefined, } `; @@ -104,17 +104,17 @@ Object { "observedLoadTs": 713039182071, "observedNavigationStart": 0, "observedNavigationStartTs": 713037023064, - "observedOldCumulativeLayoutShift": 0, "observedSpeedIndex": 1393, "observedSpeedIndexTs": 713038416494, "observedTimeOrigin": 0, "observedTimeOriginTs": 713037023064, + "observedTotalCumulativeLayoutShift": 0, "observedTraceEnd": 7416, "observedTraceEndTs": 713044439102, - "oldCumulativeLayoutShift": 0, "speedIndex": 3681, "speedIndexTs": undefined, "totalBlockingTime": 1205, + "totalCumulativeLayoutShift": 0, } `; @@ -163,17 +163,17 @@ Object { "observedLoadTs": 225416370913, "observedNavigationStart": 0, "observedNavigationStartTs": 225414172015, - "observedOldCumulativeLayoutShift": 0, "observedSpeedIndex": 605, "observedSpeedIndexTs": 225414776724, "observedTimeOrigin": 0, "observedTimeOriginTs": 225414172015, + "observedTotalCumulativeLayoutShift": 0, "observedTraceEnd": 12540, "observedTraceEndTs": 225426711887, - "oldCumulativeLayoutShift": 0, "speedIndex": 605, "speedIndexTs": 225414777015, "totalBlockingTime": 48, + "totalCumulativeLayoutShift": 0, } `; @@ -222,16 +222,16 @@ Object { "observedLoadTs": 225416370913, "observedNavigationStart": 0, "observedNavigationStartTs": 225414172015, - "observedOldCumulativeLayoutShift": 0, "observedSpeedIndex": 605, "observedSpeedIndexTs": 225414776724, "observedTimeOrigin": 0, "observedTimeOriginTs": 225414172015, + "observedTotalCumulativeLayoutShift": 0, "observedTraceEnd": 12540, "observedTraceEndTs": 225426711887, - "oldCumulativeLayoutShift": 0, "speedIndex": 1676, "speedIndexTs": undefined, "totalBlockingTime": 777, + "totalCumulativeLayoutShift": 0, } `; diff --git a/lighthouse-core/test/audits/metrics-test.js b/lighthouse-core/test/audits/metrics-test.js index a204257fb422..93f8f3f7e743 100644 --- a/lighthouse-core/test/audits/metrics-test.js +++ b/lighthouse-core/test/audits/metrics-test.js @@ -101,10 +101,10 @@ describe('Performance: metrics', () => { expect(details.items[0]).toMatchObject({ cumulativeLayoutShift: undefined, cumulativeLayoutShiftMainFrame: undefined, - oldCumulativeLayoutShift: undefined, + totalCumulativeLayoutShift: undefined, observedCumulativeLayoutShift: undefined, observedCumulativeLayoutShiftMainFrame: undefined, - observedOldCumulativeLayoutShift: undefined, + observedTotalCumulativeLayoutShift: undefined, }); }); @@ -125,11 +125,11 @@ describe('Performance: metrics', () => { expect(details.items[0]).toMatchObject({ cumulativeLayoutShift: expect.toBeApproximately(0.026463, 6), cumulativeLayoutShiftMainFrame: expect.toBeApproximately(0.001166, 6), - oldCumulativeLayoutShift: expect.toBeApproximately(0.001166, 6), + totalCumulativeLayoutShift: expect.toBeApproximately(0.001166, 6), observedCumulativeLayoutShift: expect.toBeApproximately(0.026463, 6), observedCumulativeLayoutShiftMainFrame: expect.toBeApproximately(0.001166, 6), - observedOldCumulativeLayoutShift: expect.toBeApproximately(0.001166, 6), + observedTotalCumulativeLayoutShift: expect.toBeApproximately(0.001166, 6), }); }); @@ -165,11 +165,11 @@ describe('Performance: metrics', () => { expect(details.items[0]).toMatchObject({ cumulativeLayoutShift: expect.toBeApproximately(2.268816, 6), cumulativeLayoutShiftMainFrame: expect.toBeApproximately(2.268816, 6), - oldCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), + totalCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), observedCumulativeLayoutShift: expect.toBeApproximately(2.268816, 6), observedCumulativeLayoutShiftMainFrame: expect.toBeApproximately(2.268816, 6), - observedOldCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), + observedTotalCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), }); }); }); diff --git a/lighthouse-core/test/audits/metrics/cumulative-layout-shift-test.js b/lighthouse-core/test/audits/metrics/cumulative-layout-shift-test.js index 80662bf160d2..67875589a6c7 100644 --- a/lighthouse-core/test/audits/metrics/cumulative-layout-shift-test.js +++ b/lighthouse-core/test/audits/metrics/cumulative-layout-shift-test.js @@ -32,7 +32,7 @@ describe('Cumulative Layout Shift', () => { type: 'debugdata', items: [{ cumulativeLayoutShiftMainFrame: expect.toBeApproximately(2.268816, 6), - oldCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), + totalCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), }], }, }); diff --git a/lighthouse-core/test/computed/metrics/cumulative-layout-shift-test.js b/lighthouse-core/test/computed/metrics/cumulative-layout-shift-test.js index 33ef07874c78..4ac4835a489d 100644 --- a/lighthouse-core/test/computed/metrics/cumulative-layout-shift-test.js +++ b/lighthouse-core/test/computed/metrics/cumulative-layout-shift-test.js @@ -27,7 +27,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: expect.toBeApproximately(2.268816, 6), cumulativeLayoutShiftMainFrame: expect.toBeApproximately(2.268816, 6), - oldCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), + totalCumulativeLayoutShift: expect.toBeApproximately(4.809794, 6), }); }); @@ -41,7 +41,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 0.026463014612806653, cumulativeLayoutShiftMainFrame: 0.0011656245471340055, - oldCumulativeLayoutShift: 0.0011656245471340055, + totalCumulativeLayoutShift: 0.0011656245471340055, }); }); @@ -50,7 +50,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 0, cumulativeLayoutShiftMainFrame: 0, - oldCumulativeLayoutShift: 0, + totalCumulativeLayoutShift: 0, }); }); }); @@ -124,7 +124,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 4, cumulativeLayoutShiftMainFrame: 4, - oldCumulativeLayoutShift: 4, + totalCumulativeLayoutShift: 4, }); }); @@ -141,7 +141,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 3, cumulativeLayoutShiftMainFrame: 3, - oldCumulativeLayoutShift: 3, + totalCumulativeLayoutShift: 3, }); }); @@ -159,7 +159,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 0.75, cumulativeLayoutShiftMainFrame: 0.75, - oldCumulativeLayoutShift: 3.75, // 30 * 0.125 + totalCumulativeLayoutShift: 3.75, // 30 * 0.125 }); }); @@ -184,7 +184,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 1.0625, cumulativeLayoutShiftMainFrame: 1.0625, - oldCumulativeLayoutShift: 1.375, + totalCumulativeLayoutShift: 1.375, }); }); @@ -202,7 +202,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 3.75, // 30 * 0.125 cumulativeLayoutShiftMainFrame: 3.75, - oldCumulativeLayoutShift: 3.75, + totalCumulativeLayoutShift: 3.75, }); }); @@ -226,7 +226,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 5, cumulativeLayoutShiftMainFrame: 5, - oldCumulativeLayoutShift: 5, + totalCumulativeLayoutShift: 5, }); }); }); @@ -247,7 +247,7 @@ describe('Metrics: CLS', () => { expect(result).toEqual({ cumulativeLayoutShift: 0.75, // Same value as single-frame uniformly distributed. cumulativeLayoutShiftMainFrame: 0.125, // All 1s gaps, so only one event per cluster. - oldCumulativeLayoutShift: 1.875, // 0.125 * 15 + totalCumulativeLayoutShift: 1.875, // 0.125 * 15 }); }); @@ -276,7 +276,7 @@ describe('Metrics: CLS', () => { expect(result).toMatchObject({ cumulativeLayoutShift: 6, cumulativeLayoutShiftMainFrame: 3, - oldCumulativeLayoutShift: 3, + totalCumulativeLayoutShift: 3, }); }); @@ -292,7 +292,7 @@ describe('Metrics: CLS', () => { expect(result).toMatchObject({ cumulativeLayoutShift: 4, cumulativeLayoutShiftMainFrame: 2, - oldCumulativeLayoutShift: 2, + totalCumulativeLayoutShift: 2, }); }); @@ -322,7 +322,7 @@ describe('Metrics: CLS', () => { expect(result).toMatchObject({ cumulativeLayoutShift: 3, cumulativeLayoutShiftMainFrame: 1, - oldCumulativeLayoutShift: 1, + totalCumulativeLayoutShift: 1, }); }); }); @@ -342,7 +342,7 @@ describe('Metrics: CLS', () => { expect(result).toMatchObject({ cumulativeLayoutShift: 6, cumulativeLayoutShiftMainFrame: 6, - oldCumulativeLayoutShift: 6, + totalCumulativeLayoutShift: 6, }); }); @@ -361,7 +361,7 @@ describe('Metrics: CLS', () => { expect(result).toMatchObject({ cumulativeLayoutShift: 6, cumulativeLayoutShiftMainFrame: 1, - oldCumulativeLayoutShift: 4, + totalCumulativeLayoutShift: 4, }); }); @@ -375,7 +375,7 @@ describe('Metrics: CLS', () => { expect(result).toMatchObject({ cumulativeLayoutShift: 2, cumulativeLayoutShiftMainFrame: 2, - oldCumulativeLayoutShift: 2, + totalCumulativeLayoutShift: 2, }); }); @@ -389,7 +389,7 @@ describe('Metrics: CLS', () => { expect(result).toMatchObject({ cumulativeLayoutShift: 2, cumulativeLayoutShiftMainFrame: 1, - oldCumulativeLayoutShift: 1, + totalCumulativeLayoutShift: 1, }); }); }); diff --git a/lighthouse-core/test/computed/metrics/timing-summary-test.js b/lighthouse-core/test/computed/metrics/timing-summary-test.js index 99e213ed0bd0..d77c0b945ab4 100644 --- a/lighthouse-core/test/computed/metrics/timing-summary-test.js +++ b/lighthouse-core/test/computed/metrics/timing-summary-test.js @@ -62,17 +62,17 @@ describe('Timing summary', () => { "observedLoadTs": 10327876093, "observedNavigationStart": 0, "observedNavigationStartTs": 10327187909, - "observedOldCumulativeLayoutShift": 0.0011656245471340055, "observedSpeedIndex": 1334.5801200005412, "observedSpeedIndexTs": 10328522489.12, "observedTimeOrigin": 0, "observedTimeOriginTs": 10327187909, + "observedTotalCumulativeLayoutShift": 0.0011656245471340055, "observedTraceEnd": 14214.313, "observedTraceEndTs": 10341402222, - "oldCumulativeLayoutShift": 0.0011656245471340055, "speedIndex": 1335, "speedIndexTs": 10328522909, "totalBlockingTime": 2.7429999999994834, + "totalCumulativeLayoutShift": 0.0011656245471340055, } `); // Includes performance metrics diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 2073624082bf..d717ac5d23e8 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -225,7 +225,7 @@ "items": [ { "cumulativeLayoutShiftMainFrame": 0.42, - "oldCumulativeLayoutShift": 0.42 + "totalCumulativeLayoutShift": 0.42 } ] } @@ -1474,7 +1474,7 @@ "maxPotentialFID": 123, "cumulativeLayoutShift": 0.42, "cumulativeLayoutShiftMainFrame": 0.42, - "oldCumulativeLayoutShift": 0.42, + "totalCumulativeLayoutShift": 0.42, "observedTimeOrigin": 0, "observedTimeOriginTs": 185603319912, "observedNavigationStart": 0, @@ -1499,7 +1499,7 @@ "observedDomContentLoadedTs": 185608220734, "observedCumulativeLayoutShift": 0.42, "observedCumulativeLayoutShiftMainFrame": 0.42, - "observedOldCumulativeLayoutShift": 0.42, + "observedTotalCumulativeLayoutShift": 0.42, "observedFirstVisualChange": 3969, "observedFirstVisualChangeTs": 185607288912, "observedLastVisualChange": 4791, diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts index 31b22cd84c05..711c5a1c7daf 100644 --- a/types/artifacts.d.ts +++ b/types/artifacts.d.ts @@ -748,7 +748,7 @@ declare global { maxPotentialFID: number | undefined; cumulativeLayoutShift: number | undefined; cumulativeLayoutShiftMainFrame: number | undefined; - oldCumulativeLayoutShift: number | undefined; + totalCumulativeLayoutShift: number | undefined; totalBlockingTime: number; observedTimeOrigin: number; observedTimeOriginTs: number; @@ -756,7 +756,7 @@ declare global { observedNavigationStartTs: number; observedCumulativeLayoutShift: number | undefined; observedCumulativeLayoutShiftMainFrame: number | undefined; - observedOldCumulativeLayoutShift: number | undefined; + observedTotalCumulativeLayoutShift: number | undefined; observedFirstPaint: number | undefined; observedFirstPaintTs: number | undefined; observedFirstContentfulPaint: number;