lighthouse 11.7.1 → 12.0.0

package/core/lib/lantern/metric.js

@@ -101,19 +101,15 @@ class Metric {
     const optimisticGraph = this.getOptimisticGraph(graph, processedNavigation);
     const pessimisticGraph = this.getPessimisticGraph(graph, processedNavigation);
 
-    /** @type {{flexibleOrdering?: boolean, label?: string}} */
     let simulateOptions = {label: `optimistic${metricName}`};
     const optimisticSimulation = simulator.simulate(optimisticGraph, simulateOptions);
 
-    simulateOptions = {label: `optimisticFlex${metricName}`, flexibleOrdering: true};
-    const optimisticFlexSimulation = simulator.simulate(optimisticGraph, simulateOptions);
-
     simulateOptions = {label: `pessimistic${metricName}`};
     const pessimisticSimulation = simulator.simulate(pessimisticGraph, simulateOptions);
 
     const optimisticEstimate = this.getEstimateFromSimulation(
-      optimisticSimulation.timeInMs < optimisticFlexSimulation.timeInMs ?
-        optimisticSimulation : optimisticFlexSimulation, {...extras, optimistic: true}
+      optimisticSimulation,
+      {...extras, optimistic: true}
     );
 
     const pessimisticEstimate = this.getEstimateFromSimulation(

package/core/lib/lantern/metrics/first-contentful-paint.d.ts

@@ -0,0 +1,79 @@
+export type Node = import('../base-node.js').Node;
+export type NetworkNode<T> = import('../network-node.js').NetworkNode<T>;
+export type CpuNode = import('../cpu-node.js').CPUNode;
+/** @typedef {import('../base-node.js').Node} Node */
+/** @template T @typedef {import('../network-node.js').NetworkNode<T>} NetworkNode */
+/** @typedef {import('../cpu-node.js').CPUNode} CpuNode */
+export class FirstContentfulPaint extends Metric {
+    /**
+     * @template T
+     * @typedef FirstPaintBasedGraphOpts
+     * @property {number} cutoffTimestamp The timestamp used to filter out tasks that occured after
+     *    our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+     * @property {function(NetworkNode<T>):boolean} treatNodeAsRenderBlocking The function that determines
+     *    which resources should be considered *possibly* render-blocking.
+     * @property {(function(CpuNode):boolean)=} additionalCpuNodesToTreatAsRenderBlocking The function that
+     *    determines which CPU nodes should also be included in our blocking node IDs set,
+     *    beyond what getRenderBlockingNodeData() already includes.
+     */
+    /**
+     * This function computes the set of URLs that *appeared* to be render-blocking based on our filter,
+     * *but definitely were not* render-blocking based on the timing of their EvaluateScript task.
+     * It also computes the set of corresponding CPU node ids that were needed for the paint at the
+     * given timestamp.
+     *
+     * @template [T=unknown]
+     * @param {Node} graph
+     * @param {FirstPaintBasedGraphOpts<T>} opts
+     * @return {{definitelyNotRenderBlockingScriptUrls: Set<string>, renderBlockingCpuNodeIds: Set<string>}}
+     */
+    static getRenderBlockingNodeData<T = unknown>(graph: Node, { cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking }: {
+        /**
+         * The timestamp used to filter out tasks that occured after
+         * our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+         */
+        cutoffTimestamp: number;
+        /**
+         * The function that determines
+         * which resources should be considered *possibly* render-blocking.
+         */
+        treatNodeAsRenderBlocking: (arg0: import("../network-node.js").NetworkNode<T>) => boolean;
+        /**
+         * The function that
+         * determines which CPU nodes should also be included in our blocking node IDs set,
+         * beyond what getRenderBlockingNodeData() already includes.
+         */
+        additionalCpuNodesToTreatAsRenderBlocking?: ((arg0: CpuNode) => boolean) | undefined;
+    }): {
+        definitelyNotRenderBlockingScriptUrls: Set<string>;
+        renderBlockingCpuNodeIds: Set<string>;
+    };
+    /**
+     * This function computes the graph required for the first paint of interest.
+     *
+     * @template [T=unknown]
+     * @param {Node} dependencyGraph
+     * @param {FirstPaintBasedGraphOpts<T>} opts
+     * @return {Node}
+     */
+    static getFirstPaintBasedGraph<T_1 = unknown>(dependencyGraph: Node, { cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking }: {
+        /**
+         * The timestamp used to filter out tasks that occured after
+         * our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+         */
+        cutoffTimestamp: number;
+        /**
+         * The function that determines
+         * which resources should be considered *possibly* render-blocking.
+         */
+        treatNodeAsRenderBlocking: (arg0: import("../network-node.js").NetworkNode<T_1>) => boolean;
+        /**
+         * The function that
+         * determines which CPU nodes should also be included in our blocking node IDs set,
+         * beyond what getRenderBlockingNodeData() already includes.
+         */
+        additionalCpuNodesToTreatAsRenderBlocking?: ((arg0: CpuNode) => boolean) | undefined;
+    }): Node;
+}
+import { Metric } from '../metric.js';
+//# sourceMappingURL=first-contentful-paint.d.ts.map

package/core/lib/lantern/metrics/first-contentful-paint.js

@@ -0,0 +1,200 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Lantern from '../types/lantern.js';
+import {Metric} from '../metric.js';
+import {BaseNode} from '../base-node.js';
+
+/** @typedef {import('../base-node.js').Node} Node */
+/** @template T @typedef {import('../network-node.js').NetworkNode<T>} NetworkNode */
+/** @typedef {import('../cpu-node.js').CPUNode} CpuNode */
+
+class FirstContentfulPaint extends Metric {
+  /**
+   * @return {Lantern.Simulation.MetricCoefficients}
+   */
+  static get COEFFICIENTS() {
+    return {
+      intercept: 0,
+      optimistic: 0.5,
+      pessimistic: 0.5,
+    };
+  }
+
+  /**
+   * @template T
+   * @typedef FirstPaintBasedGraphOpts
+   * @property {number} cutoffTimestamp The timestamp used to filter out tasks that occured after
+   *    our paint of interest. Typically this is First Contentful Paint or First Meaningful Paint.
+   * @property {function(NetworkNode<T>):boolean} treatNodeAsRenderBlocking The function that determines
+   *    which resources should be considered *possibly* render-blocking.
+   * @property {(function(CpuNode):boolean)=} additionalCpuNodesToTreatAsRenderBlocking The function that
+   *    determines which CPU nodes should also be included in our blocking node IDs set,
+   *    beyond what getRenderBlockingNodeData() already includes.
+   */
+
+  /**
+   * This function computes the set of URLs that *appeared* to be render-blocking based on our filter,
+   * *but definitely were not* render-blocking based on the timing of their EvaluateScript task.
+   * It also computes the set of corresponding CPU node ids that were needed for the paint at the
+   * given timestamp.
+   *
+   * @template [T=unknown]
+   * @param {Node} graph
+   * @param {FirstPaintBasedGraphOpts<T>} opts
+   * @return {{definitelyNotRenderBlockingScriptUrls: Set<string>, renderBlockingCpuNodeIds: Set<string>}}
+   */
+  static getRenderBlockingNodeData(
+      graph,
+      {cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking}
+  ) {
+    /** @type {Map<string, CpuNode>} A map of blocking script URLs to the earliest EvaluateScript task node that executed them. */
+    const scriptUrlToNodeMap = new Map();
+
+    /** @type {Array<CpuNode>} */
+    const cpuNodes = [];
+    graph.traverse(node => {
+      if (node.type === BaseNode.TYPES.CPU) {
+        // A task is *possibly* render blocking if it *started* before cutoffTimestamp.
+        // We use startTime here because the paint event can be *inside* the task that was render blocking.
+        if (node.startTime <= cutoffTimestamp) cpuNodes.push(node);
+
+        // Build our script URL map to find the earliest EvaluateScript task node.
+        const scriptUrls = node.getEvaluateScriptURLs();
+        for (const url of scriptUrls) {
+          // Use the earliest CPU node we find.
+          const existing = scriptUrlToNodeMap.get(url) || node;
+          scriptUrlToNodeMap.set(url, node.startTime < existing.startTime ? node : existing);
+        }
+      }
+    });
+
+    cpuNodes.sort((a, b) => a.startTime - b.startTime);
+
+    // A script is *possibly* render blocking if it finished loading before cutoffTimestamp.
+    const possiblyRenderBlockingScriptUrls = Metric.getScriptUrls(graph, node => {
+      // The optimistic LCP treatNodeAsRenderBlocking fn wants to exclude some images in the graph,
+      // but here it only receives scripts to evaluate. It's a no-op in this case, but it will
+      // matter below in the getFirstPaintBasedGraph clone operation.
+      return node.endTime <= cutoffTimestamp && treatNodeAsRenderBlocking(node);
+    });
+
+    // A script is *definitely not* render blocking if its EvaluateScript task started after cutoffTimestamp.
+    /** @type {Set<string>} */
+    const definitelyNotRenderBlockingScriptUrls = new Set();
+    /** @type {Set<string>} */
+    const renderBlockingCpuNodeIds = new Set();
+    for (const url of possiblyRenderBlockingScriptUrls) {
+      // Lookup the CPU node that had the earliest EvaluateScript for this URL.
+      const cpuNodeForUrl = scriptUrlToNodeMap.get(url);
+
+      // If we can't find it at all, we can't conclude anything, so just skip it.
+      if (!cpuNodeForUrl) continue;
+
+      // If we found it and it was in our `cpuNodes` set that means it finished before cutoffTimestamp, so it really is render-blocking.
+      if (cpuNodes.includes(cpuNodeForUrl)) {
+        renderBlockingCpuNodeIds.add(cpuNodeForUrl.id);
+        continue;
+      }
+
+      // We couldn't find the evaluate script in the set of CPU nodes that ran before our paint, so
+      // it must not have been necessary for the paint.
+      definitelyNotRenderBlockingScriptUrls.add(url);
+    }
+
+    // The first layout, first paint, and first ParseHTML are almost always necessary for first paint,
+    // so we always include those CPU nodes.
+    const firstLayout = cpuNodes.find(node => node.didPerformLayout());
+    if (firstLayout) renderBlockingCpuNodeIds.add(firstLayout.id);
+    const firstPaint = cpuNodes.find(node => node.childEvents.some(e => e.name === 'Paint'));
+    if (firstPaint) renderBlockingCpuNodeIds.add(firstPaint.id);
+    const firstParse = cpuNodes.find(node => node.childEvents.some(e => e.name === 'ParseHTML'));
+    if (firstParse) renderBlockingCpuNodeIds.add(firstParse.id);
+
+    // If a CPU filter was passed in, we also want to include those extra nodes.
+    if (additionalCpuNodesToTreatAsRenderBlocking) {
+      cpuNodes
+        .filter(additionalCpuNodesToTreatAsRenderBlocking)
+        .forEach(node => renderBlockingCpuNodeIds.add(node.id));
+    }
+
+    return {
+      definitelyNotRenderBlockingScriptUrls,
+      renderBlockingCpuNodeIds,
+    };
+  }
+
+  /**
+   * This function computes the graph required for the first paint of interest.
+   *
+   * @template [T=unknown]
+   * @param {Node} dependencyGraph
+   * @param {FirstPaintBasedGraphOpts<T>} opts
+   * @return {Node}
+   */
+  static getFirstPaintBasedGraph(
+      dependencyGraph,
+      {cutoffTimestamp, treatNodeAsRenderBlocking, additionalCpuNodesToTreatAsRenderBlocking}
+  ) {
+    const rbData = this.getRenderBlockingNodeData(dependencyGraph, {
+      cutoffTimestamp,
+      treatNodeAsRenderBlocking,
+      additionalCpuNodesToTreatAsRenderBlocking,
+    });
+    const {definitelyNotRenderBlockingScriptUrls, renderBlockingCpuNodeIds} = rbData;
+
+    return dependencyGraph.cloneWithRelationships(node => {
+      if (node.type === BaseNode.TYPES.NETWORK) {
+        // Exclude all nodes that ended after cutoffTimestamp (except for the main document which we always consider necessary)
+        // endTime is negative if request does not finish, make sure startTime isn't after cutoffTimestamp in this case.
+        const endedAfterPaint = node.endTime > cutoffTimestamp || node.startTime > cutoffTimestamp;
+        if (endedAfterPaint && !node.isMainDocument()) return false;
+
+        const url = node.record.url;
+        // If the URL definitely wasn't render-blocking then we filter it out.
+        if (definitelyNotRenderBlockingScriptUrls.has(url)) {
+          return false;
+        }
+
+        // Lastly, build up the FCP graph of all nodes we consider render blocking
+        return treatNodeAsRenderBlocking(node);
+      } else {
+        // If it's a CPU node, just check if it was blocking.
+        return renderBlockingCpuNodeIds.has(node.id);
+      }
+    });
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {Node}
+   */
+  static getOptimisticGraph(dependencyGraph, processedNavigation) {
+    return this.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: processedNavigation.timestamps.firstContentfulPaint,
+      // In the optimistic graph we exclude resources that appeared to be render blocking but were
+      // initiated by a script. While they typically have a very high importance and tend to have a
+      // significant impact on the page's content, these resources don't technically block rendering.
+      treatNodeAsRenderBlocking: node =>
+        node.hasRenderBlockingPriority() && node.initiatorType !== 'script',
+    });
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {Node}
+   */
+  static getPessimisticGraph(dependencyGraph, processedNavigation) {
+    return this.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: processedNavigation.timestamps.firstContentfulPaint,
+      treatNodeAsRenderBlocking: node => node.hasRenderBlockingPriority(),
+    });
+  }
+}
+
+export {FirstContentfulPaint};

