core(metrics): support FCP for all frames with devtools throttling

lighthouse-core/computed/metrics/first-contentful-paint-all-frames.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright 2020 The Lighthouse Authors. 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 makeComputedArtifact = require('../computed-artifact.js');
+const ComputedMetric = require('./metric.js');
+
+class FirstContentfulPaintAllFrames extends ComputedMetric {
+  /**
+   * @return {Promise<LH.Artifacts.LanternMetric>}
+   */
+  static computeSimulatedMetric() {
+    // TODO: Add support for all frames in lantern.
+    throw new Error('FCP All Frames not implemented in lantern');
+  }
+
+  /**
+   * @param {LH.Artifacts.MetricComputationData} data
+   * @return {Promise<LH.Artifacts.Metric>}
+   */
+  static async computeObservedMetric(data) {
+    const {traceOfTab} = data;
+
+    return {
+      timing: traceOfTab.timings.firstContentfulPaintAllFrames,
+      timestamp: traceOfTab.timestamps.firstContentfulPaintAllFrames,
+    };
+  }
+}
+
+module.exports = makeComputedArtifact(FirstContentfulPaintAllFrames);

lighthouse-core/computed/metrics/timing-summary.js

@@ -8,6 +8,7 @@
 const TraceOfTab = require('../trace-of-tab.js');
 const Speedline = require('../speedline.js');
 const FirstContentfulPaint = require('./first-contentful-paint.js');
+const FirstContentfulPaintAllFrames = require('./first-contentful-paint-all-frames.js');
 const FirstMeaningfulPaint = require('./first-meaningful-paint.js');
 const LargestContentfulPaint = require('./largest-contentful-paint.js');
 const LargestContentfulPaintAllFrames = require('./largest-contentful-paint-all-frames.js');
