{"version":3,"file":"LCPDiscovery.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/LCPDiscovery.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {calculateDocFirstByteTs} from './Common.js';\nimport {\n  type Checklist,\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /**\n   * @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)\n   */\n  title: 'LCP request discovery',\n  /**\n   * @description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.\n   */\n  description:\n      '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)',\n  /**\n   * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.\n   * @example {401ms} PH1\n   */\n  lcpLoadDelay: 'LCP image loaded {PH1} after earliest start point.',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" is applied to the LCP request.\n   */\n  fetchPriorityApplied: 'fetchpriority=high applied',\n  /**\n   * @description Text to tell the user that a fetchpriority property value of \"high\" should be applied to the LCP request.\n   */\n  fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',\n  /**\n   * @description Text to tell the user that the LCP request is discoverable in the initial document.\n   */\n  requestDiscoverable: 'Request is discoverable in initial document',\n  /**\n   * @description Text to tell the user that the LCP request does not have the lazy load property applied.\n   */\n  lazyLoadNotApplied: 'lazy load not applied',\n  /**\n   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcp: 'No LCP detected',\n  /**\n   * @description Text status indicating that the Largest Contentful Paint (LCP) metric was text rather than an image. \"LCP\" is an acronym and should not be translated.\n   */\n  noLcpResource: 'No LCP resource detected because the LCP is not an image',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport function isLCPDiscovery(model: InsightModel): model is LCPDiscoveryInsightModel {\n  return model.insightKey === 'LCPDiscovery';\n}\nexport type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {\n  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,\n  /** The network request for the LCP image, if there was one. */\n  lcpRequest?: Types.Events.SyntheticNetworkRequest,\n  earliestDiscoveryTimeTs?: Types.Timing.Micro,\n  checklist?: Checklist<'priorityHinted'|'requestDiscoverable'|'eagerlyLoaded'>,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>): LCPDiscoveryInsightModel {\n  const relatedEvents = partialModel.lcpEvent && partialModel.lcpRequest ?\n      // TODO: add entire request initiator chain?\n      [partialModel.lcpEvent, partialModel.lcpRequest] :\n      [];\n  return {\n    insightKey: InsightKeys.LCP_DISCOVERY,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.LCP,\n    state: partialModel.lcpRequest && partialModel.checklist &&\n            (!partialModel.checklist.eagerlyLoaded.value || !partialModel.checklist.requestDiscoverable.value ||\n             !partialModel.checklist.priorityHinted.value) ?\n        'fail' :\n        'pass',\n    ...partialModel,\n    relatedEvents,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPDiscoveryInsightModel {\n  if (!context.navigation) {\n    return finalize({});\n  }\n\n  const networkRequests = parsedTrace.NetworkRequests;\n\n  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);\n  if (!frameMetrics) {\n    throw new Error('no frame metrics');\n  }\n\n  const navMetrics = frameMetrics.get(context.navigationId);\n  if (!navMetrics) {\n    throw new Error('no navigation metrics');\n  }\n  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);\n  const lcpEvent = metricScore?.event;\n  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {\n    return finalize({warnings: [InsightWarning.NO_LCP]});\n  }\n\n  const docRequest = networkRequests.byId.get(context.navigationId);\n  if (!docRequest) {\n    return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n  }\n\n  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);\n  if (!lcpRequest) {\n    return finalize({lcpEvent});\n  }\n\n  const initiatorUrl = lcpRequest.args.data.initiator?.url;\n  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request\n  // is discovered by the preload scanner.\n  const initiatedByMainDoc =\n      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;\n  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;\n\n  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;\n  const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;\n  // This is the earliest discovery time an LCP request could have - it's TTFB (as an absolute timestamp).\n  const earliestDiscoveryTime = calculateDocFirstByteTs(docRequest);\n\n  const priorityHintFound = imageFetchPriorityHint === 'high';\n\n  return finalize({\n    lcpEvent,\n    lcpRequest,\n    earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,\n    checklist: {\n      priorityHinted: {\n        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :\n                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),\n        value: priorityHintFound\n      },\n      requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},\n      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},\n    },\n  });\n}\n\ninterface LCPImageDiscoveryData {\n  checklist: Exclude<LCPDiscoveryInsightModel['checklist'], undefined>;\n  request: Types.Events.SyntheticNetworkRequest;\n  discoveryDelay: Types.Timing.Micro|null;\n  estimatedSavings: Types.Timing.Milli|null;\n}\n\n/**\n * TODO: this extra transformation (getImageData) should not be necessary.\n */\nexport function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData|null {\n  if (!model.lcpRequest || !model.checklist) {\n    return null;\n  }\n\n  const shouldIncreasePriorityHint = !model.checklist.priorityHinted.value;\n  const shouldPreloadImage = !model.checklist.requestDiscoverable.value;\n  const shouldRemoveLazyLoading = !model.checklist.eagerlyLoaded.value;\n\n  const imageLCP = shouldIncreasePriorityHint !== undefined && shouldPreloadImage !== undefined &&\n      shouldRemoveLazyLoading !== undefined;\n\n  // Shouldn't render anything if lcp insight is null or lcp is text.\n  if (!imageLCP) {\n    return null;\n  }\n\n  const data: LCPImageDiscoveryData = {\n    checklist: model.checklist,\n    request: model.lcpRequest,\n    discoveryDelay: null,\n    estimatedSavings: model.metricSavings?.LCP ?? null,\n  };\n\n  if (model.earliestDiscoveryTimeTs && model.lcpRequest) {\n    const discoveryDelay = model.lcpRequest.ts - model.earliestDiscoveryTimeTs;\n    data.discoveryDelay = Types.Timing.Micro(discoveryDelay);\n  }\n\n  return data;\n}\n\nexport function createOverlays(model: LCPDiscoveryInsightModel): Types.Overlays.Overlay[] {\n  const imageResults = getImageData(model);\n  if (!imageResults?.discoveryDelay) {\n    return [];\n  }\n\n  const delay = Helpers.Timing.traceWindowFromMicroSeconds(\n      Types.Timing.Micro(imageResults.request.ts - imageResults.discoveryDelay),\n      imageResults.request.ts,\n  );\n\n  return [\n    {\n      type: 'ENTRY_OUTLINE',\n      entry: imageResults.request,\n      outlineReason: 'ERROR',\n    },\n    {\n      type: 'CANDY_STRIPED_TIME_RANGE',\n      bounds: delay,\n      entry: imageResults.request,\n    },\n    {\n      type: 'TIMESPAN_BREAKDOWN',\n      sections: [{\n        bounds: delay,\n        // This is overridden in the component.\n        label: `${imageResults.discoveryDelay} microseconds`,\n        showDuration: false,\n      }],\n      entry: imageResults.request,\n      renderLocation: 'ABOVE_EVENT',\n    },\n  ];\n}\n"]}