lighthouse 10.3.0 → 10.4.0-dev.20230711

package/core/audits/accessibility/identical-links-same-purpose.js

@@ -0,0 +1,45 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * @fileoverview Ensures that identical links have the same purpose.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+import AxeAudit from './axe-audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of an accesibility audit that checks if identical links have the same purpose. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Identical links have the same purpose.',
+  /** Title of an accesibility audit that checks if identical links have the same purpose. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Identical links do not have the same purpose.',
+  /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Links with the same destination should have the same description, to help users ' +
+      'understand the link\'s purpose and decide whether to follow it. ' +
+      '[Learn more about identical links](https://dequeuniversity.com/rules/axe/4.7/identical-links-same-purpose).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class IdenticalLinksSamePurpose extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'identical-links-same-purpose',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: AxeAudit.SCORING_MODES.INFORMATIVE,
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default IdenticalLinksSamePurpose;
+export {UIStrings};

package/core/audits/accessibility/landmark-one-main.d.ts

@@ -0,0 +1,10 @@
+export default LandmarkOneMain;
+declare class LandmarkOneMain extends AxeAudit {
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+}
+import AxeAudit from './axe-audit.js';
+//# sourceMappingURL=landmark-one-main.d.ts.map

package/core/audits/accessibility/landmark-one-main.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * @fileoverview Ensures that the document has a main landmark.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+import AxeAudit from './axe-audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of an accesibility audit that checks if the document has a main landmark. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Document has a main landmark.',
+  /** Title of an accesibility audit that checks if the document has a main landmark. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Document does not have a main landmark.',
+  /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'One main landmark helps screen reader users navigate a web page. ' +
+      '[Learn more about landmarks](https://dequeuniversity.com/rules/axe/4.7/landmark-one-main).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class LandmarkOneMain extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'landmark-one-main',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: AxeAudit.SCORING_MODES.INFORMATIVE,
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default LandmarkOneMain;
+export {UIStrings};

package/core/audits/accessibility/link-in-text-block.d.ts

@@ -0,0 +1,10 @@
+export default LinkInTextBlock;
+declare class LinkInTextBlock extends AxeAudit {
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+}
+import AxeAudit from './axe-audit.js';
+//# sourceMappingURL=link-in-text-block.d.ts.map

package/core/audits/accessibility/link-in-text-block.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * @fileoverview Ensures that links can be distinguished without relying on color.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+import AxeAudit from './axe-audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all link elements can be distinguished without relying on color. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Links are distinguishable without relying on color.',
+  /** Title of an accesibility audit that evaluates if all link elements can be distinguished without relying on color. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Links rely on color to be distinguishable.',
+  /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Low-contrast text is difficult or impossible for many users to read. Link text ' +
+      'that is discernible improves the experience for users with low vision. ' +
+      '[Learn how to make links distinguishable](https://dequeuniversity.com/rules/axe/4.7/link-in-text-block).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class LinkInTextBlock extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'link-in-text-block',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default LinkInTextBlock;
+export {UIStrings};

package/core/audits/accessibility/select-name.d.ts

@@ -0,0 +1,10 @@
+export default SelectName;
+declare class SelectName extends AxeAudit {
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+}
+import AxeAudit from './axe-audit.js';
+//# sourceMappingURL=select-name.d.ts.map

package/core/audits/accessibility/select-name.js

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * @fileoverview Ensures select elements have programmatically associated label elements.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+import AxeAudit from './axe-audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of an accesibility audit that evaluates if all select elements have programmatically associated label elements. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Select elements have associated label elements.',
+  /** Title of an accesibility audit that evaluates if all select elements have programmatically associated label elements. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Select elements do not have associated label elements.',
+  /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Form elements without effective labels can create frustrating experiences ' +
+      'for screen reader users. ' +
+      '[Learn more about the `select` element](https://dequeuniversity.com/rules/axe/4.7/select-name).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class SelectName extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'select-name',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default SelectName;
+export {UIStrings};

package/core/audits/accessibility/target-size.d.ts

@@ -0,0 +1,10 @@
+export default TargetSize;
+declare class TargetSize extends AxeAudit {
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+}
+import AxeAudit from './axe-audit.js';
+//# sourceMappingURL=target-size.d.ts.map

package/core/audits/accessibility/target-size.js

@@ -0,0 +1,45 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/**
+ * @fileoverview Ensures that touch targets have sufficient size and spacing.
+ * See base class in axe-audit.js for audit() implementation.
+ */
+
+import AxeAudit from './axe-audit.js';
+import * as i18n from '../../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of an accesibility audit that checks if all touch targets have sufficient size and spacing. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Touch targets have sufficient size and spacing.',
+  /** Title of an accesibility audit that checks if all touch targets have sufficient size and spacing. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Touch targets do not have sufficient size or spacing.',
+  /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Touch targets with sufficient size and spacing help users who may have ' +
+      'difficulty targeting small controls activate the targets. ' +
+      '[Learn more about touch targets](https://dequeuniversity.com/rules/axe/4.7/target-size).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class TargetSize extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'target-size',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: AxeAudit.SCORING_MODES.INFORMATIVE,
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default TargetSize;
+export {UIStrings};

package/core/audits/audit.d.ts

@@ -159,6 +159,12 @@ export class Audit {
      * @return {LH.RawIcu<LH.Audit.Result>}
      */
     static generateAuditResult(audit: typeof Audit, product: LH.Audit.Product): LH.RawIcu<LH.Audit.Result>;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @returns {LH.Artifacts.MetricComputationDataInput}