@@ -44,6 +45,7 @@ class TimingSummary {
     const traceOfTab = await TraceOfTab.request(trace, context);
     const speedline = await Speedline.request(trace, context);
     const firstContentfulPaint = await FirstContentfulPaint.request(metricComputationData, context);
+    const firstContentfulPaintAllFrames = await requestOrUndefined(FirstContentfulPaintAllFrames, metricComputationData); // eslint-disable-line max-len
     const firstMeaningfulPaint = await FirstMeaningfulPaint.request(metricComputationData, context);
     const largestContentfulPaint = await requestOrUndefined(LargestContentfulPaint, metricComputationData); // eslint-disable-line max-len
     const largestContentfulPaintAllFrames = await requestOrUndefined(LargestContentfulPaintAllFrames, metricComputationData); // eslint-disable-line max-len
@@ -67,6 +69,8 @@ class TimingSummary {
       // Include the simulated/observed performance metrics
       firstContentfulPaint: firstContentfulPaint.timing,
       firstContentfulPaintTs: firstContentfulPaint.timestamp,
+      firstContentfulPaintAllFrames: firstContentfulPaintAllFrames && firstContentfulPaintAllFrames.timing, // eslint-disable-line max-len
+      firstContentfulPaintAllFramesTs: firstContentfulPaintAllFrames && firstContentfulPaintAllFrames.timestamp, // eslint-disable-line max-len
       firstMeaningfulPaint: firstMeaningfulPaint.timing,
       firstMeaningfulPaintTs: firstMeaningfulPaint.timestamp,
       largestContentfulPaint: largestContentfulPaint && largestContentfulPaint.timing,
@@ -97,6 +101,8 @@ class TimingSummary {
       observedFirstPaintTs: traceOfTab.timestamps.firstPaint,
       observedFirstContentfulPaint: traceOfTab.timings.firstContentfulPaint,
       observedFirstContentfulPaintTs: traceOfTab.timestamps.firstContentfulPaint,
+      observedFirstContentfulPaintAllFrames: traceOfTab.timings.firstContentfulPaintAllFrames,
+      observedFirstContentfulPaintAllFramesTs: traceOfTab.timestamps.firstContentfulPaintAllFrames,
       observedFirstMeaningfulPaint: traceOfTab.timings.firstMeaningfulPaint,
       observedFirstMeaningfulPaintTs: traceOfTab.timestamps.firstMeaningfulPaint,
       observedLargestContentfulPaint: traceOfTab.timings.largestContentfulPaint,

lighthouse-core/computed/trace-of-tab.js

@@ -50,13 +50,30 @@ class TraceOfTab {
     // We'll check that we got an FCP here and re-type accordingly so all of our consumers don't
     // have to repeat this check.
     const traceOfTab = await LHTraceProcessor.computeTraceOfTab(trace);
-    const {timings, timestamps, firstContentfulPaintEvt} = traceOfTab;
-    const {firstContentfulPaint: firstContentfulPaintTiming} = timings;
-    const {firstContentfulPaint: firstContentfulPaintTs} = timestamps;
+    const {
+      timings,
+      timestamps,
+      firstContentfulPaintEvt,
+      firstContentfulPaintAllFramesEvt,
+    } = traceOfTab;
+    const {
+      firstContentfulPaint: firstContentfulPaintTiming,
+      firstContentfulPaintAllFrames: firstContentfulPaintAllFramesTiming,
+    } = timings;
+    const {
+      firstContentfulPaint: firstContentfulPaintTs,
+      firstContentfulPaintAllFrames: firstContentfulPaintAllFramesTs,
+    } = timestamps;
+
     if (
       !firstContentfulPaintEvt ||
       firstContentfulPaintTiming === undefined ||
-      firstContentfulPaintTs === undefined
+      firstContentfulPaintTs === undefined ||
+      // FCP-AF will only be undefined if FCP is also undefined.
+      // These conditions are for enforcing types and should never actually trigger.
+      !firstContentfulPaintAllFramesEvt ||
+      firstContentfulPaintAllFramesTiming === undefined ||
+      firstContentfulPaintAllFramesTs === undefined
     ) {
       throw new LHError(LHError.errors.NO_FCP);
     }
@@ -66,8 +83,17 @@ class TraceOfTab {
     return {
       ...traceOfTab,
       firstContentfulPaintEvt,
-      timings: {...timings, firstContentfulPaint: firstContentfulPaintTiming},
-      timestamps: {...timestamps, firstContentfulPaint: firstContentfulPaintTs},
+      firstContentfulPaintAllFramesEvt,
+      timings: {
+        ...timings,
+        firstContentfulPaint: firstContentfulPaintTiming,
+        firstContentfulPaintAllFrames: firstContentfulPaintAllFramesTiming,
+      },
+      timestamps: {
+        ...timestamps,
+        firstContentfulPaint: firstContentfulPaintTs,
+        firstContentfulPaintAllFrames: firstContentfulPaintAllFramesTs,
+      },
     };
   }
 }

lighthouse-core/lib/tracehouse/trace-processor.js

@@ -16,9 +16,9 @@
  * 4. Return all those items in one handy bundle.
  */
 
-/** @typedef {Omit<LH.Artifacts.TraceTimes, 'firstContentfulPaint'> & {firstContentfulPaint?: number}} TraceTimesWithoutFCP */
+/** @typedef {Omit<LH.Artifacts.TraceTimes, 'firstContentfulPaint'|'firstContentfulPaintAllFrames'> & {firstContentfulPaint?: number, firstContentfulPaintAllFrames?: number}} TraceTimesWithoutFCP */
 /** @typedef {Omit<TraceTimesWithoutFCP, 'traceEnd'>} TraceTimesWithoutFCPAndTraceEnd */
-/** @typedef {Omit<LH.Artifacts.TraceOfTab, 'firstContentfulPaintEvt'|'timings'|'timestamps'> & {timings: TraceTimesWithoutFCP, timestamps: TraceTimesWithoutFCP, firstContentfulPaintEvt?: LH.Artifacts.TraceOfTab['firstContentfulPaintEvt']}} TraceOfTabWithoutFCP */
+/** @typedef {Omit<LH.Artifacts.TraceOfTab, 'firstContentfulPaintEvt'|'firstContentfulPaintAllFramesEvt'|'timings'|'timestamps'> & {timings: TraceTimesWithoutFCP, timestamps: TraceTimesWithoutFCP, firstContentfulPaintEvt?: LH.Artifacts.TraceOfTab['firstContentfulPaintEvt'], firstContentfulPaintAllFramesEvt?: LH.Artifacts.TraceOfTab['largestContentfulPaintAllFramesEvt']}} TraceOfTabWithoutFCP */
 /** @typedef {'lastNavigationStart'|'firstResourceSendRequest'} TimeOriginDeterminationMethod */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'FrameCommittedInBrowser', args: {data: {frame: string, url: string, parent?: string}}}} FrameCommittedEvent */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Invalidate'|'largestContentfulPaint::Candidate', args: {data?: {size?: number}, frame: string}}} LCPEvent */
@@ -611,15 +611,22 @@ class TraceProcessor {
       });
     const frameIdToRootFrameId = this.resolveRootFrames(frames);
 
