chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/models/trace/insights/CumulativeLayoutShift.ts

@@ -3,19 +3,17 @@
 // found in the LICENSE file.
 
 import * as Platform from '../../../core/platform/platform.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {
-  type InsightResult,
-  type InsightSetContext,
-  type RequiredData,
-} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export type CLSInsightResult = InsightResult<{
-  animationFailures?: readonly NoncompositedAnimationFailure[],
-  shifts?: Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>,
-        clusters: Types.Events.SyntheticLayoutShiftCluster[],
+  animationFailures: readonly NoncompositedAnimationFailure[],
+  shifts: Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>,
+  clusters: Types.Events.SyntheticLayoutShiftCluster[],
+  worstCluster: Types.Events.SyntheticLayoutShiftCluster | undefined,
 }>;
 
 export function deps(): ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'] {
@@ -23,12 +21,25 @@ export function deps(): ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'
 }
 
 export const enum AnimationFailureReasons {
-  UNSUPPORTED_CSS_PROPERTY = 'UNSUPPORTED_CSS_PROPERTY',
+  ACCELERATED_ANIMATIONS_DISABLED = 'ACCELERATED_ANIMATIONS_DISABLED',
+  EFFECT_SUPPRESSED_BY_DEVTOOLS = 'EFFECT_SUPPRESSED_BY_DEVTOOLS',
+  INVALID_ANIMATION_OR_EFFECT = 'INVALID_ANIMATION_OR_EFFECT',
+  EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS = 'EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS',
+  EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE = 'EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE',
+  TARGET_HAS_INVALID_COMPOSITING_STATE = 'TARGET_HAS_INVALID_COMPOSITING_STATE',
+  TARGET_HAS_INCOMPATIBLE_ANIMATIONS = 'TARGET_HAS_INCOMPATIBLE_ANIMATIONS',
+  TARGET_HAS_CSS_OFFSET = 'TARGET_HAS_CSS_OFFSET',
+  ANIMATION_AFFECTS_NON_CSS_PROPERTIES = 'ANIMATION_AFFECTS_NON_CSS_PROPERTIES',
+  TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET =
+      'TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET',
   TRANSFROM_BOX_SIZE_DEPENDENT = 'TRANSFROM_BOX_SIZE_DEPENDENT',
-  FILTER_MAY_MOVE_PIXELS = 'FILTER_MAY_MOVE_PIXELS',
-  NON_REPLACE_COMPOSITE_MODE = 'NON_REPLACE_COMPOSITE_MODE',
-  INCOMPATIBLE_ANIMATIONS = 'INCOMPATIBLE_ANIMATIONS',
-  UNSUPPORTED_TIMING_PARAMS = 'UNSUPPORTED_TIMING_PARAMS',
+  FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS = 'FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS',
+  UNSUPPORTED_CSS_PROPERTY = 'UNSUPPORTED_CSS_PROPERTY',
+  MIXED_KEYFRAME_VALUE_TYPES = 'MIXED_KEYFRAME_VALUE_TYPES',
+  TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE = 'TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE',
+  ANIMATION_HAS_NO_VISIBLE_CHANGE = 'ANIMATION_HAS_NO_VISIBLE_CHANGE',
+  AFFECTS_IMPORTANT_PROPERTY = 'AFFECTS_IMPORTANT_PROPERTY',
+  SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY = 'SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY',
 }
 
 export interface NoncompositedAnimationFailure {
@@ -45,6 +56,10 @@ export interface NoncompositedAnimationFailure {
    * Unsupported properties.
    */
   unsupportedProperties?: Types.Events.Animation['args']['data']['unsupportedProperties'];
+  /**
+   * Animation event.
+   */
+  animation?: Types.Events.SyntheticAnimationPair;
 }
 
 /**
@@ -55,8 +70,45 @@ export interface NoncompositedAnimationFailure {
  */
 const ACTIONABLE_FAILURE_REASONS = [
   {
-    flag: 1 << 13,
-    failure: AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
+    flag: 1 << 0,
+    failure: AnimationFailureReasons.ACCELERATED_ANIMATIONS_DISABLED,
+  },
+  {
+    flag: 1 << 1,
+    failure: AnimationFailureReasons.EFFECT_SUPPRESSED_BY_DEVTOOLS,
+  },
+  {
+    flag: 1 << 2,
+    failure: AnimationFailureReasons.INVALID_ANIMATION_OR_EFFECT,
+  },
+  {
+    flag: 1 << 3,
+    failure: AnimationFailureReasons.EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS,
+  },
+  {
+    flag: 1 << 4,
+    failure: AnimationFailureReasons.EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE,
+  },
+  {
+    flag: 1 << 5,
+    failure: AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE,
+  },
+  {
+    flag: 1 << 6,
+    failure: AnimationFailureReasons.TARGET_HAS_INCOMPATIBLE_ANIMATIONS,
+  },
+  {
+    flag: 1 << 7,
+    failure: AnimationFailureReasons.TARGET_HAS_CSS_OFFSET,
+  },
+  // The failure 1 << 8 is marked as obsolete in Blink
+  {
+    flag: 1 << 9,
+    failure: AnimationFailureReasons.ANIMATION_AFFECTS_NON_CSS_PROPERTIES,
+  },
+  {
+    flag: 1 << 10,
+    failure: AnimationFailureReasons.TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET,
   },
   {
     flag: 1 << 11,
@@ -64,41 +116,61 @@ const ACTIONABLE_FAILURE_REASONS = [
   },
   {
     flag: 1 << 12,
-    failure: AnimationFailureReasons.FILTER_MAY_MOVE_PIXELS,
+    failure: AnimationFailureReasons.FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS,
   },
   {
-    flag: 1 << 4,
-    failure: AnimationFailureReasons.NON_REPLACE_COMPOSITE_MODE,
+    flag: 1 << 13,
+    failure: AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
   },
+  // The failure 1 << 14 is marked as obsolete in Blink
   {
-    flag: 1 << 6,
-    failure: AnimationFailureReasons.INCOMPATIBLE_ANIMATIONS,
+    flag: 1 << 15,
+    failure: AnimationFailureReasons.MIXED_KEYFRAME_VALUE_TYPES,
   },
   {
-    flag: 1 << 3,
-    failure: AnimationFailureReasons.UNSUPPORTED_TIMING_PARAMS,
+    flag: 1 << 16,
+    failure: AnimationFailureReasons.TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE,
+  },
+  {
+    flag: 1 << 17,
+    failure: AnimationFailureReasons.ANIMATION_HAS_NO_VISIBLE_CHANGE,
+  },
+  {
+    flag: 1 << 18,
+    failure: AnimationFailureReasons.AFFECTS_IMPORTANT_PROPERTY,
+  },
+  {
+    flag: 1 << 19,
+    failure: AnimationFailureReasons.SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY,
   },
 ];
 
 // 500ms window.
 // Use this window to consider events and requests that may have caused a layout shift.
-const INVALIDATION_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
+const ROOT_CAUSE_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
 
 export interface LayoutShiftRootCausesData {
   iframeIds: string[];
   fontRequests: Types.Events.SyntheticNetworkRequest[];
   nonCompositedAnimations: NoncompositedAnimationFailure[];
+  unsizedImages: Protocol.DOM.BackendNodeId[];
 }
 
-function isInInvalidationWindow(event: Types.Events.Event, targetEvent: Types.Events.Event): boolean {
+/**
+ * Returns if an event happens within the root cause window, before the target event.
+ *          ROOT_CAUSE_WINDOW               v target event
+ *        |------------------------|=======================
+ */
+function isInRootCauseWindow(event: Types.Events.Event, targetEvent: Types.Events.Event): boolean {
   const eventEnd = event.dur ? event.ts + event.dur : event.ts;
-  return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - INVALIDATION_WINDOW;
+  return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - ROOT_CAUSE_WINDOW;
 }
 
-export function getNonCompositedFailure(event: Types.Events.SyntheticAnimationPair): NoncompositedAnimationFailure[] {
+export function getNonCompositedFailure(animationEvent: Types.Events.SyntheticAnimationPair):
+    NoncompositedAnimationFailure[] {
   const failures: NoncompositedAnimationFailure[] = [];
-  const beginEvent = event.args.data.beginEvent;
-  const instantEvents = event.args.data.instantEvents || [];
+  const beginEvent = animationEvent.args.data.beginEvent;
+  const instantEvents = animationEvent.args.data.instantEvents || [];
   /**
    * Animation events containing composite information are ASYNC_NESTABLE_INSTANT ('n').
    * An animation may also contain multiple 'n' events, so we look through those with useful non-composited data.
@@ -106,7 +178,7 @@ export function getNonCompositedFailure(event: Types.Events.SyntheticAnimationPa
   for (const event of instantEvents) {
     const failureMask = event.args.data.compositeFailed;
     const unsupportedProperties = event.args.data.unsupportedProperties;
-    if (!failureMask || !unsupportedProperties) {
+    if (!failureMask) {
       continue;
     }
     const failureReasons =
@@ -115,6 +187,7 @@ export function getNonCompositedFailure(event: Types.Events.SyntheticAnimationPa
       name: beginEvent.args.data.displayName,
       failureReasons,
       unsupportedProperties,
+      animation: animationEvent,
     };
     failures.push(failure);
   }
@@ -139,14 +212,14 @@ function getNonCompositedFailureRootCauses(
     }
     allAnimationFailures.push(...failures);
 
-    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, animation);
+    const nextPrePaint = getNextEvent(prePaintEvents, animation) as Types.Events.PrePaint | null;
     // If no following prePaint, this is not a root cause.
     if (!nextPrePaint) {
       continue;
     }
 
-    // If the animation event is outside the INVALIDATION_WINDOW, it could not be a root cause.
-    if (!isInInvalidationWindow(animation, nextPrePaint)) {
+    // If the animation event is outside the ROOT_CAUSE_WINDOW, it could not be a root cause.
+    if (!isInRootCauseWindow(animation, nextPrePaint)) {
       continue;
     }
 
@@ -203,19 +276,18 @@ function getShiftsByPrePaintEvents(
 }
 
 /**
- * This gets the first prePaint event that follows the provided event and returns it.
+ * Given a source event list, this returns the first event of that list that directly follows the target event.
  */
-function getNextPrePaintEvent(
-    prePaintEvents: Types.Events.PrePaint[], targetEvent: Types.Events.Event): Types.Events.PrePaint|undefined {
-  // Get the first PrePaint event that happened after the targetEvent.
-  const nextPrePaintIndex = Platform.ArrayUtilities.nearestIndexFromBeginning(
-      prePaintEvents, prePaint => prePaint.ts > targetEvent.ts + (targetEvent.dur || 0));
+function getNextEvent(sourceEvents: Types.Events.Event[], targetEvent: Types.Events.Event): Types.Events.Event|
+    undefined {
+  const index = Platform.ArrayUtilities.nearestIndexFromBeginning(
+      sourceEvents, source => source.ts > targetEvent.ts + (targetEvent.dur || 0));
   // No PrePaint event registered after this event
-  if (nextPrePaintIndex === null) {
+  if (index === null) {
     return undefined;
   }
 
-  return prePaintEvents[nextPrePaintIndex];
+  return sourceEvents[index];
 }
 
 /**
@@ -228,7 +300,7 @@ function getIframeRootCauses(
     rootCausesByShift: Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>,
     domLoadingEvents: readonly Types.Events.DomLoading[]): Map<Types.Events.LayoutShift, LayoutShiftRootCausesData> {
   for (const iframeEvent of iframeCreatedEvents) {
-    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, iframeEvent);
+    const nextPrePaint = getNextEvent(prePaintEvents, iframeEvent) as Types.Events.PrePaint | null;
     // If no following prePaint, this is not a root cause.
     if (!nextPrePaint) {
       continue;
@@ -258,10 +330,43 @@ function getIframeRootCauses(
   return rootCausesByShift;
 }
 
+/**
+ * An unsized image is considered a root cause if its PaintImage can be correlated to a
+ * layout shift. We can correlate PaintImages with unsized images by their matching nodeIds.
+ *                           X      <- layout shift
+ *              |----------------|
+ *                    ^ PrePaint event   |-----|
+ *                                          ^ PaintImage
+ */
+function getUnsizedImageRootCauses(
+    unsizedImageEvents: readonly Types.Events.LayoutImageUnsized[], paintImageEvents: Types.Events.PaintImage[],
+    shiftsByPrePaint: Map<Types.Events.PrePaint, Types.Events.LayoutShift[]>,
+    rootCausesByShift: Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>):
+    Map<Types.Events.LayoutShift, LayoutShiftRootCausesData> {
+  shiftsByPrePaint.forEach((shifts, prePaint) => {
+    const paintImage = getNextEvent(paintImageEvents, prePaint) as Types.Events.PaintImage | null;
+    // The unsized image corresponds to this PaintImage.
+    const matchingNode =
+        unsizedImageEvents.find(unsizedImage => unsizedImage.args.data.nodeId === paintImage?.args.data.nodeId);
+    if (!matchingNode) {
+      return;
+    }
+    // The unsized image is a potential root cause of all the shifts of this prePaint.
+    for (const shift of shifts) {
+      const rootCausesForShift = rootCausesByShift.get(shift);
+      if (!rootCausesForShift) {
+        throw new Error('Unaccounted shift');
+      }
+      rootCausesForShift.unsizedImages.push(matchingNode.args.data.nodeId);
+    }
+  });
+  return rootCausesByShift;
+}
+
 /**
  * A font request is considered a root cause if the request occurs before a prePaint event
  * and within this prePaint event a layout shift(s) occurs. Additionally, this font request should
- * happen within the INVALIDATION_WINDOW of the prePaint event.
+ * happen within the ROOT_CAUSE_WINDOW of the prePaint event.
  */
 function getFontRootCauses(
     networkRequests: Types.Events.SyntheticNetworkRequest[], prePaintEvents: Types.Events.PrePaint[],
@@ -272,13 +377,13 @@ function getFontRootCauses(
       networkRequests.filter(req => req.args.data.resourceType === 'Font' && req.args.data.mimeType.startsWith('font'));
 
   for (const req of fontRequests) {
-    const nextPrePaint = getNextPrePaintEvent(prePaintEvents, req);
+    const nextPrePaint = getNextEvent(prePaintEvents, req) as Types.Events.PrePaint | null;
     if (!nextPrePaint) {
       continue;
     }
 
-    // If the req is outside the INVALIDATION_WINDOW, it could not be a root cause.
-    if (!isInInvalidationWindow(req, nextPrePaint)) {
+    // If the req is outside the ROOT_CAUSE_WINDOW, it could not be a root cause.
+    if (!isInRootCauseWindow(req, nextPrePaint)) {
       continue;
     }
 
@@ -308,29 +413,41 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
   const iframeEvents = parsedTrace.LayoutShifts.renderFrameImplCreateChildFrameEvents.filter(isWithinContext);
   const networkRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);
   const domLoadingEvents = parsedTrace.LayoutShifts.domLoadingEvents.filter(isWithinContext);
+  const unsizedImageEvents = parsedTrace.LayoutShifts.layoutImageUnsizedEvents.filter(isWithinContext);
 
   const clusterKey = context.navigation ? context.navigationId : Types.Events.NO_NAVIGATION;
   const clusters = parsedTrace.LayoutShifts.clustersByNavigationId.get(clusterKey) ?? [];
+  const clustersByScore = clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore);
+  const worstCluster = clustersByScore.at(0);
   const layoutShifts = clusters.flatMap(cluster => cluster.events);
   const prePaintEvents = parsedTrace.LayoutShifts.prePaintEvents.filter(isWithinContext);
+  const paintImageEvents = parsedTrace.LayoutShifts.paintImageEvents.filter(isWithinContext);
 
   // Get root causes.
-  const rootCausesByShift = new Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>();
+  const rootCausesByShift = new Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>();
   const shiftsByPrePaint = getShiftsByPrePaintEvents(layoutShifts, prePaintEvents);
 
   for (const shift of layoutShifts) {
-    rootCausesByShift.set(shift, {iframeIds: [], fontRequests: [], nonCompositedAnimations: []});
+    rootCausesByShift.set(shift, {iframeIds: [], fontRequests: [], nonCompositedAnimations: [], unsizedImages: []});
   }
 
   // Populate root causes for rootCausesByShift.
   getIframeRootCauses(iframeEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift, domLoadingEvents);
   getFontRootCauses(networkRequests, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
+  getUnsizedImageRootCauses(unsizedImageEvents, paintImageEvents, shiftsByPrePaint, rootCausesByShift);
   const animationFailures =
       getNonCompositedFailureRootCauses(compositeAnimationEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
 
+  const relatedEvents: Types.Events.Event[] = [...layoutShifts];
+  if (worstCluster) {
+    relatedEvents.push(worstCluster);
+  }
+
   return {
+    relatedEvents,
     animationFailures,
     shifts: rootCausesByShift,
     clusters,
+    worstCluster,
   };
 }

package/front_end/models/trace/insights/DocumentLatency.test.ts

@@ -23,19 +23,19 @@ describeWithEnvironment('DocumentLatency', function() {
     const insight =
         getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
     assert.strictEqual(insight.data?.redirectDuration, 1779);
-    assert.deepEqual(insight.metricSavings, {FCP: 1779, LCP: 1779});
+    assert.deepEqual(insight.metricSavings, {FCP: 1779, LCP: 1779} as Trace.Insights.Types.MetricSavings);
   });
 
-  it('reports no savings for server with low response time', async () => {
+  it('reports no savings for server with fast server response time', async () => {
     const {data, insights} = await processTrace(this, 'lantern/paul/trace.json.gz');
     const insight =
         getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
     assert.strictEqual(insight.data?.serverResponseTime, 43);
     assert(!insight.data?.serverResponseTooSlow);
-    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0});
+    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);
   });
 
-  it('reports savings for server with high response time', async function() {
+  it('reports savings for server with slow server response time', async function() {
     const traceEvents = [...await TraceLoader.rawEvents(this, 'lantern/paul/trace.json.gz')];
     const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
 
@@ -46,11 +46,11 @@ describeWithEnvironment('DocumentLatency', function() {
     if (!mainRequestEvent.args.data.timing) {
       throw new Error('missing timing field');
     }
-    mainRequestEvent.args.data.timing.receiveHeadersStart =
-        Types.Timing.MilliSeconds(mainRequestEvent.args.data.timing.receiveHeadersStart + 1000);
+    mainRequestEvent.args.data.timing.receiveHeadersEnd =
+        Types.Timing.MilliSeconds(mainRequestEvent.args.data.timing.receiveHeadersEnd + 1000);
     traceEvents[mainRequestEventIndex] = mainRequestEvent;
 
-    await processor.parse(traceEvents);
+    await processor.parse(traceEvents, {isCPUProfile: false, isFreshRecording: true});
     const data = processor.parsedTrace;
     if (!data) {
       throw new Error('missing parsedTrace');
@@ -61,7 +61,7 @@ describeWithEnvironment('DocumentLatency', function() {
     const insight = Trace.Insights.InsightRunners.DocumentLatency.generateInsight(data, context);
     assert.strictEqual(insight.data?.serverResponseTime, 1043);
     assert(insight.data?.serverResponseTooSlow);
-    assert.deepEqual(insight.metricSavings, {FCP: 943, LCP: 943});
+    assert.deepEqual(insight.metricSavings, {FCP: 943, LCP: 943} as Trace.Insights.Types.MetricSavings);
   });
 
   it('reports no compression savings for compressed text', async () => {
@@ -69,7 +69,7 @@ describeWithEnvironment('DocumentLatency', function() {
     const insight =
         getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
     assert.strictEqual(insight.data?.uncompressedResponseBytes, 0);
-    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0});
+    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);
   });
 
   it('reports compression savings for uncompressed text', async function() {
@@ -84,7 +84,7 @@ describeWithEnvironment('DocumentLatency', function() {
     mainRequestEvent.args.data.headers = mainRequestEvent.args.data.headers?.filter(h => h.name !== 'content-encoding');
     traceEvents[mainRequestEventIndex] = mainRequestEvent;
 
-    await processor.parse(traceEvents);
+    await processor.parse(traceEvents, {isCPUProfile: false, isFreshRecording: true});
     const data = processor.parsedTrace;
     if (!data) {
       throw new Error('missing parsedTrace');
@@ -94,6 +94,17 @@ describeWithEnvironment('DocumentLatency', function() {
     const context = createContextForNavigation(data, navigation, data.Meta.mainFrameId);
     const insight = Trace.Insights.InsightRunners.DocumentLatency.generateInsight(data, context);
     assert.strictEqual(insight.data?.uncompressedResponseBytes, 39799);
-    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0});
+    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);
+  });
+
+  it('reports savings for main document with many issues, many redirects', async () => {
+    const {data, insights} = await processTrace(this, 'many-redirects.json.gz');
+    const insight =
+        getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+    assert.strictEqual(insight.data?.redirectDuration, 6059);
+    assert.strictEqual(insight.data?.uncompressedResponseBytes, 111506);
+    assert.strictEqual(insight.data?.serverResponseTime, 2008);
+    assert(insight.data?.serverResponseTooSlow);
+    assert.deepEqual(insight.metricSavings, {FCP: 7967, LCP: 7967} as Trace.Insights.Types.MetricSavings);
   });
 });

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 // Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.
 // We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.
@@ -28,13 +29,14 @@ export function deps(): ['Meta', 'NetworkRequests'] {
   return ['Meta', 'NetworkRequests'];
 }
 
-function getServerTiming(request: Types.Events.SyntheticNetworkRequest): Types.Timing.MilliSeconds|null {
+function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.MilliSeconds|null {
   const timing = request.args.data.timing;
   if (!timing) {
     return null;
   }
 
-  return Types.Timing.MilliSeconds(Math.round(timing.receiveHeadersStart - timing.sendEnd));
+  const ms = Helpers.Timing.microSecondsToMilliseconds(request.args.data.syntheticData.waiting);
+  return Math.round(ms) as Types.Timing.MilliSeconds;
 }
 
 function getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {
@@ -113,7 +115,7 @@ export function generateInsight(
     throw new Error('missing document request');
   }
 
-  const serverResponseTime = getServerTiming(documentRequest);
+  const serverResponseTime = getServerResponseTime(documentRequest);
   if (serverResponseTime === null) {
     throw new Error('missing document request timing');
   }
@@ -129,11 +131,12 @@ export function generateInsight(
   overallSavingsMs += redirectDuration;
 
   const metricSavings = {
-    FCP: overallSavingsMs,
-    LCP: overallSavingsMs,
+    FCP: overallSavingsMs as Types.Timing.MilliSeconds,
+    LCP: overallSavingsMs as Types.Timing.MilliSeconds,
   };
 
   return {
+    relatedEvents: [documentRequest],
     data: {
       serverResponseTime,
       serverResponseTooSlow,

package/front_end/models/trace/insights/FontDisplay.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'] {
   return ['Meta', 'NetworkRequests', 'LayoutShifts'];
@@ -55,7 +55,11 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
 
   fonts.sort((a, b) => b.wastedTime - a.wastedTime);
 
+  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.MilliSeconds;
+
   return {
+    relatedEvents: fonts.map(f => f.request),
     fonts,
+    metricSavings: {FCP: savings},
   };
 }

package/front_end/models/trace/insights/InteractionToNextPaint.ts

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 
 import * as Helpers from '../helpers/helpers.js';
-import {type SyntheticInteractionPair} from '../types/TraceEvents.js';
+import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['UserInteractions'] {
   return ['UserInteractions'];
@@ -17,7 +17,7 @@ export type INPInsightResult = InsightResult<{
 }>;
 
 export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): INPInsightResult {
-  const interactionEvents = parsedTrace.UserInteractions.interactionEvents.filter(event => {
+  const interactionEvents = parsedTrace.UserInteractions.interactionEventsWithNoNesting.filter(event => {
     return Helpers.Timing.eventIsInBounds(event, context.bounds);
   });
 
@@ -44,6 +44,7 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
   const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));
 
   return {
+    relatedEvents: [normalizedInteractionEvents[0]],
     longestInteractionEvent: normalizedInteractionEvents[0],
     highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],
   };

package/front_end/models/trace/insights/LargestContentfulPaint.test.ts

@@ -56,7 +56,7 @@ describeWithEnvironment('LargestContentfulPaint', function() {
     const {shouldIncreasePriorityHint, shouldPreloadImage, shouldRemoveLazyLoading} = insight;
 
     assert.strictEqual(shouldRemoveLazyLoading, false);
-    assert.strictEqual(shouldPreloadImage, true);
+    assert.strictEqual(shouldPreloadImage, false);
     assert.strictEqual(shouldIncreasePriorityHint, true);
   });
 
@@ -92,4 +92,12 @@ describeWithEnvironment('LargestContentfulPaint', function() {
       assert.strictEqual(insight.warnings?.[0], 'NO_DOCUMENT_REQUEST');
     });
   });
+
+  it('can handle old traces with missing data and return null for breakdowns of the phases', async () => {
+    const {data, insights} = await processTrace(this, 'multiple-navigations.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
+    // This insight has invalid phase data, so we expect the value to be undefined.
+    assert.isUndefined(insight.phases);
+  });
 });

package/front_end/models/trace/insights/LargestContentfulPaint.ts

@@ -48,9 +48,18 @@ export type LCPInsightResult = InsightResult<{
   earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds,
 }>;
 
+function anyValuesNaN(...values: number[]): boolean {
+  return values.some(v => Number.isNaN(v));
+}
+/**
+ * Calculates the 4 phases of an LCP and the timings of each.
+ * Will return `null` if any required values were missing. We don't ever expect
+ * them to be missing on newer traces, but old trace files may lack some of the
+ * data we rely on, so we want to handle that case.
+ */
 function breakdownPhases(
     nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,
-    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|null): LCPPhases {
+    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|null): LCPPhases|null {
   const docReqTiming = docRequest.args.data.timing;
   if (!docReqTiming) {
     throw new Error('no timing for document request');
@@ -63,6 +72,9 @@ function breakdownPhases(
   let renderDelay = Types.Timing.MilliSeconds(lcpMs - ttfb);
 
   if (!lcpRequest) {
+    if (anyValuesNaN(ttfb, renderDelay)) {
+      return null;
+    }
     return {ttfb, renderDelay};
   }
 
@@ -75,6 +87,9 @@ function breakdownPhases(
   const loadDelay = Types.Timing.MilliSeconds(requestStart - ttfb);
   const loadTime = Types.Timing.MilliSeconds(requestEnd - requestStart);
   renderDelay = Types.Timing.MilliSeconds(lcpMs - requestEnd);
+  if (anyValuesNaN(ttfb, loadDelay, loadTime, renderDelay)) {
+    return null;
+  }
 
   return {
     ttfb,
@@ -121,14 +136,19 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
       lcpMs,
       lcpTs,
       lcpEvent,
-      phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest),
+      phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
     };
   }
 
+  const initiatorUrl = lcpRequest.args.data.initiator?.url;
+  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request
+  // is discovered by the preload scanner.
+  const initiatedByMainDoc =
+      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
+  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;
+
   const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;
-  const imagePreloaded = lcpRequest?.args.data.isLinkPreload || lcpRequest?.args.data.initiator?.type === 'preload';
   const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;
-
   // This is the earliest discovery time an LCP request could have - it's TTFB.
   const earliestDiscoveryTime = docRequest && docRequest.args.data.timing ?
       Helpers.Timing.secondsToMicroseconds(docRequest.args.data.timing.requestTime) +
@@ -139,10 +159,10 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
     lcpMs,
     lcpTs,
     lcpEvent,
-    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest),
+    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
     shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',
     shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',
-    shouldPreloadImage: !imagePreloaded,
+    shouldPreloadImage: !imgPreloadedOrFoundInHTML,
     lcpRequest,
     earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,
   };