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

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

@@ -0,0 +1,39 @@
+/**
+ * @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 LanternFirstContentfulPaint = require('./lantern-first-contentful-paint.js');
+const ComputedMetric = require('./metric.js');
+
+class FirstContentfulPaintAllFrames extends ComputedMetric {
+  /**
+   * @param {LH.Artifacts.MetricComputationData} data
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Artifacts.LanternMetric>}
+   */
+  static computeSimulatedMetric(data, context) {
+    // Fall back to main frame LCP when using simulated throttling.
+    // Throwing an error causes tests to fail.
+    // TODO: Add support for all frames in lantern.
+    return LanternFirstContentfulPaint.request(data, context);
+  }
+
+  /**
+   * @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 FirstContentfulPaintAllFrames.request(metricComputationData, context); // 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.timing,
+      firstContentfulPaintAllFramesTs: firstContentfulPaintAllFrames.timestamp,
       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 */
@@ -630,6 +630,14 @@ class TraceProcessor {
     // Compute the key frame timings for the main frame.
     const frameTimings = this.computeKeyTimingsForFrame(frameEvents, {timeOriginEvt});
 
+    // Compute FCP for all frames.
+    // In practice, this will always be defined when there is a main frame FCP.
+    // Unfortunately, many test traces do not include FrameCommittedInBrowser events due to minification.
+    // The fallback to the main frame FCP is added so these tests do throw a NO_FCP error.
+    const fcpAllFramesEvt = frameTreeEvents.find(
+      e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
+    ) || frameTimings.firstContentfulPaintEvt;
+
     // Compute LCP for all frames.
     const lcpAllFramesEvt = this.computeValidLCPAllFrames(frameTreeEvents, timeOriginEvt).lcp;
 
@@ -658,6 +666,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 +678,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 +689,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": 2289,
+  "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,
@@ -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": 1337,
+  "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,46 @@
+/**
+ * @license Copyright 2018 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 LanternFirstContentfulPaint = require('../../../computed/metrics/lantern-first-contentful-paint.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 fall back to main frame lantern FCP for simulated throttling', async () => {
+    const settings = {throttlingMethod: 'simulate'};
+    const context = {settings, computedCache: new Map()};
+    const result = await FirstContentfulPaintAllFrames.request(
+      {trace, devtoolsLog, settings},
+      context
+    );
+    const lanternResult = await LanternFirstContentfulPaint.request(
+      {trace, devtoolsLog, settings},
+      context
+    );
+
+    await expect(result).toEqual(lanternResult);
+  });
+
+  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/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,

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

@@ -49,6 +49,19 @@ describe('TraceOfTabComputed', () => {
         ts: 225414670885,
         tts: 866570,
       },
+      firstContentfulPaintAllFramesEvt: {
+        args: {
+          frame: '0x25a638821e30',
+        },
+        cat: 'loading,rail,devtools.timeline',
+        name: 'firstContentfulPaint',
+        ph: 'I',
+        pid: 44277,
+        s: 'p',
+        tid: 775,
+        ts: 225414670885,
+        tts: 866570,
+      },
       firstMeaningfulPaintEvt: {
         args: {
           frame: '0x25a638821e30',
@@ -110,6 +123,7 @@ describe('TraceOfTabComputed', () => {
       timestamps: {
         domContentLoaded: 225414732309,
         firstContentfulPaint: 225414670885,
+        firstContentfulPaintAllFrames: 225414670885,
         firstMeaningfulPaint: 225414955343,
         firstPaint: 225414670868,
         load: 225416370913,
@@ -119,6 +133,7 @@ describe('TraceOfTabComputed', () => {
       timings: {
         domContentLoaded: 560.294,
         firstContentfulPaint: 498.87,
+        firstContentfulPaintAllFrames: 498.87,
         firstMeaningfulPaint: 783.328,
         firstPaint: 498.853,
         load: 2198.898,