diff --git a/core/audits/metrics/interactive.js b/core/audits/metrics/interactive.js index e296cbdd0034..e52abd2f42b1 100644 --- a/core/audits/metrics/interactive.js +++ b/core/audits/metrics/interactive.js @@ -18,7 +18,7 @@ const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings); /** * @fileoverview This audit identifies the time the page is "consistently interactive". - * Looks for the first period of at least 5 seconds after FCP where both CPU and network were quiet, + * Looks for the first period of at least 5 seconds after LCP where both CPU and network were quiet, * and returns the timestamp of the beginning of the CPU quiet period. * @see https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit# */ diff --git a/core/computed/metrics/interactive.js b/core/computed/metrics/interactive.js index 2526490d025b..37ade20005a9 100644 --- a/core/computed/metrics/interactive.js +++ b/core/computed/metrics/interactive.js @@ -86,11 +86,13 @@ class Interactive extends NavigationMetric { * @return {{cpuQuietPeriod: TimePeriod, networkQuietPeriod: TimePeriod, cpuQuietPeriods: Array, networkQuietPeriods: Array}} */ static findOverlappingQuietPeriods(longTasks, networkRecords, processedNavigation) { - const FcpTsInMs = processedNavigation.timestamps.firstContentfulPaint / 1000; + const minTime = processedNavigation.timestamps.largestContentfulPaint !== undefined ? + processedNavigation.timestamps.largestContentfulPaint / 1000 : + processedNavigation.timestamps.firstContentfulPaint / 1000; /** @type {function(TimePeriod):boolean} */ const isLongEnoughQuietPeriod = period => - period.end > FcpTsInMs + REQUIRED_QUIET_WINDOW && + period.end > minTime + REQUIRED_QUIET_WINDOW && period.end - period.start >= REQUIRED_QUIET_WINDOW; const networkQuietPeriods = this._findNetworkQuietPeriods(networkRecords, processedNavigation) .filter(isLongEnoughQuietPeriod); diff --git a/core/test/computed/metrics/interactive-test.js b/core/test/computed/metrics/interactive-test.js index 8161a7cd1751..6f2c2f356cc7 100644 --- a/core/test/computed/metrics/interactive-test.js +++ b/core/test/computed/metrics/interactive-test.js @@ -93,10 +93,10 @@ describe('Metrics: TTI', () => { describe('#findOverlappingQuietPeriods', () => { it('should return entire range when no activity is present', () => { const timeOrigin = 220023532; - const firstContentfulPaint = 2500 * 1000 + timeOrigin; + const largestContentfulPaint = 2500 * 1000 + timeOrigin; const traceEnd = 10000 * 1000 + timeOrigin; const processedTrace = /** @type {LH.Artifacts.ProcessedNavigation} */ ( - {timestamps: {timeOrigin, firstContentfulPaint, traceEnd}} + {timestamps: {timeOrigin, largestContentfulPaint, traceEnd}} ); const network = generateNetworkRecords([], timeOrigin); @@ -105,7 +105,21 @@ describe('Metrics: TTI', () => { assert.deepEqual(result.networkQuietPeriod, {start: 0, end: traceEnd / 1000}); }); - it('should throw when trace ended too soon after FCP', () => { + it('should throw when trace ended too soon after LCP', () => { + const timeOrigin = 220023532; + const largestContentfulPaint = 2500 * 1000 + timeOrigin; + const traceEnd = 5000 * 1000 + timeOrigin; + const processedTrace = /** @type {LH.Artifacts.ProcessedNavigation} */ ( + {timestamps: {timeOrigin, largestContentfulPaint, traceEnd}} + ); + const network = generateNetworkRecords([], timeOrigin); + + assert.throws(() => { + Interactive.findOverlappingQuietPeriods([], network, processedTrace); + }, /NO.*IDLE_PERIOD/); + }); + + it('should throw when trace ended too soon after FCP (when LCP is missing)', () => { const timeOrigin = 220023532; const firstContentfulPaint = 2500 * 1000 + timeOrigin; const traceEnd = 5000 * 1000 + timeOrigin; @@ -183,14 +197,14 @@ describe('Metrics: TTI', () => { it('should find first overlapping quiet period', () => { const timeOrigin = 220023532; - const firstContentfulPaint = 10000 * 1000 + timeOrigin; + const largestContentfulPaint = 10000 * 1000 + timeOrigin; const traceEnd = 45000 * 1000 + timeOrigin; const processedTrace = /** @type {LH.Artifacts.ProcessedNavigation} */ ( - {timestamps: {timeOrigin, firstContentfulPaint, traceEnd}} + {timestamps: {timeOrigin, largestContentfulPaint, traceEnd}} ); const cpu = [ - // quiet period before FCP + // quiet period before LCP {start: 9000, end: 9900}, {start: 11000, end: 13000}, // quiet period during network activity