package/core/lib/lantern/metrics/first-meaningful-paint.d.ts

@@ -0,0 +1,6 @@
+export type Node = import('../base-node.js').Node;
+/** @typedef {import('../base-node.js').Node} Node */
+export class FirstMeaningfulPaint extends Metric {
+}
+import { Metric } from '../metric.js';
+//# sourceMappingURL=first-meaningful-paint.d.ts.map

package/core/lib/lantern/metrics/first-meaningful-paint.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Lantern from '../types/lantern.js';
+import {Metric} from '../metric.js';
+import {FirstContentfulPaint} from './first-contentful-paint.js';
+
+/** @typedef {import('../base-node.js').Node} Node */
+
+class FirstMeaningfulPaint extends Metric {
+  /**
+   * @return {Lantern.Simulation.MetricCoefficients}
+   */
+  static get COEFFICIENTS() {
+    return {
+      intercept: 0,
+      optimistic: 0.5,
+      pessimistic: 0.5,
+    };
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {Node}
+   */
+  static getOptimisticGraph(dependencyGraph, processedNavigation) {
+    const fmp = processedNavigation.timestamps.firstMeaningfulPaint;
+    if (!fmp) {
+      throw new Error('NO_FMP');
+    }
+    return FirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: fmp,
+      // See FirstContentfulPaint's getOptimisticGraph implementation for a longer description
+      // of why we exclude script initiated resources here.
+      treatNodeAsRenderBlocking: node =>
+        node.hasRenderBlockingPriority() && node.initiatorType !== 'script',
+    });
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {Node}
+   */
+  static getPessimisticGraph(dependencyGraph, processedNavigation) {
+    const fmp = processedNavigation.timestamps.firstMeaningfulPaint;
+    if (!fmp) {
+      throw new Error('NO_FMP');
+    }
+
+    return FirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: fmp,
+      treatNodeAsRenderBlocking: node => node.hasRenderBlockingPriority(),
+      // For pessimistic FMP we'll include *all* layout nodes
+      additionalCpuNodesToTreatAsRenderBlocking: node => node.didPerformLayout(),
+    });
+  }
+}
+
+export {FirstMeaningfulPaint};