-    // Filter to just events matching the frame ID, just to make sure.
+    // Filter to just events matching the main frame ID, just to make sure.
     const frameEvents = keyEvents.filter(e => e.args.frame === mainFrameIds.frameId);
 
     // Filter to just events matching the main frame ID or any child frame IDs.
-    const frameTreeEvents = keyEvents.filter(e => {
-      return e.args &&
-        e.args.frame &&
-        frameIdToRootFrameId.get(e.args.frame) === mainFrameIds.frameId;
-    });
+    // In practice, there should always be FrameCommittedInBrowser events to define the frame tree.
+    // Unfortunately, many test traces do not include FrameCommittedInBrowser events due to minification.
+    // This ensures there is always a minimal frame tree and events so those tests don't fail.
+    let frameTreeEvents = [];
+    if (!frameIdToRootFrameId.has(mainFrameIds.frameId)) {
+      frameIdToRootFrameId.set(mainFrameIds.frameId, mainFrameIds.frameId);
+      frameTreeEvents = frameEvents;
+    } else {
+      frameTreeEvents = keyEvents.filter(e => {
+        return e.args.frame && frameIdToRootFrameId.get(e.args.frame) === mainFrameIds.frameId;
+      });
+    }
 
     // Compute our time origin to use for all relative timings.
     const timeOriginEvt = this.computeTimeOrigin(
@@ -630,6 +637,11 @@ class TraceProcessor {
     // Compute the key frame timings for the main frame.
     const frameTimings = this.computeKeyTimingsForFrame(frameEvents, {timeOriginEvt});
 
+    // Compute FCP for all frames.
+    const fcpAllFramesEvt = frameTreeEvents.find(
+      e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
+    );
+
     // Compute LCP for all frames.
     const lcpAllFramesEvt = this.computeValidLCPAllFrames(frameTreeEvents, timeOriginEvt).lcp;
 
@@ -658,6 +670,7 @@ class TraceProcessor {
         timeOrigin: frameTimings.timings.timeOrigin,
         firstPaint: frameTimings.timings.firstPaint,
         firstContentfulPaint: frameTimings.timings.firstContentfulPaint,
+        firstContentfulPaintAllFrames: maybeGetTiming(fcpAllFramesEvt && fcpAllFramesEvt.ts),
         firstMeaningfulPaint: frameTimings.timings.firstMeaningfulPaint,
         largestContentfulPaint: frameTimings.timings.largestContentfulPaint,
         largestContentfulPaintAllFrames: maybeGetTiming(lcpAllFramesEvt && lcpAllFramesEvt.ts),
@@ -669,6 +682,7 @@ class TraceProcessor {
         timeOrigin: frameTimings.timestamps.timeOrigin,
         firstPaint: frameTimings.timestamps.firstPaint,
         firstContentfulPaint: frameTimings.timestamps.firstContentfulPaint,
+        firstContentfulPaintAllFrames: fcpAllFramesEvt && fcpAllFramesEvt.ts,
         firstMeaningfulPaint: frameTimings.timestamps.firstMeaningfulPaint,
         largestContentfulPaint: frameTimings.timestamps.largestContentfulPaint,
         largestContentfulPaintAllFrames: lcpAllFramesEvt && lcpAllFramesEvt.ts,
@@ -679,6 +693,7 @@ class TraceProcessor {
       timeOriginEvt: frameTimings.timeOriginEvt,
       firstPaintEvt: frameTimings.firstPaintEvt,
       firstContentfulPaintEvt: frameTimings.firstContentfulPaintEvt,
+      firstContentfulPaintAllFramesEvt: fcpAllFramesEvt,
       firstMeaningfulPaintEvt: frameTimings.firstMeaningfulPaintEvt,
       largestContentfulPaintEvt: frameTimings.largestContentfulPaintEvt,
       largestContentfulPaintAllFramesEvt: lcpAllFramesEvt,

lighthouse-core/test/audits/__snapshots__/metrics-test.js.snap

@@ -9,6 +9,8 @@ Object {
   "firstCPUIdle": 863,
   "firstCPUIdleTs": 23466886143,
   "firstContentfulPaint": 863,
+  "firstContentfulPaintAllFrames": 683,
+  "firstContentfulPaintAllFramesTs": 23466705983,
   "firstContentfulPaintTs": 23466886143,
   "firstMeaningfulPaint": 863,
   "firstMeaningfulPaintTs": 23466886143,
@@ -24,6 +26,8 @@ Object {
   "observedDomContentLoaded": 596,
   "observedDomContentLoadedTs": 23466619325,
   "observedFirstContentfulPaint": 863,
+  "observedFirstContentfulPaintAllFrames": 683,
+  "observedFirstContentfulPaintAllFramesTs": 23466705983,
   "observedFirstContentfulPaintTs": 23466886143,
   "observedFirstMeaningfulPaint": 863,
   "observedFirstMeaningfulPaintTs": 23466886143,
@@ -62,6 +66,8 @@ Object {
   "firstCPUIdle": 3790,
   "firstCPUIdleTs": undefined,
   "firstContentfulPaint": 2289,
+  "firstContentfulPaintAllFrames": undefined,
+  "firstContentfulPaintAllFramesTs": undefined,
   "firstContentfulPaintTs": undefined,
   "firstMeaningfulPaint": 2758,
   "firstMeaningfulPaintTs": undefined,
@@ -77,6 +83,8 @@ Object {
   "observedDomContentLoaded": 1513,
   "observedDomContentLoadedTs": 713038536140,
   "observedFirstContentfulPaint": 1122,
+  "observedFirstContentfulPaintAllFrames": 1122,
+  "observedFirstContentfulPaintAllFramesTs": 713038144775,
   "observedFirstContentfulPaintTs": 713038144775,
   "observedFirstMeaningfulPaint": 1122,
   "observedFirstMeaningfulPaintTs": 713038144775,
@@ -85,8 +93,8 @@ Object {
   "observedFirstVisualChange": 1105,
   "observedFirstVisualChangeTs": 713038128064,
   "observedLargestContentfulPaint": 1122,
-  "observedLargestContentfulPaintAllFrames": undefined,
-  "observedLargestContentfulPaintAllFramesTs": undefined,
+  "observedLargestContentfulPaintAllFrames": 1122,
+  "observedLargestContentfulPaintAllFramesTs": 713038144775,
   "observedLargestContentfulPaintTs": 713038144775,
   "observedLastVisualChange": 1722,
   "observedLastVisualChangeTs": 713038745064,
@@ -115,6 +123,8 @@ Object {
   "firstCPUIdle": 1582,
   "firstCPUIdleTs": 225415754204,
   "firstContentfulPaint": 499,
+  "firstContentfulPaintAllFrames": 499,
+  "firstContentfulPaintAllFramesTs": 225414670885,
   "firstContentfulPaintTs": 225414670885,
   "firstMeaningfulPaint": 783,
   "firstMeaningfulPaintTs": 225414955343,
@@ -130,6 +140,8 @@ Object {
   "observedDomContentLoaded": 560,
   "observedDomContentLoadedTs": 225414732309,
   "observedFirstContentfulPaint": 499,
+  "observedFirstContentfulPaintAllFrames": 499,
+  "observedFirstContentfulPaintAllFramesTs": 225414670885,
   "observedFirstContentfulPaintTs": 225414670885,
   "observedFirstMeaningfulPaint": 783,
   "observedFirstMeaningfulPaintTs": 225414955343,
@@ -168,6 +180,8 @@ Object {
   "firstCPUIdle": 4313,
   "firstCPUIdleTs": undefined,
   "firstContentfulPaint": 1337,
+  "firstContentfulPaintAllFrames": undefined,
+  "firstContentfulPaintAllFramesTs": undefined,
   "firstContentfulPaintTs": undefined,
   "firstMeaningfulPaint": 1553,
   "firstMeaningfulPaintTs": undefined,
@@ -183,6 +197,8 @@ Object {
   "observedDomContentLoaded": 560,
   "observedDomContentLoadedTs": 225414732309,
   "observedFirstContentfulPaint": 499,
+  "observedFirstContentfulPaintAllFrames": 499,
+  "observedFirstContentfulPaintAllFramesTs": 225414670885,
   "observedFirstContentfulPaintTs": 225414670885,
   "observedFirstMeaningfulPaint": 783,
   "observedFirstMeaningfulPaintTs": 225414955343,

lighthouse-core/test/computed/metrics/first-contentful-paint-all-frames-test.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. 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 FirstContentfulPaintAllFrames = require('../../../computed/metrics/first-contentful-paint-all-frames.js'); // eslint-disable-line max-len
+const trace = require('../../fixtures/traces/frame-metrics-m89.json');
+const devtoolsLog = require('../../fixtures/traces/frame-metrics-m89.devtools.log.json');
+
+/* eslint-env jest */
+
+describe('Metrics: FCP all frames', () => {
+  it('should throw for simulated throttling', async () => {
+    const settings = {throttlingMethod: 'simulate'};
+    const context = {settings, computedCache: new Map()};
+    const resultPromise = FirstContentfulPaintAllFrames.request(
+      {trace, devtoolsLog, settings},
+      context
+    );
+
+    // TODO: Implement lantern solution for FCP all frames.
+    await expect(resultPromise).rejects.toThrow();
+  });
+
+  it('should compute FCP-AF separate from FCP', async () => {
+    const settings = {throttlingMethod: 'provided'};
+    const context = {settings, computedCache: new Map()};
+    const result = await FirstContentfulPaintAllFrames.request(
+      {trace, devtoolsLog, settings},
+      context
+    );
+
+    expect(result).toEqual(
+      {
+        timestamp: 23466705983,
+        timing: 682.853,
+      }
+    );
+  });
+});

lighthouse-core/test/computed/metrics/largest-contentful-paint-all-frames-test.js

@@ -46,13 +46,16 @@ describe('Metrics: LCP from all frames', () => {
     await expect(resultPromise).rejects.toThrow('NO_LCP_ALL_FRAMES');
   });
 
-  it('should fail if even if main frame LCP is available', async () => {
+  it('should use main frame LCP if no other frames', async () => {
     const settings = {throttlingMethod: 'provided'};
     const context = {settings, computedCache: new Map()};
-    const resultPromise = LargestContentfulPaintAllFrames.request(
+    const result = await LargestContentfulPaintAllFrames.request(
       {trace: traceMainFrame, devtoolsLog: devtoolsLogMainFrame, settings},
       context
     );
-    await expect(resultPromise).rejects.toThrow('NO_LCP_ALL_FRAMES');
+    await expect(result).toEqual({
+      timestamp: 713038144775,
+      timing: 1121.711,
+    });
   });
 });

lighthouse-core/test/computed/metrics/timing-summary-test.js

@@ -25,6 +25,8 @@ describe('Timing summary', () => {
         "firstCPUIdle": 863.013,
         "firstCPUIdleTs": 23466886143,
         "firstContentfulPaint": 863.013,
+        "firstContentfulPaintAllFrames": 682.853,
+        "firstContentfulPaintAllFramesTs": 23466705983,
         "firstContentfulPaintTs": 23466886143,
         "firstMeaningfulPaint": 863.013,
         "firstMeaningfulPaintTs": 23466886143,
@@ -40,6 +42,8 @@ describe('Timing summary', () => {
         "observedDomContentLoaded": 596.195,
         "observedDomContentLoadedTs": 23466619325,
         "observedFirstContentfulPaint": 863.013,
+        "observedFirstContentfulPaintAllFrames": 682.853,
+        "observedFirstContentfulPaintAllFramesTs": 23466705983,
         "observedFirstContentfulPaintTs": 23466886143,
         "observedFirstMeaningfulPaint": 863.013,
         "observedFirstMeaningfulPaintTs": 23466886143,