+     */
+    static makeMetricComputationDataInput(artifacts: LH.Artifacts, context: LH.Audit.Context): LH.Artifacts.MetricComputationDataInput;
 }
 import * as LH from '../../types/lh.js';
 //# sourceMappingURL=audit.d.ts.map

package/core/audits/audit.js

@@ -415,6 +415,18 @@ class Audit {
       details: product.details,
     };
   }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @returns {LH.Artifacts.MetricComputationDataInput}
+   */
+  static makeMetricComputationDataInput(artifacts, context) {
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const gatherContext = artifacts.GatherContext;
+    return {trace, devtoolsLog, gatherContext, settings: context.settings, URL: artifacts.URL};
+  }
 }
 
 export {Audit};

package/core/audits/byte-efficiency/byte-efficiency-audit.d.ts

@@ -49,6 +49,23 @@ export class ByteEfficiencyAudit extends Audit {
      * @return {Promise<LH.Audit.Product>}
      */
     static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+    /**
+     * Computes the estimated effect of all the byte savings on the provided graph.
+     *
+     * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
+     * @param {Node} graph
+     * @param {Simulator} simulator
+     * @param {{label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
+     * @return {{savings: number, simulationBeforeChanges: LH.Gatherer.Simulation.Result, simulationAfterChanges: LH.Gatherer.Simulation.Result}}
+     */
+    static computeWasteWithGraph(results: Array<LH.Audit.ByteEfficiencyItem>, graph: Node, simulator: Simulator, options?: {
+        label?: string;
+        providedWastedBytesByUrl?: Map<string, number>;
+    } | undefined): {
+        savings: number;
+        simulationBeforeChanges: LH.Gatherer.Simulation.Result;
+        simulationAfterChanges: LH.Gatherer.Simulation.Result;
+    };
     /**
      * Computes the estimated effect of all the byte savings on the maximum of the following:
      *
@@ -58,22 +75,21 @@ export class ByteEfficiencyAudit extends Audit {
      * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
      * @param {Node} graph
      * @param {Simulator} simulator
-     * @param {{includeLoad?: boolean, label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
+     * @param {{includeLoad?: boolean, providedWastedBytesByUrl?: Map<string, number>}=} options
      * @return {number}
      */
     static computeWasteWithTTIGraph(results: Array<LH.Audit.ByteEfficiencyItem>, graph: Node, simulator: Simulator, options?: {
         includeLoad?: boolean;
-        label?: string;
         providedWastedBytesByUrl?: Map<string, number>;
     } | undefined): number;
     /**
      * @param {ByteEfficiencyProduct} result
-     * @param {Node|null} graph
      * @param {Simulator} simulator
-     * @param {LH.Artifacts['GatherContext']} gatherContext
-     * @return {LH.Audit.Product}
+     * @param {LH.Artifacts.MetricComputationDataInput} metricComputationInput
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
      */
-    static createAuditProduct(result: ByteEfficiencyProduct, graph: Node | null, simulator: Simulator, gatherContext: LH.Artifacts['GatherContext']): LH.Audit.Product;
+    static createAuditProduct(result: ByteEfficiencyProduct, simulator: Simulator, metricComputationInput: LH.Artifacts.MetricComputationDataInput, context: LH.Audit.Context): Promise<LH.Audit.Product>;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords

package/core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -10,6 +10,9 @@ import * as i18n from '../../lib/i18n/i18n.js';
 import {NetworkRecords} from '../../computed/network-records.js';
 import {LoadSimulator} from '../../computed/load-simulator.js';
 import {PageDependencyGraph} from '../../computed/page-dependency-graph.js';
+import {LanternLargestContentfulPaint} from '../../computed/metrics/lantern-largest-contentful-paint.js';
+import {LanternFirstContentfulPaint} from '../../computed/metrics/lantern-first-contentful-paint.js';
+import {LCPImageRecord} from '../../computed/lcp-image-record.js';
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, {});
 
