chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -6,9 +6,17 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
-
-const UIStrings = {
+import {
+  type Checklist,
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type PartialInsightModel,
+  type RequiredData
+} from './types.js';
+
+export const UIStrings = {
   /**
    *@description Title of an insight that provides a breakdown for how long it took to download the main document.
    */
@@ -18,10 +26,46 @@ const UIStrings = {
    */
   description:
       'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',
+  /**
+   * @description Text to tell the user that the document request does not have redirects.
+   */
+  passingRedirects: 'Avoids redirects',
+  /**
+   * @description Text to tell the user that the document request had redirects.
+   */
+  failedRedirects: 'Had redirects',
+  /**
+   * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.
+   */
+  passingServerResponseTime: 'Server responds quickly',
+  /**
+   * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.
+   */
+  failedServerResponseTime: 'Server responded slowly',
+  /**
+   * @description Text to tell the user that text compression (like gzip) was applied.
+   */
+  passingTextCompression: 'Applies text compression',
+  /**
+   * @description Text to tell the user that text compression (like gzip) was not applied.
+   */
+  failedTextCompression: 'No compression applied',
+  /**
+   * @description Text for a label describing a network request event as having redirects.
+   */
+  redirectsLabel: 'Redirects',
+  /**
+   * @description Text for a label describing a network request event as taking too long to start delivery by the server.
+   */
+  serverResponseTimeLabel: 'Server response time',
+  /**
+   * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.
+   */
+  uncompressedDownload: 'Uncompressed download',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 // 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.
@@ -31,13 +75,13 @@ const TARGET_MS = 100;
 // Threshold for compression savings.
 const IGNORE_THRESHOLD_IN_BYTES = 1400;
 
-export type DocumentLatencyInsightModel = InsightModel<{
+export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
   data?: {
-    serverResponseTime: Types.Timing.MilliSeconds,
-    serverResponseTooSlow: boolean,
-    redirectDuration: Types.Timing.MilliSeconds,
+    serverResponseTime: Types.Timing.Milli,
+    redirectDuration: Types.Timing.Milli,
     uncompressedResponseBytes: number,
     documentRequest?: Types.Events.SyntheticNetworkRequest,
+                   checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,
   },
 }>;
 
@@ -45,14 +89,14 @@ export function deps(): ['Meta', 'NetworkRequests'] {
   return ['Meta', 'NetworkRequests'];
 }
 
-function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.MilliSeconds|null {
+function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {
   const timing = request.args.data.timing;
   if (!timing) {
     return null;
   }
 
-  const ms = Helpers.Timing.microSecondsToMilliseconds(request.args.data.syntheticData.waiting);
-  return Math.round(ms) as Types.Timing.MilliSeconds;
+  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.waiting);
+  return Math.round(ms) as Types.Timing.Milli;
 }
 
 function getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {
@@ -119,19 +163,19 @@ function getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): n
   return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;
 }
 
-function finalize(partialModel: Omit<DocumentLatencyInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    DocumentLatencyInsightModel {
+function finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {
   let hasFailure = false;
   if (partialModel.data) {
-    hasFailure = partialModel.data.redirectDuration > 0 || partialModel.data.serverResponseTooSlow ||
-        partialModel.data.uncompressedResponseBytes > 0;
+    hasFailure = !partialModel.data.checklist.usesCompression.value ||
+        !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;
   }
 
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.ALL,
-    shouldShow: hasFailure,
+    state: hasFailure ? 'fail' : 'pass',
     ...partialModel,
   };
 }
@@ -145,7 +189,7 @@ export function generateInsight(
   const documentRequest =
       parsedTrace.NetworkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
   if (!documentRequest) {
-    throw new Error('missing document request');
+    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
   }
 
   const serverResponseTime = getServerResponseTime(documentRequest);
@@ -164,18 +208,39 @@ export function generateInsight(
   overallSavingsMs += redirectDuration;
 
   const metricSavings = {
-    FCP: overallSavingsMs as Types.Timing.MilliSeconds,
-    LCP: overallSavingsMs as Types.Timing.MilliSeconds,
+    FCP: overallSavingsMs as Types.Timing.Milli,
+    LCP: overallSavingsMs as Types.Timing.Milli,
   };
 
+  const uncompressedResponseBytes = getCompressionSavings(documentRequest);
+
+  const noRedirects = redirectDuration === 0;
+  const serverResponseIsFast = !serverResponseTooSlow;
+  const usesCompression = uncompressedResponseBytes === 0;
+
   return finalize({
     relatedEvents: [documentRequest],
     data: {
       serverResponseTime,
-      serverResponseTooSlow,
-      redirectDuration: Types.Timing.MilliSeconds(redirectDuration),
-      uncompressedResponseBytes: getCompressionSavings(documentRequest),
+      redirectDuration: Types.Timing.Milli(redirectDuration),
+      uncompressedResponseBytes,
       documentRequest,
+      checklist: {
+        noRedirects: {
+          label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects),
+          value: noRedirects
+        },
+        serverResponseIsFast: {
+          label: serverResponseIsFast ? i18nString(UIStrings.passingServerResponseTime) :
+                                        i18nString(UIStrings.failedServerResponseTime),
+          value: serverResponseIsFast
+        },
+        usesCompression: {
+          label: usesCompression ? i18nString(UIStrings.passingTextCompression) :
+                                   i18nString(UIStrings.failedTextCompression),
+          value: usesCompression
+        },
+      },
     },
     metricSavings,
   });

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

@@ -7,9 +7,15 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  type PartialInsightModel,
+  type RequiredData
+} from './types.js';
 
-const UIStrings = {
+export const UIStrings = {
   /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
   title: 'Font display',
   /**
@@ -17,30 +23,34 @@ const UIStrings = {
    */
   description:
       'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',
+  /** Column for a font loaded by the page to render text. */
+  fontColumn: 'Font',
+  /** Column for the amount of time wasted. */
+  wastedTimeColumn: 'Wasted time',
 };
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'] {
   return ['Meta', 'NetworkRequests', 'LayoutShifts'];
 }
 
-export type FontDisplayInsightModel = InsightModel<{
+export type FontDisplayInsightModel = InsightModel<typeof UIStrings, {
   fonts: Array<{
     request: Types.Events.SyntheticNetworkRequest,
     display: string,
-    wastedTime: Types.Timing.MilliSeconds,
+    wastedTime: Types.Timing.Milli,
   }>,
 }>;
 
-function finalize(partialModel: Omit<FontDisplayInsightModel, 'title'|'description'|'category'|'shouldShow'>):
-    FontDisplayInsightModel {
+function finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {
   return {
+    strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.INP,
-    shouldShow: Boolean(partialModel.fonts.find(font => font.wastedTime > 0)),
+    state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',
     ...partialModel,
   };
 }
@@ -60,16 +70,16 @@ export function generateInsight(
     }
 
     const display = event.args.display;
-    let wastedTime = Types.Timing.MilliSeconds(0);
+    let wastedTime = Types.Timing.Milli(0);
 
     if (/^(block|fallback|auto)$/.test(display)) {
-      const wastedTimeMicro = Types.Timing.MicroSeconds(
+      const wastedTimeMicro = Types.Timing.Micro(
           request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);
       // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.
-      wastedTime = Platform.NumberUtilities.floor(Helpers.Timing.microSecondsToMilliseconds(wastedTimeMicro), 1 / 5) as
-          Types.Timing.MilliSeconds;
+      wastedTime =
+          Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;
       // All browsers wait for no more than 3s.
-      wastedTime = Math.min(wastedTime, 3000) as Types.Timing.MilliSeconds;
+      wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;
     }
 
     fonts.push({
@@ -81,7 +91,7 @@ export function generateInsight(
 
   fonts.sort((a, b) => b.wastedTime - a.wastedTime);
 
-  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.MilliSeconds;
+  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.Milli;
 
   return finalize({
     relatedEvents: fonts.map(f => f.request),

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

@@ -0,0 +1,35 @@
+// 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 {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('ForcedReflow', function() {
+  // Skip to re-open the tree
+  it.skip('[crbug.com/392557418]: generates call stacks', async function() {
+    const {data, insights} = await processTrace(this, 'forced-reflow.json.gz');
+    assert.strictEqual(insights.size, 1);
+    const insight =
+        getInsightOrError('ForcedReflow', insights, data.Meta.navigationsByNavigationId.values().next().value);
+
+    assert.strictEqual(insight.topLevelFunctionCallData?.topLevelFunctionCall.columnNumber, 25217);
+    assert.strictEqual(insight.topLevelFunctionCallData?.topLevelFunctionCall.lineNumber, 6);
+    assert.strictEqual(insight.topLevelFunctionCallData?.totalReflowTime, 26052);
+
+    const callStack = insight.aggregatedBottomUpData[1];
+    assert.strictEqual(callStack.bottomUpData.columnNumber, 137906);
+    assert.strictEqual(callStack.bottomUpData.lineNumber, 6);
+    assert.lengthOf(callStack.relatedEvents, 2);
+  });
+});

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

@@ -0,0 +1,224 @@
+// 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 type * as Protocol from '../../../generated/protocol.js';
+import type {Warning} from '../handlers/WarningsHandler.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+import {
+  type BottomUpCallStack,
+  type ForcedReflowAggregatedData,
+  InsightCategory,
+  type InsightModel,
+  type PartialInsightModel,
+  type RequiredData,
+} from './types.js';
+
+export function deps(): ['Warnings', 'Renderer'] {
+  return ['Warnings', 'Renderer'];
+}
+
+export const UIStrings = {
+  /**
+   *@description Title of an insight that provides details about Forced reflow.
+   */
+  title: 'Forced reflow',
+  /**
+   * @description Text to describe the forced reflow.
+   */
+  description:
+      'Many APIs, typically reading layout geometry, force the rendering engine to pause script execution in order to calculate the style and layout. Learn more about [forced reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and its mitigations.',
+  /**
+   *@description Title of a list to provide related stack trace data
+   */
+  relatedStackTrace: 'Stack trace',
+  /**
+   *@description Text to describe the top time-consuming function call
+   */
+  topTimeConsumingFunctionCall: 'Top function call',
+  /**
+   * @description Text to describe the total reflow time
+   */
+  totalReflowTime: 'Total reflow time',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {
+  topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,
+  aggregatedBottomUpData: BottomUpCallStack[],
+}>;
+
+function aggregateForcedReflow(
+    data: Map<Warning, Types.Events.Event[]>,
+    entryToNodeMap: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>):
+    [ForcedReflowAggregatedData|undefined, BottomUpCallStack[]] {
+  const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();
+  const bottomUpDataMap = new Map<string, BottomUpCallStack>();
+  const forcedReflowEvents = data.get('FORCED_REFLOW');
+  if (!forcedReflowEvents || forcedReflowEvents.length === 0) {
+    return [undefined, []];
+  }
+
+  forcedReflowEvents.forEach(e => {
+    // Gather the stack traces by searching in the tree
+    const traceNode = entryToNodeMap.get(e);
+
+    if (!traceNode) {
+      return;
+    }
+    // Compute call stack fully
+    const bottomUpData: (Types.Events.CallFrame|Protocol.Runtime.CallFrame)[] = [];
+    let currentNode = traceNode;
+    let previousNode;
+    const childStack: Protocol.Runtime.CallFrame[] = [];
+
+    // Some profileCalls maybe constructed as its children in hierarchy tree
+    while (currentNode.children.length > 0) {
+      const childNode = currentNode.children[0];
+      if (!previousNode) {
+        previousNode = childNode;
+      }
+      const eventData = childNode.entry;
+      if (Types.Events.isProfileCall(eventData)) {
+        childStack.push(eventData.callFrame);
+      }
+      currentNode = childNode;
+    }
+
+    // In order to avoid too much information, we only contain 2 levels bottomUp data,
+    while (childStack.length > 0 && bottomUpData.length < 2) {
+      const traceData = childStack.pop();
+      if (traceData) {
+        bottomUpData.push(traceData);
+      }
+    }
+
+    let node = traceNode.parent;
+    let topLevelFunctionCall;
+    let topLevelFunctionCallEvent: Types.Events.Event|undefined;
+    while (node) {
+      const eventData = node.entry;
+      if (Types.Events.isProfileCall(eventData)) {
+        if (bottomUpData.length < 2) {
+          bottomUpData.push(eventData.callFrame);
+        }
+      } else {
+        // We have finished searching bottom up data
+        if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&
+            Types.Events.objectIsCallFrame(eventData.args.data)) {
+          topLevelFunctionCall = eventData.args.data;
+          topLevelFunctionCallEvent = eventData;
+          if (bottomUpData.length === 0) {
+            bottomUpData.push(topLevelFunctionCall);
+          }
+        } else {
+          // Sometimes the top level task can be other JSInvocation event
+          // then we use the top level profile call as topLevelFunctionCall's data
+          const previousData = previousNode?.entry;
+          if (previousData && Types.Events.isProfileCall(previousData)) {
+            topLevelFunctionCall = previousData.callFrame;
+            topLevelFunctionCallEvent = previousNode?.entry;
+          }
+        }
+        break;
+      }
+      previousNode = node;
+      node = node.parent;
+    }
+
+    if (!topLevelFunctionCall || !topLevelFunctionCallEvent || bottomUpData.length === 0) {
+      return;
+    }
+    const bottomUpDataId =
+        bottomUpData[0].scriptId + ':' + bottomUpData[0].lineNumber + ':' + bottomUpData[0].columnNumber + ':';
+
+    const data = bottomUpDataMap.get(bottomUpDataId) ?? {
+      bottomUpData: bottomUpData[0],
+      totalTime: 0,
+      relatedEvents: [],
+    };
+    data.totalTime += (e.dur ?? 0);
+    data.relatedEvents.push(e);
+    bottomUpDataMap.set(bottomUpDataId, data);
+
+    const aggregatedDataId =
+        topLevelFunctionCall.scriptId + ':' + topLevelFunctionCall.lineNumber + ':' + topLevelFunctionCall.columnNumber;
+    if (!dataByTopLevelFunction.has(aggregatedDataId)) {
+      dataByTopLevelFunction.set(aggregatedDataId, {
+        topLevelFunctionCall,
+        totalReflowTime: 0,
+        bottomUpData: new Set<string>(),
+        topLevelFunctionCallEvents: [],
+      });
+    }
+    const aggregatedData = dataByTopLevelFunction.get(aggregatedDataId);
+    if (aggregatedData) {
+      aggregatedData.totalReflowTime += (e.dur ?? 0);
+      aggregatedData.bottomUpData.add(bottomUpDataId);
+      aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);
+    }
+  });
+
+  let topTimeConsumingDataId = '';
+  let maxTime = 0;
+  dataByTopLevelFunction.forEach((value, key) => {
+    if (value.totalReflowTime > maxTime) {
+      maxTime = value.totalReflowTime;
+      topTimeConsumingDataId = key;
+    }
+  });
+
+  const aggregatedBottomUpData: BottomUpCallStack[] = [];
+  const topLevelFunctionCallData = dataByTopLevelFunction.get(topTimeConsumingDataId);
+  const dataSet = dataByTopLevelFunction.get(topTimeConsumingDataId)?.bottomUpData;
+  if (dataSet) {
+    dataSet.forEach(value => {
+      const callStackData = bottomUpDataMap.get(value);
+      if (callStackData && callStackData.totalTime > Helpers.Timing.milliToMicro(Types.Timing.Milli(1))) {
+        aggregatedBottomUpData.push(callStackData);
+      }
+    });
+  }
+
+  return [topLevelFunctionCallData, aggregatedBottomUpData];
+}
+
+function finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {
+  return {
+    strings: UIStrings,
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.ALL,
+    state: partialModel.topLevelFunctionCallData !== undefined && partialModel.aggregatedBottomUpData.length !== 0 ?
+        'fail' :
+        'pass',
+    ...partialModel,
+  };
+}
+
+export function generateInsight(traceParsedData: RequiredData<typeof deps>): ForcedReflowInsightModel {
+  const warningsData = traceParsedData.Warnings;
+  const entryToNodeMap = traceParsedData.Renderer.entryToNode;
+
+  if (!warningsData) {
+    throw new Error('no warnings data');
+  }
+
+  if (!entryToNodeMap) {
+    throw new Error('no renderer data');
+  }
+
+  const [topLevelFunctionCallData, aggregatedBottomUpData] =
+      aggregateForcedReflow(warningsData.perWarning, entryToNodeMap);
+
+  return finalize({
+    relatedEvents: topLevelFunctionCallData?.topLevelFunctionCallEvents,
+    topLevelFunctionCallData,
+    aggregatedBottomUpData,
+  });
+}

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

@@ -31,6 +31,8 @@ describeWithEnvironment('ImageDelivery', function() {
     const insight =
         getInsightOrError('ImageDelivery', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
     assert.strictEqual(insight.totalByteSavings, 2007125);
+    assert.strictEqual(insight.metricSavings!.FCP, 0);
+    assert.strictEqual(insight.metricSavings!.LCP, 100);
     assert.deepEqual(
         insight.optimizableImages.map(
             o => ({url: o.request.args.data.url, optimizations: o.optimizations, byteSavings: o.byteSavings})),
@@ -57,6 +59,22 @@ describeWithEnvironment('ImageDelivery', function() {
             url:
                 'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif',
           },
+          {
+            byteSavings: 176040,
+            optimizations: [
+              {
+                byteSavings: 134075,
+                type: ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION,
+              },
+              {
+                byteSavings: 162947,
+                type: ImageOptimizationType.RESPONSIVE_SIZE,
+                fileDimensions: {width: 640, height: 436},
+                displayDimensions: {width: 200, height: 136},
+              },
+            ],
+            url: 'https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png',
+          },
           {
             byteSavings: 49760,
             optimizations: [
@@ -81,22 +99,6 @@ describeWithEnvironment('ImageDelivery', function() {
             url:
                 'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp',
           },
-          {
-            byteSavings: 176040,
-            optimizations: [
-              {
-                byteSavings: 134075,
-                type: ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION,
-              },
-              {
-                byteSavings: 162947,
-                type: ImageOptimizationType.RESPONSIVE_SIZE,
-                fileDimensions: {width: 640, height: 436},
-                displayDimensions: {width: 200, height: 136},
-              },
-            ],
-            url: 'https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png',
-          },
         ],
     );
   });