chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/models/trace/extras/TraceTree.ts

@@ -13,17 +13,23 @@ export class Node {
   totalTime: number;
   selfTime: number;
   id: string|symbol;
-  event: Types.Events.Event|null;
+  /** The first trace event encountered that necessitated the creation of this tree node. */
+  event: Types.Events.Event;
+  /** All of the trace events associated with this aggregate node.
+   * Minor: In the case of Event Log (EventsTimelineTreeView), the node is not aggregate and this will only hold 1 event, the same that's in this.event
+   */
+  events: Types.Events.Event[];
   parent!: Node|null;
   groupId: string;
   isGroupNodeInternal: boolean;
   depth: number;
 
-  constructor(id: string|symbol, event: Types.Events.Event|null) {
+  constructor(id: string|symbol, event: Types.Events.Event) {
     this.totalTime = 0;
     this.selfTime = 0;
     this.id = id;
     this.event = event;
+    this.events = [event];
 
     this.groupId = '';
     this.isGroupNodeInternal = false;
@@ -67,7 +73,7 @@ export class TopDownNode extends Node {
   childrenInternal: ChildrenCache|null;
   override parent: TopDownNode|null;
 
-  constructor(id: string|symbol, event: Types.Events.Event|null, parent: TopDownNode|null) {
+  constructor(id: string|symbol, event: Types.Events.Event, parent: TopDownNode|null) {
     super(id, event);
     this.root = parent && parent.root;
     this.hasChildrenInternal = false;
@@ -180,6 +186,8 @@ export class TopDownNode extends Node {
         node = new TopDownNode(id, e, self);
         node.groupId = groupId;
         children.set(id, node);
+      } else {
+        node.events.push(e);
       }
       node.selfTime += duration;
       node.totalTime += duration;
@@ -238,8 +246,6 @@ export class TopDownNode extends Node {
 
 export class TopDownRootNode extends TopDownNode {
   readonly filter: (e: Types.Events.Event) => boolean;
-  /** This is all events passed in to create the tree, and it's very likely that it included events outside of the passed startTime/endTime as that filtering is done in `Helpers.Trace.forEachEvent` */
-  readonly events: Types.Events.Event[];
   readonly startTime: Types.Timing.MilliSeconds;
   readonly endTime: Types.Timing.MilliSeconds;
   eventGroupIdCallback: ((arg0: Types.Events.Event) => string)|null|undefined;
@@ -253,7 +259,8 @@ export class TopDownRootNode extends TopDownNode {
       events: Types.Events.Event[], filters: TraceFilter[], startTime: Types.Timing.MilliSeconds,
       endTime: Types.Timing.MilliSeconds, doNotAggregate?: boolean,
       eventGroupIdCallback?: ((arg0: Types.Events.Event) => string)|null, includeInstantEvents?: boolean) {
-    super('', null, null);
+    super('', events[0], null);
+    this.event = events[0];
     this.root = this;
     this.events = events;
     this.filter = (e: Types.Events.Event): boolean => filters.every(f => f.accept(e));
@@ -281,14 +288,13 @@ export class TopDownRootNode extends TopDownNode {
     }
     const groupNodes = new Map<string, GroupNode>();
     for (const node of flatNodes.values()) {
-      if (!node.event) {
-        continue;
-      }
       const groupId = this.eventGroupIdCallback(node.event);
       let groupNode = groupNodes.get(groupId);
       if (!groupNode) {
-        groupNode = new GroupNode(groupId, this, node.event);
+        groupNode = new GroupNode(groupId, this, node.events);
         groupNodes.set(groupId, groupNode);
+      } else {
+        groupNode.events.push(...node.events);
       }
       groupNode.addChild(node as BottomUpNode, node.selfTime, node.totalTime);
     }
@@ -303,7 +309,6 @@ export class TopDownRootNode extends TopDownNode {
 
 export class BottomUpRootNode extends Node {
   private childrenInternal: ChildrenCache|null;
-  readonly events: Types.Events.Event[];
   private textFilter: TraceFilter;
   readonly filter: (e: Types.Events.Event) => boolean;
   readonly startTime: Types.Timing.MilliSeconds;
@@ -315,7 +320,7 @@ export class BottomUpRootNode extends Node {
       events: Types.Events.Event[], textFilter: TraceFilter, filters: TraceFilter[],
       startTime: Types.Timing.MilliSeconds, endTime: Types.Timing.MilliSeconds,
       eventGroupIdCallback: ((arg0: Types.Events.Event) => string)|null) {
-    super('', null);
+    super('', events[0]);
     this.childrenInternal = null;
     this.events = events;
     this.textFilter = textFilter;
@@ -388,6 +393,8 @@ export class BottomUpRootNode extends Node {
       if (!node) {
         node = new BottomUpNode(root, id, event, false, root);
         nodeById.set(id, node);
+      } else {
+        node.events.push(event);
       }
       node.selfTime += selfTimeStack.pop() || 0;
       if (firstNodeStack.pop()) {
@@ -415,14 +422,13 @@ export class BottomUpRootNode extends Node {
     }
     const groupNodes = new Map<string, GroupNode>();
     for (const node of flatNodes.values()) {
-      if (!node.event) {
-        continue;
-      }
       const groupId = this.eventGroupIdCallback(node.event);
       let groupNode = groupNodes.get(groupId);
       if (!groupNode) {
-        groupNode = new GroupNode(groupId, this, node.event);
+        groupNode = new GroupNode(groupId, this, node.events);
         groupNodes.set(groupId, groupNode);
+      } else {
+        groupNode.events.push(...node.events);
       }
       groupNode.addChild(node as BottomUpNode, node.selfTime, node.selfTime);
     }
@@ -433,9 +439,11 @@ export class BottomUpRootNode extends Node {
 export class GroupNode extends Node {
   private readonly childrenInternal: ChildrenCache;
   override isGroupNodeInternal: boolean;
+  override events: Types.Events.Event[];
 
-  constructor(id: string, parent: BottomUpRootNode|TopDownRootNode, event: Types.Events.Event) {
-    super(id, event);
+  constructor(id: string, parent: BottomUpRootNode|TopDownRootNode, events: Types.Events.Event[]) {
+    super(id, events[0]);
+    this.events = events;
     this.childrenInternal = new Map();
     this.parent = parent;
     this.isGroupNodeInternal = true;
@@ -539,6 +547,8 @@ export class BottomUpNode extends Node {
         const hasChildren = eventStack.length > self.depth;
         node = new BottomUpNode(self.root, childId, event, hasChildren, self);
         nodeById.set(childId, node);
+      } else {
+        node.events.push(e);
       }
       const actualEndTime = currentEndTime !== undefined ? Math.min(currentEndTime, endTime) : endTime;
       const totalTime = actualEndTime - Math.max(currentStartTime, lastTimeMarker);

package/front_end/models/trace/extras/URLForEntry.ts

@@ -7,12 +7,13 @@ import type * as Handlers from '../handlers/handlers.js';
 import * as Types from '../types/types.js';
 
 /**
- * Use this helper whenever resolving an URL's source mapping is not an
- * option. For example when processing non-ui data. Otherwise use the
- * helper SourceMapsResolver::resolvedURLForEntry
+ * INSTEAD, you probably want `SourceMapsResolver.resolvedURLForEntry()`!
+ * If an URL will be displayed in the UI, it's likely you should NOT use `getNonResolved`.
  *
- * If an URL will be displayed in the UI, it's likely you should not use
- * this helper and prefer the other option instead.
+ * Use `getNonResolved` method whenever resolving an URL's source mapping is not an
+ * option. For example when processing non-ui data.
+ *
+ * TODO: migrate existing uses of this over to resolvedURLForEntry.
  */
 
 export function getNonResolved(

package/front_end/models/trace/handlers/ImagePaintingHandler.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../core/platform/platform.js';
 import * as Types from '../types/types.js';
 
 /**
@@ -37,11 +38,14 @@ const paintImageByLazyPixelRef: Map<number, Types.Events.PaintImage> = new Map()
 // have a relationship to a individual PaintImage event.
 const eventToPaintImage: Map<Types.Events.Event, Types.Events.PaintImage> = new Map();
 
+const urlToPaintImage: Map<string, Types.Events.PaintImage[]> = new Map();
+
 export function reset(): void {
   paintImageEvents.clear();
   decodeLazyPixelRefEvents.clear();
   paintImageByLazyPixelRef.clear();
   eventToPaintImage.clear();
+  urlToPaintImage.clear();
 }
 
 export function handleEvent(event: Types.Events.Event): void {
@@ -51,6 +55,12 @@ export function handleEvent(event: Types.Events.Event): void {
     forThread.push(event);
     forProcess.set(event.tid, forThread);
     paintImageEvents.set(event.pid, forProcess);
+
+    if (event.args.data.url) {
+      const paintsForUrl = Platform.MapUtilities.getWithDefault(urlToPaintImage, event.args.data.url, () => []);
+      paintsForUrl.push(event);
+    }
+
     return;
   }
 
@@ -118,11 +128,13 @@ export async function finalize(): Promise<void> {
 export interface ImagePaintData {
   paintImageByDrawLazyPixelRef: Map<number, Types.Events.PaintImage>;
   paintImageForEvent: Map<Types.Events.Event, Types.Events.PaintImage>;
+  paintImageEventForUrl: Map<string, Types.Events.PaintImage[]>;
 }
 
 export function data(): ImagePaintData {
   return {
     paintImageByDrawLazyPixelRef: paintImageByLazyPixelRef,
     paintImageForEvent: eventToPaintImage,
+    paintImageEventForUrl: urlToPaintImage,
   };
 }

package/front_end/models/trace/helpers/Timing.ts

@@ -147,6 +147,14 @@ export function traceWindowFromMicroSeconds(
   return traceWindow;
 }
 
+export function traceWindowFromEvent(event: Types.Events.Event): Types.Timing.TraceWindowMicroSeconds {
+  return {
+    min: event.ts,
+    max: Types.Timing.MicroSeconds(event.ts + (event.dur ?? 0)),
+    range: event.dur ?? Types.Timing.MicroSeconds(0),
+  };
+}
+
 export interface BoundsIncludeTimeRange {
   timeRange: Types.Timing.TraceWindowMicroSeconds;
   bounds: Types.Timing.TraceWindowMicroSeconds;

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

@@ -8,7 +8,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
 
 const UIStrings = {
   /** Title of an insight that provides details about why elements shift/move on the page. The causes for these shifts are referred to as culprits ("reasons"). */
@@ -420,8 +420,16 @@ function getFontRootCauses(
   return rootCausesByShift;
 }
 
-function finalize(partialModel: Omit<CLSCulpritsInsightModel, 'title'|'description'>): CLSCulpritsInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<CLSCulpritsInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    CLSCulpritsInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.CLS,
+    // TODO: getTopCulprits in component needs to move to model so this can be set here.
+    shouldShow: true,
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

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

@@ -6,7 +6,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
 
 const UIStrings = {
   /**
@@ -119,8 +119,21 @@ function getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): n
   return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;
 }
 
-function finalize(partialModel: Omit<DocumentLatencyInsightModel, 'title'|'description'>): DocumentLatencyInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<DocumentLatencyInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    DocumentLatencyInsightModel {
+  let hasFailure = false;
+  if (partialModel.data) {
+    hasFailure = partialModel.data.redirectDuration > 0 || partialModel.data.serverResponseTooSlow ||
+        partialModel.data.uncompressedResponseBytes > 0;
+  }
+
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.ALL,
+    shouldShow: hasFailure,
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

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

@@ -7,7 +7,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 {InsightModel, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
 
 const UIStrings = {
   /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
@@ -34,8 +34,15 @@ export type FontDisplayInsightModel = InsightModel<{
   }>,
 }>;
 
-function finalize(partialModel: Omit<FontDisplayInsightModel, 'title'|'description'>): FontDisplayInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<FontDisplayInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    FontDisplayInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.INP,
+    shouldShow: Boolean(partialModel.fonts.find(font => font.wastedTime > 0)),
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

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

@@ -0,0 +1,98 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {getFirstOrError, getInsightOrError} from '../../../testing/InsightHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+
+export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
+  const {parsedTrace, insights} = await TraceLoader.traceEngine(testContext, traceFile);
+  if (!insights) {
+    throw new Error('No insights');
+  }
+
+  return {data: parsedTrace, insights};
+}
+
+describeWithEnvironment('ImageDelivery', function() {
+  it('finds requests for remote fonts', async () => {
+    // See the following for a description of each test case:
+    // https://gist.github.com/adamraine/397e2bd08665f9e45f6072e446715115
+    const {data, insights} = await processTrace(this, 'image-delivery.json.gz');
+
+    const imageRequests = data.NetworkRequests.byTime.filter(r => r.args.data.resourceType === 'Image');
+    assert.deepStrictEqual(imageRequests.map(r => r.args.data.url), [
+      'https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg',
+      'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif',
+      'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5d52a2ab-7be3-4931-9e82-8728d1f55620/d51jfzi-b0efc925-7704-44bb-a3b8-8d98545af693.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVkNTJhMmFiLTdiZTMtNDkzMS05ZTgyLTg3MjhkMWY1NTYyMFwvZDUxamZ6aS1iMGVmYzkyNS03NzA0LTQ0YmItYTNiOC04ZDk4NTQ1YWY2OTMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.T898HUlAbGFPboxRE43H5JujnDGl0zd_T128PnGLlpg',
+      'https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp',
+      'https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=avif',
+      'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp',
+      'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-480x320.webp',
+      'https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png',
+      'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-480x318.jpg',
+    ]);
+
+    const insight =
+        getInsightOrError('ImageDelivery', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+    assert.deepStrictEqual(
+        insight.optimizableImages.map(o => ({url: o.request.args.data.url, optimizations: o.optimizations})),
+        [
+          {
+            optimizations: [
+              {
+                byteSavings: 1057876,
+                type: 'modern-format-or-compression',
+              },
+            ],
+            url:
+                'https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg',
+          },
+          {
+            optimizations: [
+              {
+                byteSavings: 682028,
+                type: 'video-format',
+              },
+            ],
+            url:
+                'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif',
+          },
+          {
+            optimizations: [
+              {
+                byteSavings: 49760,
+                type: 'compression',
+              },
+            ],
+            url:
+                'https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp',
+          },
+          {
+            optimizations: [
+              {
+                byteSavings: 41421,
+                type: 'responsive-size',
+              },
+            ],
+            url:
+                'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp',
+          },
+          {
+            optimizations: [
+              {
+                byteSavings: 134075,
+                type: 'modern-format-or-compression',
+              },
+              {
+                byteSavings: 162947,
+                type: 'responsive-size',
+              },
+            ],
+            url: 'https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png',
+          },
+        ],
+    );
+  });
+});

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

@@ -0,0 +1,183 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Helpers from '../helpers/helpers.js';
+import type * as Types from '../types/types.js';
+
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
+
+const UIStrings = {
+  /**
+   * @description Title of an insight that recommends ways to reduce the size of images downloaded and used on the page.
+   */
+  title: 'Improve image delivery',
+  /**
+   * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
+   */
+  description:
+      'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ImageDelivery.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+/**
+ * Even JPEGs with lots of detail can usually be compressed down to <1 byte per pixel
+ * Using 4:2:2 subsampling already gets an uncompressed bitmap to 2 bytes per pixel.
+ * The compression ratio for JPEG is usually somewhere around 10:1 depending on content, so
+ * 8:1 is a reasonable expectation for web content which is 1.5MB for a 6MP image.
+ *
+ * WebP usually gives ~20% additional savings on top of that, so we will assume 10:1 for WebP.
+ * This is quite pessimistic as their study shows a photographic compression ratio of ~29:1.
+ * https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results
+ *
+ * AVIF usually gives ~20% additional savings on top of WebP, so we will use 12:1 for AVIF.
+ * This is quite pessimistic as Netflix study shows a photographic compression ratio of ~40:1
+ * (0.4 *bits* per pixel at SSIM 0.97).
+ * https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
+ */
+const TARGET_BYTES_PER_PIXEL_AVIF = 2 * 1 / 12;
+
+/**
+ * If GIFs are above this size, we'll flag them
+ * See https://github.com/GoogleChrome/lighthouse/pull/4885#discussion_r178406623 and https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-370979920
+ */
+const GIF_SIZE_THRESHOLD = 100 * 1024;
+
+const BYTE_SAVINGS_THRESHOLD = 4096;
+
+export function deps(): ['NetworkRequests', 'Meta', 'ImagePainting'] {
+  return ['NetworkRequests', 'Meta', 'ImagePainting'];
+}
+
+export type ImageOptimizationType = 'modern-format-or-compression'|'compression'|'video-format'|'responsive-size';
+
+export interface ImageOptimization {
+  type: ImageOptimizationType;
+  byteSavings: number;
+}
+
+export interface OptimizableImage {
+  request: Types.Events.SyntheticNetworkRequest;
+  optimizations: ImageOptimization[];
+  /**
+   * If the an image resource has multiple `PaintImage`s, we compare its intrinsic size to the largest of the displayed sizes.
+   *
+   * It is theoretically possible for `PaintImage` events with the same URL to have different intrinsic sizes.
+   * However, this should be rare because it requires serving different images from the same URL.
+   */
+  largestImagePaint: Types.Events.PaintImage;
+}
+
+export type ImageDeliveryInsightModel = InsightModel<{
+  optimizableImages: OptimizableImage[],
+}>;
+
+function finalize(partialModel: Omit<ImageDeliveryInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    ImageDeliveryInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    shouldShow: partialModel.optimizableImages.length > 0,
+    ...partialModel,
+    relatedEvents: partialModel.optimizableImages.map(image => image.request),
+  };
+}
+
+/**
+ * Calculate rough savings percentage based on 1000 real gifs transcoded to video
+ * https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-380296510
+ */
+function estimateGIFPercentSavings(request: Types.Events.SyntheticNetworkRequest): number {
+  return Math.round((29.1 * Math.log10(request.args.data.decodedBodyLength) - 100.7)) / 100;
+}
+
+function getPixelCounts(paintImage: Types.Events.PaintImage): {displayedPixels: number, filePixels: number} {
+  return {
+    filePixels: paintImage.args.data.srcWidth * paintImage.args.data.srcHeight,
+    displayedPixels: paintImage.args.data.width * paintImage.args.data.height,
+  };
+}
+
+export function generateInsight(
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ImageDeliveryInsightModel {
+  const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);
+
+  const contextRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);
+
+  const optimizableImages: OptimizableImage[] = [];
+  for (const request of contextRequests) {
+    if (request.args.data.resourceType !== 'Image') {
+      continue;
+    }
+
+    const imagePaints =
+        parsedTrace.ImagePainting.paintImageEventForUrl.get(request.args.data.url)?.filter(isWithinContext);
+
+    // This will filter out things like preloaded image requests where an image file is downloaded
+    // but never rendered on the page.
+    if (!imagePaints?.length) {
+      continue;
+    }
+
+    const largestImagePaint = imagePaints.reduce((prev, curr) => {
+      const prevPixels = getPixelCounts(prev).displayedPixels;
+      const currPixels = getPixelCounts(curr).displayedPixels;
+      return prevPixels > currPixels ? prev : curr;
+    });
+
+    const {
+      filePixels: imageFilePixels,
+      displayedPixels: largestImageDisplayPixels,
+    } = getPixelCounts(largestImagePaint);
+
+    // Decoded body length is almost always the right one to be using because of the below:
+    //     `encodedDataLength = decodedBodyLength + headers`.
+    // HOWEVER, there are some cases where an image is compressed again over the network and transfer size
+    // is smaller (see https://github.com/GoogleChrome/lighthouse/pull/4968).
+    // Use the min of the two numbers to be safe.
+    const imageBytes = Math.min(request.args.data.decodedBodyLength, request.args.data.encodedDataLength);
+
+    const bytesPerPixel = imageBytes / imageFilePixels;
+
+    let optimizations: ImageOptimization[] = [];
+    if (request.args.data.mimeType === 'image/gif') {
+      if (imageBytes > GIF_SIZE_THRESHOLD) {
+        const percentSavings = estimateGIFPercentSavings(request);
+        const byteSavings = Math.round(imageBytes * percentSavings);
+        optimizations.push({type: 'video-format', byteSavings});
+      }
+    } else if (bytesPerPixel > TARGET_BYTES_PER_PIXEL_AVIF) {
+      const idealAvifImageSize = Math.round(TARGET_BYTES_PER_PIXEL_AVIF * imageFilePixels);
+      const byteSavings = imageBytes - idealAvifImageSize;
+      if (request.args.data.mimeType !== 'image/webp' && request.args.data.mimeType !== 'image/avif') {
+        optimizations.push({type: 'modern-format-or-compression', byteSavings});
+      } else {
+        optimizations.push({type: 'compression', byteSavings});
+      }
+    }
+
+    const wastedPixelRatio = 1 - (largestImageDisplayPixels / imageFilePixels);
+    if (wastedPixelRatio > 0) {
+      const byteSavings = Math.round(wastedPixelRatio * imageBytes);
+      optimizations.push({type: 'responsive-size', byteSavings});
+    }
+
+    optimizations = optimizations.filter(optimization => optimization.byteSavings > BYTE_SAVINGS_THRESHOLD);
+
+    if (optimizations.length > 0) {
+      optimizableImages.push({
+        request,
+        largestImagePaint,
+        optimizations,
+      });
+    }
+  }
+
+  return finalize({
+    optimizableImages,
+  });
+}

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

@@ -6,7 +6,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Helpers from '../helpers/helpers.js';
 import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 
-import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
 
 const UIStrings = {
   /**
@@ -32,8 +32,14 @@ export type INPInsightModel = InsightModel<{
   highPercentileInteractionEvent?: SyntheticInteractionPair,
 }>;
 
-function finalize(partialModel: Omit<INPInsightModel, 'title'|'description'>): INPInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<INPInsightModel, 'title'|'description'|'category'|'shouldShow'>): INPInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.INP,
+    shouldShow: Boolean(partialModel.longestInteractionEvent),
+    ...partialModel,
+  };
 }
 
 export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): INPInsightModel {

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

@@ -7,7 +7,13 @@ import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type InsightModel, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type RequiredData,
+} from './types.js';
 
 const UIStrings = {
   /**
@@ -38,8 +44,23 @@ export type LCPDiscoveryInsightModel = InsightModel<{
   earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds,
 }>;
 
-function finalize(partialModel: Omit<LCPDiscoveryInsightModel, 'title'|'description'>): LCPDiscoveryInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<LCPDiscoveryInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    LCPDiscoveryInsightModel {
+  const relatedEvents = partialModel.lcpEvent && partialModel.lcpRequest ?
+      // TODO: add entire request initiator chain?
+      [partialModel.lcpEvent, partialModel.lcpRequest] :
+      [];
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    shouldShow: Boolean(
+        partialModel.lcpRequest &&
+        (partialModel.shouldIncreasePriorityHint || partialModel.shouldPreloadImage ||
+         partialModel.shouldRemoveLazyLoading)),
+    ...partialModel,
+    relatedEvents,
+  };
 }
 
 export function generateInsight(