@@ -104,9 +107,7 @@ class ByteEfficiencyAudit extends Audit {
    */
   static async audit(artifacts, context) {
     const gatherContext = artifacts.GatherContext;
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const URL = artifacts.URL;
     const settings = context?.settings || {};
     const simulatorOptions = {
       devtoolsLog,
@@ -125,34 +126,29 @@ class ByteEfficiencyAudit extends Audit {
       };
     }
 
-    const [result, graph, simulator] = await Promise.all([
+    const metricComputationInput = Audit.makeMetricComputationDataInput(artifacts, context);
+
+    const [result, simulator] = await Promise.all([
       this.audit_(artifacts, networkRecords, context),
-      // Page dependency graph is only used in navigation mode.
-      gatherContext.gatherMode === 'navigation' ?
-        PageDependencyGraph.request({trace, devtoolsLog, URL}, context) :
-        null,
       LoadSimulator.request(simulatorOptions, context),
     ]);
 
-    return this.createAuditProduct(result, graph, simulator, gatherContext);
+    return this.createAuditProduct(result, simulator, metricComputationInput, context);
   }
 
   /**
-   * Computes the estimated effect of all the byte savings on the maximum of the following:
-   *
-   * - end time of the last long task in the provided graph
-   * - (if includeLoad is true or not provided) end time of the last node in the graph
+   * Computes the estimated effect of all the byte savings on the provided graph.
    *
    * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
    * @param {Node} graph
    * @param {Simulator} simulator
-   * @param {{includeLoad?: boolean, label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
-   * @return {number}
+   * @param {{label?: string, providedWastedBytesByUrl?: Map<string, number>}=} options
+   * @return {{savings: number, simulationBeforeChanges: LH.Gatherer.Simulation.Result, simulationAfterChanges: LH.Gatherer.Simulation.Result}}
    */
-  static computeWasteWithTTIGraph(results, graph, simulator, options) {
-    options = Object.assign({includeLoad: true, label: this.meta.id}, options);
-    const beforeLabel = `${options.label}-before`;
-    const afterLabel = `${options.label}-after`;
+  static computeWasteWithGraph(results, graph, simulator, options) {
+    options = Object.assign({label: ''}, options);
+    const beforeLabel = `${this.meta.id}-${options.label}-before`;
+    const afterLabel = `${this.meta.id}-${options.label}-after`;
 
     const simulationBeforeChanges = simulator.simulate(graph, {label: beforeLabel});
 
@@ -187,7 +183,36 @@ class ByteEfficiencyAudit extends Audit {
       node.record.transferSize = originalTransferSize;
     });
 
-    const savingsOnOverallLoad = simulationBeforeChanges.timeInMs - simulationAfterChanges.timeInMs;
+    const savings = simulationBeforeChanges.timeInMs - simulationAfterChanges.timeInMs;
+
+    return {
+      // Round waste to nearest 10ms
+      savings: Math.round(Math.max(savings, 0) / 10) * 10,
+      simulationBeforeChanges,
+      simulationAfterChanges,
+    };
+  }
+
+  /**
+   * Computes the estimated effect of all the byte savings on the maximum of the following:
+   *
+   * - end time of the last long task in the provided graph
+   * - (if includeLoad is true or not provided) end time of the last node in the graph
+   *
+   * @param {Array<LH.Audit.ByteEfficiencyItem>} results The array of byte savings results per resource
+   * @param {Node} graph
+   * @param {Simulator} simulator
+   * @param {{includeLoad?: boolean, providedWastedBytesByUrl?: Map<string, number>}=} options
+   * @return {number}
+   */
+  static computeWasteWithTTIGraph(results, graph, simulator, options) {
+    options = Object.assign({includeLoad: true}, options);
+    const {savings: savingsOnOverallLoad, simulationBeforeChanges, simulationAfterChanges} =
+      this.computeWasteWithGraph(results, graph, simulator, {
+        ...options,
+        label: 'overallLoad',
+      });
+
     const savingsOnTTI =
       LanternInteractive.getLastLongTaskEndTime(simulationBeforeChanges.nodeTimings) -
       LanternInteractive.getLastLongTaskEndTime(simulationAfterChanges.nodeTimings);
@@ -201,24 +226,63 @@ class ByteEfficiencyAudit extends Audit {
 
   /**
    * @param {ByteEfficiencyProduct} result
-   * @param {Node|null} graph
    * @param {Simulator} simulator
-   * @param {LH.Artifacts['GatherContext']} gatherContext
-   * @return {LH.Audit.Product}
+   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationInput
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static createAuditProduct(result, graph, simulator, gatherContext) {
+  static async createAuditProduct(result, simulator, metricComputationInput, context) {
     const results = result.items.sort((itemA, itemB) => itemB.wastedBytes - itemA.wastedBytes);
 
     const wastedBytes = results.reduce((sum, item) => sum + item.wastedBytes, 0);
 
+    /** @type {LH.Audit.MetricSavings} */
+    const metricSavings = {
+      FCP: 0,
+      LCP: 0,
+    };
+
     // `wastedMs` may be negative, if making the opportunity change could be detrimental.
     // This is useful information in the LHR and should be preserved.
     let wastedMs;
-    if (gatherContext.gatherMode === 'navigation') {
-      if (!graph) throw Error('Page dependency graph should always be computed in navigation mode');
+    if (metricComputationInput.gatherContext.gatherMode === 'navigation') {
+      const graph = await PageDependencyGraph.request(metricComputationInput, context);
+      const {
+        pessimisticGraph: pessimisticFCPGraph,
+      } = await LanternFirstContentfulPaint.request(metricComputationInput, context);
+      const {
+        pessimisticGraph: pessimisticLCPGraph,
+      } = await LanternLargestContentfulPaint.request(metricComputationInput, context);
+
       wastedMs = this.computeWasteWithTTIGraph(results, graph, simulator, {
         providedWastedBytesByUrl: result.wastedBytesByUrl,
       });
+
+      const {savings: fcpSavings} = this.computeWasteWithGraph(
+        results,
+        pessimisticFCPGraph,
+        simulator,
+        {providedWastedBytesByUrl: result.wastedBytesByUrl, label: 'fcp'}
+      );
+      const {savings: lcpGraphSavings} = this.computeWasteWithGraph(
+        results,
+        pessimisticLCPGraph,
+        simulator,
+        {providedWastedBytesByUrl: result.wastedBytesByUrl, label: 'lcp'}
+      );
+
+      // The LCP graph can underestimate the LCP savings if there is potential savings on the LCP record itself.
+      let lcpRecordSavings = 0;
+      const lcpRecord = await LCPImageRecord.request(metricComputationInput, context);
+      if (lcpRecord) {
+        const lcpResult = results.find(result => result.url === lcpRecord.url);
+        if (lcpResult) {
+          lcpRecordSavings = simulator.computeWastedMsFromWastedBytes(lcpResult.wastedBytes);
+        }
+      }
+
+      metricSavings.FCP = fcpSavings;
+      metricSavings.LCP = Math.max(lcpGraphSavings, lcpRecordSavings);
     } else {
       wastedMs = simulator.computeWastedMsFromWastedBytes(wastedBytes);
     }
@@ -232,6 +296,13 @@ class ByteEfficiencyAudit extends Audit {
     const details = Audit.makeOpportunityDetails(result.headings, results,
       {overallSavingsMs: wastedMs, overallSavingsBytes: wastedBytes, sortedBy});
 
+    // TODO: Remove from debug data once `metricSavings` is added to the LHR.
+    // For now, add it to debug data for visibility.
+    details.debugData = {
+      type: 'debugdata',
+      metricSavings,
+    };
+
     return {
       explanation: result.explanation,
       warnings: result.warnings,
@@ -240,6 +311,7 @@ class ByteEfficiencyAudit extends Audit {
       numericUnit: 'millisecond',
       score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
       details,
+      metricSavings,
     };
   }
 

package/core/audits/byte-efficiency/render-blocking-resources.js

@@ -299,6 +299,7 @@ class RenderBlockingResources extends Audit {
       numericValue: wastedMs,
       numericUnit: 'millisecond',
       details,
+      metricSavings: {FCP: wastedMs, LCP: wastedMs},
     };
   }
 }

package/core/audits/long-tasks.d.ts

@@ -1,5 +1,53 @@
 export default LongTasks;
+export type TaskGroupIds = import('../lib/tracehouse/task-groups.js').TaskGroupIds;
+export type Timing = {
+    startTime: number;
+    duration: number;
+};
+export type DebugTask = Timing & {
+    [p: string]: number;
+    urlIndex: number;
+};
+/** @typedef {import('../lib/tracehouse/task-groups.js').TaskGroupIds} TaskGroupIds */
+/** @typedef {{startTime: number, duration: number}} Timing */
+/** @typedef {Timing & {urlIndex: number, [p: string]: number}} DebugTask */
 declare class LongTasks extends Audit {
+    /**
+     * Returns the timing information for the given task, recursively walking the
+     * task's children and adding up time spent in each type of task activity.
+     * If `taskTimingsByEvent` is present, it will be used for task timing instead
+     * of the timings on the tasks themselves.
+     * If `timeByTaskGroup` is not provided, a new Map will be populated with
+     * timing breakdown; if one is provided, timing breakdown will be added to the
+     * existing breakdown.
+     *
+     * TODO: when simulated, a significant number of child tasks are dropped, so
+     * most time will be attributed to 'other' (the category of the top-level
+     * RunTask). See pruning in `PageDependencyGraph.linkCPUNodes`.
+     * @param {LH.Artifacts.TaskNode} task
+     * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+     * @param {Map<TaskGroupIds, number>} [timeByTaskGroup]
+     * @return {{startTime: number, duration: number, timeByTaskGroup: Map<TaskGroupIds, number>}}
+     */
+    static getTimingBreakdown(task: LH.Artifacts.TaskNode, taskTimingsByEvent: Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming> | undefined, timeByTaskGroup?: Map<import("../lib/tracehouse/task-groups.js").TaskGroupIds, number> | undefined): {
+        startTime: number;
+        duration: number;
+        timeByTaskGroup: Map<TaskGroupIds, number>;
+    };
+    /**
+     * @param {Array<LH.Artifacts.TaskNode>} longTasks
+     * @param {Set<string>} jsUrls
+     * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+     * @return {LH.Audit.Details.DebugData}
+     */
+    static makeDebugData(longTasks: Array<LH.Artifacts.TaskNode>, jsUrls: Set<string>, taskTimingsByEvent: Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming> | undefined): LH.Audit.Details.DebugData;
+    /**
+     * Get timing from task, overridden by taskTimingsByEvent if provided.
+     * @param {LH.Artifacts.TaskNode} task
+     * @param {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} taskTimingsByEvent
+     * @return {Timing}
+     */
+    static getTiming(task: LH.Artifacts.TaskNode, taskTimingsByEvent: Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming> | undefined): Timing;
     /**
      * @param {LH.Artifacts} artifacts
      * @param {LH.Audit.Context} context