package/core/lib/lantern/metrics/interactive.d.ts

@@ -0,0 +1,26 @@
+export type Node = import('../base-node.js').Node;
+export class Interactive extends Metric {
+    /**
+     * @param {Node} dependencyGraph
+     * @return {Node}
+     */
+    static getOptimisticGraph(dependencyGraph: Node): Node;
+    /**
+     * @param {Node} dependencyGraph
+     * @return {Node}
+     */
+    static getPessimisticGraph(dependencyGraph: Node): Node;
+    /**
+     * @param {LH.Gatherer.Simulation.Result} simulationResult
+     * @param {import('../metric.js').Extras} extras
+     * @return {LH.Gatherer.Simulation.Result}
+     */
+    static getEstimateFromSimulation(simulationResult: LH.Gatherer.Simulation.Result, extras: import('../metric.js').Extras): LH.Gatherer.Simulation.Result;
+    /**
+     * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
+     * @return {number}
+     */
+    static getLastLongTaskEndTime(nodeTimings: LH.Gatherer.Simulation.Result['nodeTimings'], duration?: number): number;
+}
+import { Metric } from '../metric.js';
+//# sourceMappingURL=interactive.d.ts.map

package/core/lib/lantern/metrics/interactive.js

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Lantern from '../types/lantern.js';
+import {Metric} from '../metric.js';
+import {BaseNode} from '../base-node.js';
+import {NetworkRequestTypes} from '../lantern.js';
+
+/** @typedef {import('../base-node.js').Node} Node */
+
+// Any CPU task of 20 ms or more will end up being a critical long task on mobile
+const CRITICAL_LONG_TASK_THRESHOLD = 20;
+
+class Interactive extends Metric {
+  /**
+   * @return {LH.Gatherer.Simulation.MetricCoefficients}
+   */
+  static get COEFFICIENTS() {
+    return {
+      intercept: 0,
+      optimistic: 0.45,
+      pessimistic: 0.55,
+    };
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @return {Node}
+   */
+  static getOptimisticGraph(dependencyGraph) {
+    // Adjust the critical long task threshold for microseconds
+    const minimumCpuTaskDuration = CRITICAL_LONG_TASK_THRESHOLD * 1000;
+
+    return dependencyGraph.cloneWithRelationships(node => {
+      // Include everything that might be a long task
+      if (node.type === BaseNode.TYPES.CPU) {
+        return node.duration > minimumCpuTaskDuration;
+      }
+
+      // Include all scripts and high priority requests, exclude all images
+      const isImage = node.record.resourceType === NetworkRequestTypes.Image;
+      const isScript = node.record.resourceType === NetworkRequestTypes.Script;
+      return (
+        !isImage &&
+        (isScript ||
+          node.record.priority === 'High' ||
+          node.record.priority === 'VeryHigh')
+      );
+    });
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @return {Node}
+   */
+  static getPessimisticGraph(dependencyGraph) {
+    return dependencyGraph;
+  }
+
+  /**
+   * @param {LH.Gatherer.Simulation.Result} simulationResult
+   * @param {import('../metric.js').Extras} extras
+   * @return {LH.Gatherer.Simulation.Result}
+   */
+  static getEstimateFromSimulation(simulationResult, extras) {
+    if (!extras.fmpResult) throw new Error('missing fmpResult');
+
+    const lastTaskAt = Interactive.getLastLongTaskEndTime(simulationResult.nodeTimings);
+    const minimumTime = extras.optimistic
+      ? extras.fmpResult.optimisticEstimate.timeInMs
+      : extras.fmpResult.pessimisticEstimate.timeInMs;
+    return {
+      timeInMs: Math.max(minimumTime, lastTaskAt),
+      nodeTimings: simulationResult.nodeTimings,
+    };
+  }
+
+  /**
+   * @param {Lantern.Simulation.MetricComputationDataInput} data
+   * @param {Omit<import('../metric.js').Extras, 'optimistic'>=} extras
+   * @return {Promise<LH.Artifacts.LanternMetric>}
+   */
+  static async compute(data, extras) {
+    const fmpResult = extras?.fmpResult;
+    if (!fmpResult) {
+      throw new Error('FMP is required to calculate the Interactive metric');
+    }
+
+    const metricResult = await super.compute(data, extras);
+    metricResult.timing = Math.max(metricResult.timing, fmpResult.timing);
+    return metricResult;
+  }
+
+  /**
+   * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
+   * @return {number}
+   */
+  static getLastLongTaskEndTime(nodeTimings, duration = 50) {
+    return Array.from(nodeTimings.entries())
+      .filter(([node, timing]) => {
+        if (node.type !== BaseNode.TYPES.CPU) return false;
+        return timing.duration > duration;
+      })
+      .map(([_, timing]) => timing.endTime)
+      .reduce((max, x) => Math.max(max || 0, x || 0), 0);
+  }
+}
+
+export {Interactive};

package/core/lib/lantern/metrics/largest-contentful-paint.d.ts

@@ -0,0 +1,19 @@
+export type Node = import('../base-node.js').Node;
+/** @typedef {import('../base-node.js').Node} Node */
+export class LargestContentfulPaint extends Metric {
+    /**
+     * Low priority image nodes are usually offscreen and very unlikely to be the
+     * resource that is required for LCP. Our LCP graphs include everything except for these images.
+     *
+     * @param {Node} node
+     * @return {boolean}
+     */
+    static isNotLowPriorityImageNode(node: Node): boolean;
+    /**
+     * @param {LH.Gatherer.Simulation.Result} simulationResult
+     * @return {LH.Gatherer.Simulation.Result}
+     */
+    static getEstimateFromSimulation(simulationResult: LH.Gatherer.Simulation.Result): LH.Gatherer.Simulation.Result;
+}
+import { Metric } from '../metric.js';
+//# sourceMappingURL=largest-contentful-paint.d.ts.map

package/core/lib/lantern/metrics/largest-contentful-paint.js

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Lantern from '../types/lantern.js';
+import {Metric} from '../metric.js';
+import {FirstContentfulPaint} from './first-contentful-paint.js';
+import {LanternError} from '../lantern-error.js';
+
+/** @typedef {import('../base-node.js').Node} Node */
+
+class LargestContentfulPaint extends Metric {
+  /**
+   * @return {LH.Gatherer.Simulation.MetricCoefficients}
+   */
+  static get COEFFICIENTS() {
+    return {
+      intercept: 0,
+      optimistic: 0.5,
+      pessimistic: 0.5,
+    };
+  }
+
+  /**
+   * Low priority image nodes are usually offscreen and very unlikely to be the
+   * resource that is required for LCP. Our LCP graphs include everything except for these images.
+   *
+   * @param {Node} node
+   * @return {boolean}
+   */
+  static isNotLowPriorityImageNode(node) {
+    if (node.type !== 'network') return true;
+    const isImage = node.record.resourceType === 'Image';
+    const isLowPriority = node.record.priority === 'Low' || node.record.priority === 'VeryLow';
+    return !isImage || !isLowPriority;
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {Node}
+   */
+  static getOptimisticGraph(dependencyGraph, processedNavigation) {
+    const lcp = processedNavigation.timestamps.largestContentfulPaint;
+    if (!lcp) {
+      throw new LanternError('NO_LCP');
+    }
+
+    return FirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: lcp,
+      treatNodeAsRenderBlocking: LargestContentfulPaint.isNotLowPriorityImageNode,
+    });
+  }
+
+  /**
+   * @param {Node} dependencyGraph
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {Node}
+   */
+  static getPessimisticGraph(dependencyGraph, processedNavigation) {
+    const lcp = processedNavigation.timestamps.largestContentfulPaint;
+    if (!lcp) {
+      throw new LanternError('NO_LCP');
+    }
+
+    return FirstContentfulPaint.getFirstPaintBasedGraph(dependencyGraph, {
+      cutoffTimestamp: lcp,
+      treatNodeAsRenderBlocking: _ => true,
+      // For pessimistic LCP we'll include *all* layout nodes
+      additionalCpuNodesToTreatAsRenderBlocking: node => node.didPerformLayout(),
+    });
+  }
+
+  /**
+   * @param {LH.Gatherer.Simulation.Result} simulationResult
+   * @return {LH.Gatherer.Simulation.Result}
+   */
+  static getEstimateFromSimulation(simulationResult) {
+    const nodeTimesNotOffscreenImages = Array.from(simulationResult.nodeTimings.entries())
+      .filter(entry => LargestContentfulPaint.isNotLowPriorityImageNode(entry[0]))
+      .map(entry => entry[1].endTime);
+
+    return {
+      timeInMs: Math.max(...nodeTimesNotOffscreenImages),
+      nodeTimings: simulationResult.nodeTimings,
+    };
+  }
+
+  /**
+   * @param {Lantern.Simulation.MetricComputationDataInput} data
+   * @param {Omit<import('../metric.js').Extras, 'optimistic'>=} extras
+   * @return {Promise<LH.Artifacts.LanternMetric>}
+   */
+  static async compute(data, extras) {
+    const fcpResult = extras?.fcpResult;
+    if (!fcpResult) {
+      throw new Error('FCP is required to calculate the LCP metric');
+    }
+
+    const metricResult = await super.compute(data, extras);
+    metricResult.timing = Math.max(metricResult.timing, fcpResult.timing);
+    return metricResult;
+  }
+}
+
+export {LargestContentfulPaint};

package/core/lib/lantern/metrics/max-potential-fid.d.ts

@@ -0,0 +1,30 @@
+export type Node = import('../base-node.js').Node;
+/** @typedef {import('../base-node.js').Node} Node */
+export class MaxPotentialFID extends Metric {
+    /**
+     * @param {Node} dependencyGraph
+     * @return {Node}
+     */
+    static getOptimisticGraph(dependencyGraph: Node): Node;
+    /**
+     * @param {Node} dependencyGraph
+     * @return {Node}
+     */
+    static getPessimisticGraph(dependencyGraph: Node): Node;
+    /**
+     * @param {LH.Gatherer.Simulation.Result} simulation
+     * @param {import('../metric.js').Extras} extras
+     * @return {LH.Gatherer.Simulation.Result}
+     */
+    static getEstimateFromSimulation(simulation: LH.Gatherer.Simulation.Result, extras: import('../metric.js').Extras): LH.Gatherer.Simulation.Result;
+    /**
+     * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
+     * @param {number} fcpTimeInMs
+     * @return {Array<{duration: number}>}
+     */
+    static getTimingsAfterFCP(nodeTimings: LH.Gatherer.Simulation.Result['nodeTimings'], fcpTimeInMs: number): Array<{
+        duration: number;
+    }>;
+}
+import { Metric } from '../metric.js';
+//# sourceMappingURL=max-potential-fid.d.ts.map