chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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.test.ts

@@ -29,7 +29,7 @@ describeWithEnvironment('InteractionToNextPaint', function() {
         bounds: data.Meta.traceBounds,
         frameId: data.Meta.mainFrameId,
       };
-      const insight = Trace.Insights.InsightRunners.InteractionToNextPaint.generateInsight(data, context);
+      const insight = Trace.Insights.Models.InteractionToNextPaint.generateInsight(data, context);
       assert.strictEqual(insight.longestInteractionEvent?.dur, longest);
       assert.strictEqual(insight.highPercentileInteractionEvent?.dur, highPercentile);
     });

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

@@ -2,28 +2,54 @@
 // 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 {SyntheticInteractionPair} from '../types/TraceEvents.js';
 
-import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
+
+const UIStrings = {
+  /**
+   * @description Text to tell the user about the longest user interaction.
+   */
+  description:
+      'Start investigating with the longest phase. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',
+  /**
+   * @description Title for the performance insight "INP by phase", which shows a breakdown of INP by phases / sections.
+   */
+  title: 'INP by phase',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/InteractionToNextPaint.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export function deps(): ['UserInteractions'] {
   return ['UserInteractions'];
 }
 
-export type INPInsightResult = InsightResult<{
+export type INPInsightModel = InsightModel<{
   longestInteractionEvent?: SyntheticInteractionPair,
   highPercentileInteractionEvent?: SyntheticInteractionPair,
 }>;
 
-export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): INPInsightResult {
+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 {
   const interactionEvents = parsedTrace.UserInteractions.interactionEventsWithNoNesting.filter(event => {
     return Helpers.Timing.eventIsInBounds(event, context.bounds);
   });
 
   if (!interactionEvents.length) {
     // A valid result, when there is no user interaction.
-    return {};
+    return finalize({});
   }
 
   const longestByInteractionId = new Map<number, SyntheticInteractionPair>();
@@ -43,9 +69,9 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
   // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad
   const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));
 
-  return {
+  return finalize({
     relatedEvents: [normalizedInteractionEvents[0]],
     longestInteractionEvent: normalizedInteractionEvents[0],
     highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],
-  };
+  });
 }

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

@@ -0,0 +1,58 @@
+// 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('LCPDiscovery', function() {
+  it('calculates image lcp attributes', async () => {
+    const {data, insights} = await processTrace(this, 'lcp-images.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+    const {shouldIncreasePriorityHint, shouldPreloadImage, shouldRemoveLazyLoading} = insight;
+
+    assert.strictEqual(shouldRemoveLazyLoading, false);
+    assert.strictEqual(shouldPreloadImage, false);
+    assert.strictEqual(shouldIncreasePriorityHint, true);
+  });
+
+  it('calculates the LCP optimal time as the document request download start time', async () => {
+    const {data, insights} = await processTrace(this, 'web-dev-with-commit.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+    assert.strictEqual(
+        insight.earliestDiscoveryTimeTs,
+        // this is the TTFB for the document request
+        122411004828,
+    );
+  });
+
+  describe('warnings', function() {
+    it('warns when there is no lcp', async () => {
+      const {data, insights} = await processTrace(this, 'user-timings.json.gz');
+      const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+
+      assert.strictEqual(insight.warnings?.[0], 'NO_LCP');
+    });
+
+    it('no main document url', async () => {
+      const {data, insights} = await processTrace(this, 'about-blank-first.json.gz');
+      const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+      const insight = getInsightOrError('LCPDiscovery', insights, firstNav);
+
+      assert.strictEqual(insight.warnings?.[0], 'NO_DOCUMENT_REQUEST');
+    });
+  });
+});

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

