core(trace): compute trace for main frame and any child frames

lighthouse-core/computed/metrics/cumulative-layout-shift-all-frames.js

@@ -6,14 +6,17 @@
 'use strict';
 
 const makeComputedArtifact = require('../computed-artifact.js');
+const TraceOfTab = require('../trace-of-tab.js');
 
 class CumulativeLayoutShiftAllFrames {
   /**
    * @param {LH.Trace} trace
+   * @param {LH.Audit.Context} context
    * @return {Promise<{value: number}>}
    */
-  static async compute_(trace) {
-    const cumulativeShift = trace.traceEvents
+  static async compute_(trace, context) {
+    const traceOfTab = await TraceOfTab.request(trace, context);
+    const cumulativeShift = traceOfTab.frameTreeEvents
       .filter(e =>
         e.name === 'LayoutShift' &&
         e.args &&

lighthouse-core/lib/minify-trace.js

@@ -42,13 +42,14 @@ const traceEventsToAlwaysKeep = new Set([
   'ResourceFinish',
   'ResourceReceivedData',
   'EventDispatch',
+  'LayoutShift',
+  'FrameCommittedInBrowser',
   // Not currently used by Lighthouse but might be used in the future for cross-frame LCP
   'NavStartToLargestContentfulPaint::Invalidate::AllFrames::UKM',
   'NavStartToLargestContentfulPaint::Candidate::AllFrames::UKM',
   // Needed for CPU profiler task attribution
   'Profile',
   'ProfileChunk',
-  'LayoutShift',
 ]);
 
 const traceEventsToKeepInToplevelTask = new Set([

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

@@ -20,6 +20,8 @@
 /** @typedef {Omit<TraceTimesWithoutFCP, 'traceEnd'>} TraceTimesWithoutFCPAndTraceEnd */
 /** @typedef {Omit<LH.Artifacts.TraceOfTab, 'firstContentfulPaintEvt'|'timings'|'timestamps'> & {timings: TraceTimesWithoutFCP, timestamps: TraceTimesWithoutFCP, firstContentfulPaintEvt?: LH.Artifacts.TraceOfTab['firstContentfulPaintEvt']}} TraceOfTabWithoutFCP */
 /** @typedef {'lastNavigationStart'|'firstResourceSendRequest'} TimeOriginDeterminationMethod */
+/** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Invalidate'|'largestContentfulPaint::Candidate', args: {data?: {size?: number}, frame: string}}} LCPEvent */
+/** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Candidate', args: {data: {size: number}, frame: string}}} LCPCandidateEvent */
 
 const log = require('lighthouse-logger');
 
@@ -478,17 +480,67 @@ class TraceProcessor {
   }
 
   /**
-   * @param {{candidateEventName: string, invalidateEventName: string, events: LH.TraceEvent[], timeOriginEvt: LH.TraceEvent}} options
-   * @return {{lcp: LH.TraceEvent | undefined, invalidated: boolean}}
+   * @param {LH.TraceEvent} evt
+   * @return {evt is LCPEvent}
    */
-  static computeValidLCP(options) {
-    const {
-      candidateEventName,
-      invalidateEventName,
-      events,
-      timeOriginEvt,
-    } = options;
+  static isLCPEvent(evt) {
+    if (evt.name !== 'largestContentfulPaint::Invalidate' &&
+        evt.name !== 'largestContentfulPaint::Candidate') return false;
+    return !!(evt.args && evt.args.frame);
+  }
+
+  /**
+   * @param {LH.TraceEvent} evt
+   * @return {evt is LCPCandidateEvent}
+   */
+  static isLCPCandidateEvent(evt) {
+    if (evt.name !== 'largestContentfulPaint::Candidate') return false;
+    return !!(evt.args && evt.args.frame && evt.args.data && evt.args.data.size !== undefined);
+  }
+
+  /**
+   * @param {LH.TraceEvent[]} events
+   * @param {LH.TraceEvent} timeOriginEvent
+   * @return {LCPEvent | undefined}
+   */
+  static computeValidLCPAllFrames(events, timeOriginEvent) {
+    const lcpEvents = events.filter(this.isLCPEvent).reverse();
+
+    /** @type {Map<string, LCPCandidateEvent | undefined>} */
+    const lcpEventsByFrame = new Map();
+    for (const e of lcpEvents) {
+      if (e.ts <= timeOriginEvent.ts) break;
 
+      // Already found final LCP state of this frame.
+      const frame = e.args.frame;
+      if (lcpEventsByFrame.has(frame)) continue;
+
+      if (this.isLCPCandidateEvent(e)) {
+        lcpEventsByFrame.set(frame, e);
+      } else {
+        lcpEventsByFrame.set(frame, undefined);
+      }
+    }
+
+    /** @type {LCPCandidateEvent | undefined} */
+    let lcpAllFrames;
+    for (const lcp of lcpEventsByFrame.values()) {
+      if (!lcp || !lcp.args.data || !lcp.args.data.size) continue;
+      if (!lcpAllFrames || lcp.args.data.size > lcpAllFrames.args.data.size) {
+        lcpAllFrames = lcp;
+      }
+    }
+
+    return lcpAllFrames;
+  }
+
+  /**
+   * TODO: Deprecate and unify with computeValidLCPAllFrames when invalidate flag is no longer needed.
+   * @param {LH.TraceEvent[]} events
+   * @param {LH.TraceEvent} timeOriginEvt
+   * @return {{lcp: LH.TraceEvent | undefined, invalidated: boolean}}
+   */
+  static computeValidLCP(events, timeOriginEvt) {
     let lcp;
     let invalidated = false;
     // Iterate the events backwards.
@@ -497,12 +549,12 @@ class TraceProcessor {
       // If the event's timestamp is before the time origin, stop.
       if (e.ts <= timeOriginEvt.ts) break;
       // If the last lcp event in the trace is 'Invalidate', there is inconclusive data to determine LCP.
-      if (e.name === invalidateEventName) {
+      if (e.name === 'largestContentfulPaint::Invalidate') {
         invalidated = true;
         break;
       }
       // If not an lcp 'Candidate', keep iterating.
-      if (e.name !== candidateEventName) continue;
+      if (e.name !== 'largestContentfulPaint::Candidate') continue;
       // Found the last LCP candidate in the trace, let's use it.
       lcp = e;
       break;
@@ -511,6 +563,49 @@ class TraceProcessor {
     return {lcp, invalidated};
   }
 
+  /**
+   * @param {{frame: string, url: string, parent?: string}[]} frames
+   * @return {Map<string, string>}
+   */
+  static resolveRootFrames(frames) {
+    /** @type {Map<string, string>} */
+    const parentFrames = new Map();
+    for (const frameData of frames) {
+      if (!frameData.parent) continue;
+      parentFrames.set(frameData.frame, frameData.parent);
+    }
+
+    /** @type {Map<string, string>} */
+    const rootFrames = new Map();
+
+    /**
+     * @param {string} frame
+     * @return {string}
+     */
+    function resolveRootFrame(frame) {
+      let rootFrame = rootFrames.get(frame);
+      if (!rootFrame) {
+        const parentFrame = parentFrames.get(frame);
+        if (!parentFrame) {
+          rootFrames.set(frame, frame);
+          return frame;
+        }
+        rootFrame = rootFrames.get(parentFrame) || resolveRootFrame(parentFrame);
+        rootFrames.set(frame, rootFrame);
+      }
+      return rootFrame;
+    }
+
+    for (const frameData of frames) {
+      resolveRootFrame(frameData.frame);
+
+      // Early exit if map is filled in.
+      if (rootFrames.size === frames.length) break;
+    }
+
+    return rootFrames;
+  }
+
   /**
    * Finds key trace events, identifies main process/thread, and returns timings of trace events
    * in milliseconds since the time origin in addition to the standard microsecond monotonic timestamps.
@@ -533,9 +628,22 @@ class TraceProcessor {
     // Find the inspected frame
     const mainFrameIds = this.findMainFrameIds(keyEvents);
 
+    const frames = keyEvents
+      .filter(evt => evt.name === 'FrameCommittedInBrowser')
+      .map(evt => evt.args.data)
+      .filter(/** @return {data is {frame: string, url: string}} */ data => {
+        return Boolean(data && data.frame && data.url);
+      });
+    const rootFrames = this.resolveRootFrames(frames);
+
     // Filter to just events matching the 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 && rootFrames.get(e.args.frame) === mainFrameIds.frameId;
+    });
+
     // Compute our time origin to use for all relative timings.
     const timeOriginEvt = this.computeTimeOrigin(
       {keyEvents, frameEvents, mainFrameIds},
@@ -546,12 +654,7 @@ class TraceProcessor {
     const frameTimings = this.computeKeyTimingsForFrame(frameEvents, {timeOriginEvt});
 
     // Compute LCP for all frames.
-    const lcpAllFramesEvt = this.computeValidLCP({
-      candidateEventName: 'NavStartToLargestContentfulPaint::Candidate::AllFrames::UKM',
-      invalidateEventName: 'NavStartToLargestContentfulPaint::Invalidate::AllFrames::UKM',
-      events: keyEvents,
-      timeOriginEvt,
-    }).lcp;
+    const lcpAllFramesEvt = this.computeValidLCPAllFrames(frameTreeEvents, timeOriginEvt);
 
     // Subset all trace events to just our tab's process (incl threads other than main)
     // stable-sort events to keep them correctly nested.
@@ -561,13 +664,6 @@ class TraceProcessor {
     const mainThreadEvents = processEvents
       .filter(e => e.tid === mainFrameIds.tid);
 
-    const frames = keyEvents
-      .filter(evt => evt.name === 'FrameCommittedInBrowser')
-      .map(evt => evt.args.data)
-      .filter(/** @return {data is {frame: string, url: string}} */ data => {
-        return Boolean(data && data.frame && data.url);
-      });
-
     // Ensure our traceEnd reflects all page activity.
     const traceEnd = this.computeTraceEnd(trace.traceEvents, timeOriginEvt);
 
@@ -578,6 +674,7 @@ class TraceProcessor {
     return {
       frames,
       mainThreadEvents,
+      frameTreeEvents,
       processEvents,
       mainFrameIds,
       timings: {
@@ -716,12 +813,7 @@ class TraceProcessor {
     // LCP comes from the latest `largestContentfulPaint::Candidate`, but it can be invalidated
     // by a `largestContentfulPaint::Invalidate` event. In the case that the last candidate is
     // invalidated, the value will be undefined.
-    const lcpResult = this.computeValidLCP({
-      candidateEventName: 'largestContentfulPaint::Candidate',
-      invalidateEventName: 'largestContentfulPaint::Invalidate',
-      events: frameEvents,
-      timeOriginEvt,
-    });
+    const lcpResult = this.computeValidLCP(frameEvents, timeOriginEvt);
 
     const load = frameEvents.find(e => e.name === 'loadEventEnd' && e.ts > timeOriginEvt.ts);
     const domContentLoaded = frameEvents.find(

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

@@ -3,52 +3,52 @@
 exports[`Performance: metrics evaluates valid input (with lcp from all frames) correctly 1`] = `
 Object {
   "cumulativeLayoutShift": 0.0011656245471340055,
-  "cumulativeLayoutShiftAllFrames": 0.5436596106821069,
+  "cumulativeLayoutShiftAllFrames": 0.4591700003057729,
   "estimatedInputLatency": 16,
   "estimatedInputLatencyTs": undefined,
-  "firstCPUIdle": 688,
-  "firstCPUIdleTs": 46134430620,
-  "firstContentfulPaint": 688,
-  "firstContentfulPaintTs": 46134430620,
-  "firstMeaningfulPaint": 688,
-  "firstMeaningfulPaintTs": 46134430620,
-  "interactive": 688,
-  "interactiveTs": 46134430620,
-  "largestContentfulPaint": 688,
-  "largestContentfulPaintAllFrames": 5948,
-  "largestContentfulPaintAllFramesTs": 46139690898,
-  "largestContentfulPaintTs": 46134430620,
+  "firstCPUIdle": 863,
+  "firstCPUIdleTs": 23466886143,
+  "firstContentfulPaint": 863,
+  "firstContentfulPaintTs": 23466886143,
+  "firstMeaningfulPaint": 863,
+  "firstMeaningfulPaintTs": 23466886143,
+  "interactive": 863,
+  "interactiveTs": 23466886143,
+  "largestContentfulPaint": 863,
+  "largestContentfulPaintAllFrames": 683,
+  "largestContentfulPaintAllFramesTs": 23466705983,
+  "largestContentfulPaintTs": 23466886143,
   "maxPotentialFID": 16,
   "observedCumulativeLayoutShift": 0.0011656245471340055,
-  "observedCumulativeLayoutShiftAllFrames": 0.5436596106821069,
-  "observedDomContentLoaded": 617,
-  "observedDomContentLoadedTs": 46134359407,
-  "observedFirstContentfulPaint": 688,
-  "observedFirstContentfulPaintTs": 46134430620,
-  "observedFirstMeaningfulPaint": 688,
-  "observedFirstMeaningfulPaintTs": 46134430620,
-  "observedFirstPaint": 688,
-  "observedFirstPaintTs": 46134430620,
-  "observedFirstVisualChange": 679,
-  "observedFirstVisualChangeTs": 46134421490,
-  "observedLargestContentfulPaint": 688,
-  "observedLargestContentfulPaintAllFrames": 5948,
-  "observedLargestContentfulPaintAllFramesTs": 46139690898,
-  "observedLargestContentfulPaintTs": 46134430620,
-  "observedLastVisualChange": 5967,
-  "observedLastVisualChangeTs": 46139709490,
-  "observedLoad": 706,
-  "observedLoadTs": 46134448526,
+  "observedCumulativeLayoutShiftAllFrames": 0.4591700003057729,
+  "observedDomContentLoaded": 596,
+  "observedDomContentLoadedTs": 23466619325,
+  "observedFirstContentfulPaint": 863,
+  "observedFirstContentfulPaintTs": 23466886143,
+  "observedFirstMeaningfulPaint": 863,
+  "observedFirstMeaningfulPaintTs": 23466886143,
+  "observedFirstPaint": 616,
+  "observedFirstPaintTs": 23466639588,
+  "observedFirstVisualChange": 609,
+  "observedFirstVisualChangeTs": 23466632130,
+  "observedLargestContentfulPaint": 863,
+  "observedLargestContentfulPaintAllFrames": 683,
+  "observedLargestContentfulPaintAllFramesTs": 23466705983,
+  "observedLargestContentfulPaintTs": 23466886143,
+  "observedLastVisualChange": 5881,
+  "observedLastVisualChangeTs": 23471904130,
+  "observedLoad": 673,
+  "observedLoadTs": 23466696096,
   "observedNavigationStart": 0,
-  "observedNavigationStartTs": 46133742490,
-  "observedSpeedIndex": 1370,
-  "observedSpeedIndexTs": 46135112850,
+  "observedNavigationStartTs": 23466023130,
+  "observedSpeedIndex": 1583,
+  "observedSpeedIndexTs": 23467605703,
   "observedTimeOrigin": 0,
-  "observedTimeOriginTs": 46133742490,
-  "observedTraceEnd": 6019,
-  "observedTraceEndTs": 46139761594,
-  "speedIndex": 1370,
-  "speedIndexTs": 46135112490,
+  "observedTimeOriginTs": 23466023130,
+  "observedTraceEnd": 6006,
+  "observedTraceEndTs": 23472029453,
+  "speedIndex": 1583,
+  "speedIndexTs": 23467606130,
   "totalBlockingTime": 0,
 }
 `;

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

@@ -113,8 +113,8 @@ describe('Performance: metrics', () => {
     const {details} = await MetricsAudit.audit(artifacts, context);
     expect(details.items[0].cumulativeLayoutShift).toBeCloseTo(0.0011);
     expect(details.items[0].observedCumulativeLayoutShift).toBeCloseTo(0.0011);
-    expect(details.items[0].cumulativeLayoutShiftAllFrames).toBeCloseTo(0.54);
-    expect(details.items[0].observedCumulativeLayoutShiftAllFrames).toBeCloseTo(0.54);
+    expect(details.items[0].cumulativeLayoutShiftAllFrames).toBeCloseTo(0.459);
+    expect(details.items[0].observedCumulativeLayoutShiftAllFrames).toBeCloseTo(0.459);
   });
 
   it('does not fail the entire audit when TTI errors', async () => {