lighthouse 10.4.0 → 11.0.0

package/core/audits/accessibility/image-redundant-alt.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 <img> elements have alternative text that is not repeated text.
+ * 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 image elements have the alt HTML attribute that is not redundant. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Image elements do not have `[alt]` attributes that are redundant text.',
+  /** Title of an accesibility audit that evaluates if all image elements have the alt HTML attribute that is not redundant. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Image elements have `[alt]` attributes that are redundant text.',
+  /** 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: 'Informative elements should aim for short, descriptive alternative text. ' +
+      'Alternative text that is exactly the same as the text adjacent to the link or image is ' +
+      'potentially confusing for screen reader users, because the text will be read twice. ' +
+      '[Learn more about the `alt` attribute](https://dequeuniversity.com/rules/axe/4.7/image-redundant-alt).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class ImageRedundantAlt extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'image-redundant-alt',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default ImageRedundantAlt;
+export {UIStrings};

package/core/audits/accessibility/label-content-name-mismatch.d.ts

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

package/core/audits/accessibility/label-content-name-mismatch.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 Ensure that interactive elements labeled with their content have their visible label as part of their accessible name.
+ * 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 elements labeled through their content have their visible text as part of their accessible name. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Elements with visible text labels have matching accessible names.',
+  /** Title of an accesibility audit that evaluates if elements labeled through their content have their visible text as part of their accessible name. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Elements with visible text labels do not have matching accessible names.',
+  /** 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: 'Visible text labels that do not match the accessible name can result in a ' +
+      'confusing experience for screen reader users. ' +
+      '[Learn more about accessible names](https://dequeuniversity.com/rules/axe/4.7/label-content-name-mismatch).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class LabelContentNameMismatch extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'label-content-name-mismatch',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default LabelContentNameMismatch;
+export {UIStrings};

package/core/audits/accessibility/skip-link.d.ts

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

package/core/audits/accessibility/skip-link.js

@@ -0,0 +1,43 @@
+/**
+ * @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 skip-link target is focusable.
+ * 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 the skip link is focusable. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Skip links are focusable.',
+  /** Title of an accesibility audit that evaluates if the skip link is focusable. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Skip links are not focusable.',
+  /** 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: 'Including a skip link can help users skip to the main content to save time. ' +
+      '[Learn more about skip links](https://dequeuniversity.com/rules/axe/4.7/skip-link).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class SkipLink extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'skip-link',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default SkipLink;
+export {UIStrings};

package/core/audits/accessibility/table-duplicate-name.d.ts

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

package/core/audits/accessibility/table-duplicate-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 Ensure that table summary and caption have different content.
+ * 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 tables have different content in the summary attribute and caption element. This title is descriptive of the successful state and is shown to users when no user action is required. */
+  title: 'Tables have different content in the summary attribute and `<caption>`.',
+  /** Title of an accesibility audit that evaluates if tables have different content in the summary attribute and caption element. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
+  failureTitle: 'Tables have the same content in the summary attribute and `<caption>.`',
+  /** 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: 'The summary attribute should describe the table structure, while `<caption>` ' +
+      'should have the onscreen title. Accurate table mark-up helps users of screen readers. ' +
+      '[Learn more about summary and caption](https://dequeuniversity.com/rules/axe/4.7/table-duplicate-name).',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class TableDuplicateName extends AxeAudit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'table-duplicate-name',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Accessibility'],
+    };
+  }
+}
+
+export default TableDuplicateName;
+export {UIStrings};

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

@@ -19,7 +19,7 @@ const UIStrings = {
   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. ' +
+      'difficulty targeting small controls to activate the targets. ' +
       '[Learn more about touch targets](https://dequeuniversity.com/rules/axe/4.7/target-size).',
 };
 

package/core/audits/byte-efficiency/duplicated-javascript.js

@@ -229,8 +229,8 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
     const headings = [
       /* eslint-disable max-len */
       {key: 'source', valueType: 'code', subItemsHeading: {key: 'url', valueType: 'url'}, label: str_(i18n.UIStrings.columnSource)},
