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

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/main-thread-tasks.js

@@ -559,15 +559,15 @@ class MainThreadTasks {
 
   /**
    * @param {LH.TraceEvent[]} mainThreadEvents
-   * @param {Array<{frame: string, url: string}>} frames
+   * @param {Array<{id: string, url: string}>} frames
    * @param {number} traceEndTs
    * @return {TaskNode[]}
    */
   static getMainThreadTasks(mainThreadEvents, frames, traceEndTs) {
     const timers = new Map();
     const xhrs = new Map();
     const frameURLsById = new Map();
-    frames.forEach(({frame, url}) => frameURLsById.set(frame, url));
+    frames.forEach(({id, url}) => frameURLsById.set(id, url));
     /** @type {Array<string>} */
     const lastTaskURLs = [];
     const priorTaskData = {timers, xhrs, frameURLsById, lastTaskURLs};

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

@@ -20,6 +20,9 @@
 /** @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: '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 */
+/** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Candidate', args: {data: {size: number}, frame: string}}} LCPCandidateEvent */
 
 const log = require('lighthouse-logger');
 
@@ -478,37 +481,94 @@ 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;
-
-    let lcp;
-    let invalidated = false;
-    // Iterate the events backwards.
-    for (let i = events.length - 1; i >= 0; i--) {
-      const e = events[i];
-      // 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) {
-        invalidated = true;
-        break;
+  static isLCPEvent(evt) {
+    if (evt.name !== 'largestContentfulPaint::Invalidate' &&
+        evt.name !== 'largestContentfulPaint::Candidate') return false;
+    return Boolean(evt.args && evt.args.frame);
+  }
+
+  /**
+   * @param {LH.TraceEvent} evt
+   * @return {evt is LCPCandidateEvent}
+   */
+  static isLCPCandidateEvent(evt) {
+    return Boolean(
+      evt.name === 'largestContentfulPaint::Candidate' &&
+      evt.args &&
+      evt.args.frame &&
+      evt.args.data &&
+      evt.args.data.size !== undefined
+    );
+  }
+
+  /**
+   * Returns the maximum LCP event across all frames in `events`.
+   * Sets `invalidated` flag if LCP of every frame is invalidated.
+   *
+   * LCP's trace event was first introduced in m78. We can't surface an LCP for older Chrome versions.
+   * LCP comes from a frame's latest `largestContentfulPaint::Candidate`, but it can be invalidated by a `largestContentfulPaint::Invalidate` event.
+   *
+   * @param {LH.TraceEvent[]} events
+   * @param {LH.TraceEvent} timeOriginEvent
+   * @return {{lcp: LCPEvent | undefined, invalidated: boolean}}
+   */
+  static computeValidLCPAllFrames(events, timeOriginEvent) {
+    const lcpEvents = events.filter(this.isLCPEvent).reverse();
+
+    /** @type {Map<string, LCPEvent>} */
+    const finalLcpEventsByFrame = 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 (finalLcpEventsByFrame.has(frame)) continue;
+
+      finalLcpEventsByFrame.set(frame, e);
+    }
+
+    /** @type {LCPCandidateEvent | undefined} */
+    let maxLcpAcrossFrames;
+    for (const lcp of finalLcpEventsByFrame.values()) {
+      if (!this.isLCPCandidateEvent(lcp)) continue;
+      if (!maxLcpAcrossFrames || lcp.args.data.size > maxLcpAcrossFrames.args.data.size) {
+        maxLcpAcrossFrames = lcp;
+      }
+    }
+
+    return {
+      lcp: maxLcpAcrossFrames,
+      // LCP events were found, but final LCP event of every frame was an invalidate event.
+      invalidated: Boolean(!maxLcpAcrossFrames && finalLcpEventsByFrame.size),
+    };
+  }
+
+  /**
+   * @param {Array<{id: string, url: string, parent?: string}>} frames
+   * @return {Map<string, string>}
+   */
+  static resolveRootFrames(frames) {
+    /** @type {Map<string, string>} */
+    const parentFrames = new Map();
+    for (const frame of frames) {
+      if (!frame.parent) continue;
+      parentFrames.set(frame.id, frame.parent);
+    }
+
+    /** @type {Map<string, string>} */
+    const frameIdToRootFrameId = new Map();
+    for (const frame of frames) {
+      let cur = frame.id;
+      while (parentFrames.has(cur)) {
+        cur = /** @type {string} */ (parentFrames.get(cur));
       }
-      // If not an lcp 'Candidate', keep iterating.
-      if (e.name !== candidateEventName) continue;
-      // Found the last LCP candidate in the trace, let's use it.
-      lcp = e;
-      break;
+      frameIdToRootFrameId.set(frame.id, cur);
     }
 
-    return {lcp, invalidated};
+    return frameIdToRootFrameId;
   }
 
   /**
@@ -533,9 +593,34 @@ class TraceProcessor {
     // Find the inspected frame
     const mainFrameIds = this.findMainFrameIds(keyEvents);
 
+    const frames = keyEvents
+      .filter(/** @return {evt is FrameCommittedEvent} */ evt => {
+        return Boolean(
+          evt.name === 'FrameCommittedInBrowser' &&
+          evt.args.data &&
+          evt.args.data.frame &&
+          evt.args.data.url
+        );
+      })
+      .map(evt => {
+        return {
+          id: evt.args.data.frame,
+          url: evt.args.data.url,
+          parent: evt.args.data.parent,
+        };
+      });
+    const frameIdToRootFrameId = 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 &&
+        frameIdToRootFrameId.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 +631,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).lcp;
 
     // 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 +641,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 +651,7 @@ class TraceProcessor {
     return {
       frames,
       mainThreadEvents,
+      frameTreeEvents,
       processEvents,
       mainFrameIds,
       timings: {
@@ -712,16 +786,8 @@ class TraceProcessor {
       firstMeaningfulPaint = lastCandidate;
     }
 
-    // LCP's trace event was first introduced in m78. We can't surface an LCP for older Chrome versions
-    // 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,
-    });
+    // This function accepts events spanning multiple frames, but this usage will only provide events from the main frame.
+    const lcpResult = this.computeValidLCPAllFrames(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 () => {