@@ -0,0 +1,122 @@
+// 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 Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type RequiredData,
+} from './types.js';
+
+const UIStrings = {
+  /**
+   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
+   */
+  title: 'LCP request discovery',
+  /**
+   *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
+   */
+  description:
+      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',
+};
+
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'] {
+  return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];
+}
+
+export type LCPDiscoveryInsightModel = InsightModel<{
+  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
+  shouldRemoveLazyLoading?: boolean,
+  shouldIncreasePriorityHint?: boolean,
+  shouldPreloadImage?: boolean,
+  /** The network request for the LCP image, if there was one. */
+  lcpRequest?: Types.Events.SyntheticNetworkRequest,
+  earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds,
+}>;
+
+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(
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPDiscoveryInsightModel {
+  if (!context.navigation) {
+    return finalize({});
+  }
+
+  const networkRequests = parsedTrace.NetworkRequests;
+
+  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
+  if (!frameMetrics) {
+    throw new Error('no frame metrics');
+  }
+
+  const navMetrics = frameMetrics.get(context.navigationId);
+  if (!navMetrics) {
+    throw new Error('no navigation metrics');
+  }
+  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);
+  const lcpEvent = metricScore?.event;
+  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+    return finalize({warnings: [InsightWarning.NO_LCP]});
+  }
+
+  const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
+  if (!docRequest) {
+    return finalize({lcpEvent, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
+  }
+
+  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigation.get(context.navigation);
+  if (!lcpRequest) {
+    return finalize({lcpEvent});
+  }
+
+  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 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) +
+          Helpers.Timing.millisecondsToMicroseconds(docRequest.args.data.timing.receiveHeadersStart) :
+      undefined;
+
+  return finalize({
+    lcpEvent,
+    shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',
+    shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',
+    shouldPreloadImage: !imgPreloadedOrFoundInHTML,
+    lcpRequest,
+    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,
+  });
+}

package/front_end/models/trace/insights/{LargestContentfulPaint.test.ts → LCPPhases.test.ts}

@@ -16,11 +16,11 @@ export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null,
   return {data: parsedTrace, insights};
 }
 
-describeWithEnvironment('LargestContentfulPaint', function() {
+describeWithEnvironment('LCPPhases', function() {
   it('calculates text lcp phases', async () => {
     const {data, insights} = await processTrace(this, 'lcp-web-font.json.gz');
     const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-    const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
+    const insight = getInsightOrError('LCPPhases', insights, firstNav);
 
     assert.strictEqual(insight.lcpMs, 106.482);
 
@@ -32,7 +32,7 @@ describeWithEnvironment('LargestContentfulPaint', function() {
   it('calculates image lcp phases', async () => {
     const {data, insights} = await processTrace(this, 'lcp-images.json.gz');
     const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-    const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
+    const insight = getInsightOrError('LCPPhases', insights, firstNav);
 
     assert.strictEqual(insight.lcpMs, 109.623);
 
@@ -49,33 +49,11 @@ describeWithEnvironment('LargestContentfulPaint', function() {
     assert.deepEqual(phases, {ttfb: '6.94', loadTime: '12.09', loadDelay: '33.74', renderDelay: '56.85'});
   });
 
-  it('calculates image lcp attributes', async () => {
-    const {data, insights} = await processTrace(this, 'lcp-images.json.gz');
-    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-    const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
-    const {shouldIncreasePriorityHint, shouldPreloadImage, shouldRemoveLazyLoading} = insight;
-
-    assert.strictEqual(shouldRemoveLazyLoading, false);
-    assert.strictEqual(shouldPreloadImage, false);
-    assert.strictEqual(shouldIncreasePriorityHint, true);
-  });
-
-  it('calculates the LCP optimal time as the document request download start time', async () => {
-    const {data, insights} = await processTrace(this, 'web-dev-with-commit.json.gz');
-    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-    const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
-    assert.strictEqual(
-        insight.earliestDiscoveryTimeTs,
-        // this is the TTFB for the document request
-        122411004828,
-    );
-  });
-
   describe('warnings', function() {
     it('warns when there is no lcp', async () => {
       const {data, insights} = await processTrace(this, 'user-timings.json.gz');
       const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-      const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
+      const insight = getInsightOrError('LCPPhases', insights, firstNav);
 
       assert.strictEqual(insight.lcpMs, undefined);
       assert.strictEqual(insight.phases, undefined);
@@ -85,7 +63,7 @@ describeWithEnvironment('LargestContentfulPaint', function() {
     it('no main document url', async () => {
       const {data, insights} = await processTrace(this, 'about-blank-first.json.gz');
       const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
-      const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
+      const insight = getInsightOrError('LCPPhases', insights, firstNav);
 
       assert.strictEqual(insight.lcpMs, 204.909);
       assert.strictEqual(insight.phases, undefined);
@@ -96,7 +74,7 @@ describeWithEnvironment('LargestContentfulPaint', function() {
   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);
+    const insight = getInsightOrError('LCPPhases', insights, firstNav);
     // This insight has invalid phase data, so we expect the value to be undefined.
     assert.isUndefined(insight.phases);
   });