-      {key: null, valueType: 'bytes', subItemsHeading: {key: 'sourceTransferBytes'}, granularity: 0.05, label: str_(i18n.UIStrings.columnTransferSize)},
-      {key: 'wastedBytes', valueType: 'bytes', granularity: 0.05, label: str_(i18n.UIStrings.columnWastedBytes)},
+      {key: null, valueType: 'bytes', subItemsHeading: {key: 'sourceTransferBytes'}, granularity: 10, label: str_(i18n.UIStrings.columnTransferSize)},
+      {key: 'wastedBytes', valueType: 'bytes', granularity: 10, label: str_(i18n.UIStrings.columnWastedBytes)},
       /* eslint-enable max-len */
     ];
 

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/dobetterweb/uses-http2.d.ts

@@ -2,12 +2,29 @@ export default UsesHTTP2Audit;
 export type Simulator = import('../../lib/dependency-graph/simulator/simulator').Simulator;
 export type Node = import('../../lib/dependency-graph/base-node.js').Node;
 declare class UsesHTTP2Audit extends Audit {
+    /**
+     * Computes the estimated effect of all results being converted to http/2 on the provided graph.
+     *
+     * @param {Array<{url: string}>} results
+     * @param {Node} graph
+     * @param {Simulator} simulator
+     * @param {{label?: string}=} options
+     * @return {{savings: number, simulationBefore: LH.Gatherer.Simulation.Result, simulationAfter: LH.Gatherer.Simulation.Result}}
+     */
+    static computeWasteWithGraph(results: Array<{
+        url: string;
+    }>, graph: Node, simulator: Simulator, options?: {
+        label?: string;
+    } | undefined): {
+        savings: number;
+        simulationBefore: LH.Gatherer.Simulation.Result;
+        simulationAfter: LH.Gatherer.Simulation.Result;
+    };
     /**
      * Computes the estimated effect all results being converted to use http/2, the max of:
      *
      * - end time of the last long task in the provided graph
      * - end time of the last node in the graph
-     *
      * @param {Array<{url: string}>} results
      * @param {Node} graph
      * @param {Simulator} simulator

package/core/audits/dobetterweb/uses-http2.js

@@ -21,6 +21,8 @@ import {NetworkRequest} from '../../lib/network-request.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 * as i18n from '../../lib/i18n/i18n.js';
 
 const UIStrings = {
@@ -66,23 +68,23 @@ class UsesHTTP2Audit extends Audit {
   }
 
   /**
-   * Computes the estimated effect all results being converted to use http/2, the max of:
-   *
-   * - end time of the last long task in the provided graph
-   * - end time of the last node in the graph
+   * Computes the estimated effect of all results being converted to http/2 on the provided graph.
    *
    * @param {Array<{url: string}>} results
    * @param {Node} graph
    * @param {Simulator} simulator
-   * @return {number}
+   * @param {{label?: string}=} options
+   * @return {{savings: number, simulationBefore: LH.Gatherer.Simulation.Result, simulationAfter: LH.Gatherer.Simulation.Result}}
    */
-  static computeWasteWithTTIGraph(results, graph, simulator) {
-    const beforeLabel = `uses-http2-before`;
-    const afterLabel = `uses-http2-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 flexibleOrdering = true;
 
     const urlsToChange = new Set(results.map(result => result.url));
-    const simulationBefore = simulator.simulate(graph, {label: beforeLabel, flexibleOrdering});
+    const simulationBefore =
+      simulator.simulate(graph, {label: beforeLabel, flexibleOrdering});
 
     // Update all the protocols to reflect implementing our recommendations
     /** @type {Map<string, string>} */
@@ -105,9 +107,36 @@ class UsesHTTP2Audit extends Audit {
       node.record.protocol = originalProtocol;
     });
 
-    const savingsOnOverallLoad = simulationBefore.timeInMs - simulationAfter.timeInMs;
-    const savingsOnTTI = LanternInteractive.getLastLongTaskEndTime(simulationBefore.nodeTimings) -
+    const savings = simulationBefore.timeInMs - simulationAfter.timeInMs;
+
+    return {
+      // Round waste to nearest 10ms
+      savings: Math.round(Math.max(savings, 0) / 10) * 10,
+      simulationBefore,
+      simulationAfter,
+    };
+  }
+
+  /**
+   * Computes the estimated effect all results being converted to use http/2, the max of:
+   *
+   * - end time of the last long task in the provided graph
+   * - end time of the last node in the graph
+   * @param {Array<{url: string}>} results
+   * @param {Node} graph
+   * @param {Simulator} simulator
+   * @return {number}
+   */
+  static computeWasteWithTTIGraph(results, graph, simulator) {
+    const {savings: savingsOnOverallLoad, simulationBefore, simulationAfter} =
+      this.computeWasteWithGraph(results, graph, simulator, {
+        label: 'tti',
+      });
+
+    const savingsOnTTI =
+      LanternInteractive.getLastLongTaskEndTime(simulationBefore.nodeTimings) -
       LanternInteractive.getLastLongTaskEndTime(simulationAfter.nodeTimings);
+
     const savings = Math.max(savingsOnTTI, savingsOnOverallLoad);
 
     // Round waste to nearest 10ms
@@ -237,9 +266,25 @@ class UsesHTTP2Audit extends Audit {
       devtoolsLog,
       settings,
     };
-    const graph = await PageDependencyGraph.request({trace, devtoolsLog, URL}, context);
+    const pageGraph = await PageDependencyGraph.request({trace, devtoolsLog, URL}, context);
     const simulator = await LoadSimulator.request(simulatorOptions, context);
-    const wastedMs = UsesHTTP2Audit.computeWasteWithTTIGraph(resources, graph, simulator);
+    const metricComputationInput = Audit.makeMetricComputationDataInput(artifacts, context);
+
+    const {
+      pessimisticGraph: fcpGraph,
+    } = await LanternFirstContentfulPaint.request(metricComputationInput, context);
+    const {
+      pessimisticGraph: lcpGraph,
+    } = await LanternLargestContentfulPaint.request(metricComputationInput, context);
+
+    const wastedMsTti = UsesHTTP2Audit.computeWasteWithTTIGraph(
+      resources, pageGraph, simulator);
+    const wasteFcp =
+      UsesHTTP2Audit.computeWasteWithGraph(resources,
+        fcpGraph, simulator, {label: 'fcp'});
+    const wasteLcp =
+      UsesHTTP2Audit.computeWasteWithGraph(resources,
+        lcpGraph, simulator, {label: 'lcp'});
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
@@ -248,14 +293,15 @@ class UsesHTTP2Audit extends Audit {
     ];
 
     const details = Audit.makeOpportunityDetails(headings, resources,
-      {overallSavingsMs: wastedMs});
+      {overallSavingsMs: wastedMsTti});
 
     return {
       displayValue,
-      numericValue: wastedMs,
+      numericValue: wastedMsTti,
       numericUnit: 'millisecond',
-      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
+      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMsTti),
       details,
+      metricSavings: {LCP: wasteLcp.savings, FCP: wasteFcp.savings},
     };
   }
 }

package/core/audits/installable-manifest.d.ts

@@ -59,10 +59,6 @@ export const UIStrings: {
     'manifest-display-not-supported': string;
     /** Error message explaining that the manifest could not be fetched, might be empty, or could not be parsed. */
     'manifest-empty': string;
-    /** Error message explaining that no matching service worker was detected,
-     * and provides a suggestion to reload the page or check whether the scope of the service worker
-     * for the current page encloses the scope and start URL from the manifest. */
-    'no-matching-service-worker': string;
     /**
      * @description Error message explaining that the manifest does not contain a suitable icon.
      * @example {192} value0
@@ -104,7 +100,7 @@ export const UIStrings: {
     'manifest-location-changed': string;
     /** Warning message explaining that the page does not work offline. */
     'warn-not-offline-capable': string;
-    /** Error message explaining that Lighthouse failed while detecting a service worker, and directing the user to try again in a new Chrome. */
+    /** Error message explaining that Lighthouse failed while checking if the page is installable, and directing the user to try again in a new Chrome. */
     'protocol-timeout': string;
     /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
     'pipeline-restarted': string;

package/core/audits/installable-manifest.js

@@ -44,11 +44,6 @@ const UIStrings = {
   'manifest-display-not-supported': `Manifest 'display' property must be one of 'standalone', 'fullscreen', or 'minimal-ui'`,
   /** Error message explaining that the manifest could not be fetched, might be empty, or could not be parsed. */
   'manifest-empty': `Manifest could not be fetched, is empty, or could not be parsed`,
-  // TODO: This error was removed in M114, we can remove this message when it hits stable.
-  /** Error message explaining that no matching service worker was detected,
-   * and provides a suggestion to reload the page or check whether the scope of the service worker
-   * for the current page encloses the scope and start URL from the manifest. */
-  'no-matching-service-worker': `No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.`,
   /**
    * @description Error message explaining that the manifest does not contain a suitable icon.
    * @example {192} value0
@@ -93,8 +88,8 @@ const UIStrings = {
   'manifest-location-changed': `Manifest URL changed while the manifest was being fetched.`,
   /** Warning message explaining that the page does not work offline. */
   'warn-not-offline-capable': `Page does not work offline. The page will not be regarded as installable after Chrome 93, stable release August 2021.`,
-  /** Error message explaining that Lighthouse failed while detecting a service worker, and directing the user to try again in a new Chrome. */
-  'protocol-timeout': `Lighthouse could not determine if there was a service worker. Please try with a newer version of Chrome.`,
+  /** Error message explaining that Lighthouse failed while checking if the page is installable, and directing the user to try again in a new Chrome. */
+  'protocol-timeout': `Lighthouse could not determine if the page is installable. Please try with a newer version of Chrome.`,
   /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
   'pipeline-restarted': 'PWA has been uninstalled and installability checks resetting.',
   /**

package/core/audits/largest-contentful-paint-element.d.ts

@@ -1,11 +1,5 @@
 export default LargestContentfulPaintElement;
 declare class LargestContentfulPaintElement extends Audit {
-    /**
-     * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
-     * @param {LH.Audit.Context} context
-     * @return {Promise<number|undefined>}
-     */
-    static getOptionalLCPMetric(metricComputationData: LH.Artifacts.MetricComputationDataInput, context: LH.Audit.Context): Promise<number | undefined>;
     /**
      * @param {LH.Artifacts} artifacts
      * @return {LH.Audit.Details.Table|undefined}

package/core/audits/largest-contentful-paint-element.js

@@ -4,10 +4,13 @@
  * 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.
  */
 
+import log from 'lighthouse-logger';
+
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
 import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js';
 import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
+import {Sentry} from '../lib/sentry.js';
 
 const UIStrings = {
   /** Descriptive title of a diagnostic audit that provides the element that was determined to be the Largest Contentful Paint. */
@@ -49,19 +52,6 @@ class LargestContentfulPaintElement extends Audit {
     };
   }
 
-  /**
-   * @param {LH.Artifacts.MetricComputationDataInput} metricComputationData
-   * @param {LH.Audit.Context} context
-   * @return {Promise<number|undefined>}
-   */
-  static async getOptionalLCPMetric(metricComputationData, context) {
-    try {
-      const {timing: metricLcp} =
-        await LargestContentfulPaint.request(metricComputationData, context);
-      return metricLcp;
-    } catch {}
-  }
-
   /**
    * @param {LH.Artifacts} artifacts
    * @return {LH.Audit.Details.Table|undefined}
@@ -139,11 +129,19 @@ class LargestContentfulPaintElement extends Audit {
     const items = [elementTable];
     let displayValue;
 
-    const metricLcp = await this.getOptionalLCPMetric(metricComputationData, context);
-    if (metricLcp) {
+    try {
+      const {timing: metricLcp} =
+        await LargestContentfulPaint.request(metricComputationData, context);
       displayValue = str_(i18n.UIStrings.ms, {timeInMs: metricLcp});
+
       const phaseTable = await this.makePhaseTable(metricLcp, metricComputationData, context);
       items.push(phaseTable);
+    } catch (err) {
+      Sentry.captureException(err, {
+        tags: {audit: this.meta.id},
+        level: 'error',
+      });
+      log.error(this.meta.id, err.message);
     }
 
     const details = Audit.makeListDetails(items);

package/core/audits/metrics/{experimental-interaction-to-next-paint.d.ts → interaction-to-next-paint.d.ts}

@@ -1,8 +1,8 @@
-export default ExperimentalInteractionToNextPaint;
+export default InteractionToNextPaint;
 /**
  * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
  */
-declare class ExperimentalInteractionToNextPaint extends Audit {
+declare class InteractionToNextPaint extends Audit {
     /**
      * @return {LH.Audit.ScoreOptions}
      */
@@ -18,4 +18,4 @@ export namespace UIStrings {
     const description: string;
 }
 import { Audit } from '../audit.js';
-//# sourceMappingURL=experimental-interaction-to-next-paint.d.ts.map
+//# sourceMappingURL=interaction-to-next-paint.d.ts.map

package/core/audits/metrics/{experimental-interaction-to-next-paint.js → interaction-to-next-paint.js}

@@ -20,13 +20,13 @@ const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 /**
  * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
  */
-class ExperimentalInteractionToNextPaint extends Audit {
+class InteractionToNextPaint extends Audit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
-      id: 'experimental-interaction-to-next-paint',
+      id: 'interaction-to-next-paint',
       title: str_(i18n.UIStrings.interactionToNextPaint),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
@@ -84,5 +84,5 @@ class ExperimentalInteractionToNextPaint extends Audit {
   }
 }
 
-export default ExperimentalInteractionToNextPaint;
+export default InteractionToNextPaint;
 export {UIStrings};

package/core/audits/uses-rel-preconnect.js

@@ -14,6 +14,7 @@ import {LoadSimulator} from '../computed/load-simulator.js';
 import {ProcessedNavigation} from '../computed/processed-navigation.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';
 
 // Preconnect establishes a "clean" socket. Chrome's socket manager will keep an unused socket
 // around for 10s. Meaning, the time delta between processing preconnect a request should be <10s,
@@ -125,7 +126,8 @@ class UsesRelPreconnectAudit extends Audit {
     const devtoolsLog = artifacts.devtoolsLogs[UsesRelPreconnectAudit.DEFAULT_PASS];
     const settings = context.settings;
 
-    let maxWasted = 0;
+    let maxWastedLcp = 0;
+    let maxWastedFcp = 0;
     /** @type {Array<LH.IcuMessage>} */
     const warnings = [];
 
@@ -144,7 +146,14 @@ class UsesRelPreconnectAudit extends Audit {
     /** @type {Set<string>} */
     const lcpGraphURLs = new Set();
     lcpGraph.traverse(node => {
-      if (node.type === 'network' ) lcpGraphURLs.add(node.record.url);
+      if (node.type === 'network') lcpGraphURLs.add(node.record.url);
+    });
+
+    const fcpGraph =
+      await LanternFirstContentfulPaint.getPessimisticGraph(pageGraph, processedNavigation);
+    const fcpGraphURLs = new Set();
+    fcpGraph.traverse(node => {
+      if (node.type === 'network') fcpGraphURLs.add(node.record.url);
     });
 
     /** @type {Map<string, LH.Artifacts.NetworkRequest[]>}  */
@@ -216,7 +225,11 @@ class UsesRelPreconnectAudit extends Audit {
         return;
       }
 
-      maxWasted = Math.max(wastedMs, maxWasted);
+      maxWastedLcp = Math.max(wastedMs, maxWastedLcp);
+
+      if (fcpGraphURLs.has(firstRecordOfOrigin.url)) {
+        maxWastedFcp = Math.max(wastedMs, maxWastedLcp);
+      }
       results.push({
         url: securityOrigin,
         wastedMs: wastedMs,
@@ -240,6 +253,7 @@ class UsesRelPreconnectAudit extends Audit {
         score: 1,
         warnings: preconnectLinks.length >= 3 ?
           [...warnings, str_(UIStrings.tooManyPreconnectLinksWarning)] : warnings,
+        metricSavings: {LCP: maxWastedLcp, FCP: maxWastedFcp},
       };
     }
 
@@ -250,17 +264,18 @@ class UsesRelPreconnectAudit extends Audit {
     ];
 
     const details = Audit.makeOpportunityDetails(headings, results,
-      {overallSavingsMs: maxWasted, sortedBy: ['wastedMs']});
+      {overallSavingsMs: maxWastedLcp, sortedBy: ['wastedMs']});
 
     return {
-      score: ByteEfficiencyAudit.scoreForWastedMs(maxWasted),
-      numericValue: maxWasted,
+      score: ByteEfficiencyAudit.scoreForWastedMs(maxWastedLcp),
+      numericValue: maxWastedLcp,
       numericUnit: 'millisecond',
-      displayValue: maxWasted ?
-        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: maxWasted}) :
+      displayValue: maxWastedLcp ?
+        str_(i18n.UIStrings.displayValueMsSavings, {wastedMs: maxWastedLcp}) :
         '',
       warnings,
       details,
+      metricSavings: {LCP: maxWastedLcp, FCP: maxWastedFcp},
     };
   }
 }