lighthouse 11.0.0 → 11.1.0

package/core/audits/installable-manifest.js

@@ -87,17 +87,12 @@ const UIStrings = {
   /** Error message explaining that the web manifest's URL changed while the manifest was being downloaded by the browser. */
   'manifest-location-changed': `Manifest URL changed while the manifest was being fetched.`,
   /** Warning message explaining that the page does not work offline. */
+  // TODO(COMPAT): This error was removed in M118, we can remove this message when it hits stable.
   '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 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.',
-  /**
-   * TODO: This error was removed in M114, we can remove this message when it hits stable.
-   * @description Error message explaining that the URL of the manifest uses a scheme that is not supported on Android.
-   * @example {data:} scheme
-   */
-  'scheme-not-supported-for-webapk': 'The manifest URL scheme ({scheme}) is not supported on Android.',
 };
 /* eslint-enable max-len */
 
@@ -157,17 +152,6 @@ class InstallableManifest extends Audit {
       // @ts-expect-error errorIds from protocol should match up against the strings dict
       const matchingString = UIStrings[err.errorId];
 
-      if (err.errorId === 'scheme-not-supported-for-webapk') {
-        // If there was no manifest, then there will be at lest one other installability error.
-        // We can ignore this error if that's the case.
-        const manifestUrl = artifacts.WebAppManifest?.url;
-        if (!manifestUrl) continue;
-
-        const scheme = new URL(manifestUrl).protocol;
-        i18nErrors.push(str_(matchingString, {scheme}));
-        continue;
-      }
-
       // Handle an errorId we don't recognize.
       if (matchingString === undefined) {
         i18nErrors.push(str_(UIStrings.noErrorId, {errorId: err.errorId}));

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

@@ -8,7 +8,8 @@ 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 {LargestContentfulPaint as LargestContentfulPaintComputed} from '../computed/metrics/largest-contentful-paint.js';
+import LargestContentfulPaint from './metrics/largest-contentful-paint.js';
 import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
 import {Sentry} from '../lib/sentry.js';
 
@@ -46,6 +47,7 @@ class LargestContentfulPaintElement extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      guidanceLevel: 1,
       supportedModes: ['navigation'],
       requiredArtifacts:
         ['traces', 'TraceElements', 'devtoolsLogs', 'GatherContext', 'settings', 'URL'],
@@ -124,14 +126,22 @@ class LargestContentfulPaintElement extends Audit {
       settings: context.settings, URL: artifacts.URL};
 
     const elementTable = this.makeElementTable(artifacts);
-    if (!elementTable) return {score: null, notApplicable: true};
+    if (!elementTable) {
+      return {
+        score: null,
+        notApplicable: true,
+        metricSavings: {LCP: 0},
+      };
+    }
 
     const items = [elementTable];
     let displayValue;
+    let metricLcp = 0;
 
     try {
-      const {timing: metricLcp} =
-        await LargestContentfulPaint.request(metricComputationData, context);
+      const lcpResult =
+        await LargestContentfulPaintComputed.request(metricComputationData, context);
+      metricLcp = lcpResult.timing;
       displayValue = str_(i18n.UIStrings.ms, {timeInMs: metricLcp});
 
       const phaseTable = await this.makePhaseTable(metricLcp, metricComputationData, context);
@@ -146,10 +156,18 @@ class LargestContentfulPaintElement extends Audit {
 
     const details = Audit.makeListDetails(items);
 
+    // Conceptually, this doesn't make much sense as "savings" for this audit since there isn't anything to "fix".
+    // However, this audit will always be useful when improving LCP and that should be reflected in our impact calculations.
+    const idealLcp = LargestContentfulPaint.defaultOptions[context.settings.formFactor].scoring.p10;
+    const lcpSavings = Math.max(0, metricLcp - idealLcp);
+
     return {
       score: 1,
       displayValue,
       details,
+      metricSavings: {
+        LCP: lcpSavings,
+      },
     };
   }
 }

package/core/audits/layout-shift-elements.js

@@ -29,6 +29,7 @@ class LayoutShiftElements extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      guidanceLevel: 2,
       requiredArtifacts: ['traces', 'TraceElements'],
     };
   }

package/core/audits/lcp-lazy-loaded.d.ts

@@ -8,9 +8,10 @@ declare class LargestContentfulPaintLazyLoaded extends Audit {
     static isImageInViewport(image: LH.Artifacts.ImageElement, viewportDimensions: LH.Artifacts.ViewportDimensions): boolean;
     /**
      * @param {LH.Artifacts} artifacts
-     * @return {LH.Audit.Product}
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
      */
-    static audit(artifacts: LH.Artifacts): LH.Audit.Product;
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
 }
 export namespace UIStrings {
     const title: string;

package/core/audits/lcp-lazy-loaded.js

@@ -6,6 +6,8 @@
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
+import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
+import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js';
 
 const UIStrings = {
   /** Title of a Lighthouse audit that provides detail on whether the largest above-the-fold image was loaded with sufficient priority. This descriptive title is shown to users when the image was loaded properly. */
@@ -18,6 +20,8 @@ const UIStrings = {
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
+const ESTIMATED_PERCENT_SAVINGS = 0.15;
+
 class LargestContentfulPaintLazyLoaded extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -29,7 +33,9 @@ class LargestContentfulPaintLazyLoaded extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['TraceElements', 'ViewportDimensions', 'ImageElements'],
+      guidanceLevel: 3,
+      requiredArtifacts: ['TraceElements', 'ViewportDimensions', 'ImageElements',
+        'traces', 'devtoolsLogs', 'GatherContext', 'URL'],
     };
   }
 
@@ -46,9 +52,10 @@ class LargestContentfulPaintLazyLoaded extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     const lcpElement = artifacts.TraceElements.find(element => {
       return element.traceEventType === 'largest-contentful-paint' && element.type === 'image';
     });
@@ -59,7 +66,11 @@ class LargestContentfulPaintLazyLoaded extends Audit {
 
     if (!lcpElementImage ||
       !this.isImageInViewport(lcpElementImage, artifacts.ViewportDimensions)) {
-      return {score: null, notApplicable: true};
+      return {
+        score: null,
+        notApplicable: true,
+        metricSavings: {LCP: 0},
+      };
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */
@@ -73,8 +84,27 @@ class LargestContentfulPaintLazyLoaded extends Audit {
       },
     ]);
 
+    const wasLazyLoaded = lcpElementImage.loading === 'lazy';
+
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+    const {timing: metricLcp} =
+      await LargestContentfulPaint.request(metricComputationData, context);
+    const lcpBreakdown = await LCPBreakdown.request(metricComputationData, context);
+    let lcpSavings = 0;
+    if (wasLazyLoaded && lcpBreakdown.loadStart !== undefined) {
+      // Estimate the LCP savings using a statistical percentage.
+      // https://web.dev/lcp-lazy-loading/#causal-performance
+      //
+      // LCP savings will be at most the LCP load delay.
+      const lcpLoadDelay = lcpBreakdown.loadStart - lcpBreakdown.ttfb;
+      lcpSavings = Math.min(metricLcp * ESTIMATED_PERCENT_SAVINGS, lcpLoadDelay);
+    }
+
     return {
-      score: lcpElementImage.loading === 'lazy' ? 0 : 1,
+      score: wasLazyLoaded ? 0 : 1,
+      metricSavings: {
+        LCP: lcpSavings,
+      },
       details,
     };
   }

package/core/audits/long-tasks.js

@@ -66,6 +66,7 @@ class LongTasks extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
+      guidanceLevel: 1,
       requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
     };
   }

package/core/audits/mainthread-work-breakdown.js

@@ -42,6 +42,7 @@ class MainThreadWorkBreakdown extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      guidanceLevel: 1,
       requiredArtifacts: ['traces'],
     };
   }

package/core/audits/non-composited-animations.js

@@ -110,6 +110,7 @@ class NonCompositedAnimations extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
+      guidanceLevel: 2,
       requiredArtifacts: ['TraceElements', 'HostUserAgent'],
     };
   }

package/core/audits/prioritize-lcp-image.js

@@ -38,6 +38,7 @@ class PrioritizeLcpImage extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
+      guidanceLevel: 3,
       requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext', 'URL', 'TraceElements'],
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
     };

package/core/audits/redirects.js

@@ -31,6 +31,7 @@ class Redirects extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
       supportedModes: ['navigation'],
+      guidanceLevel: 2,
       requiredArtifacts: ['URL', 'GatherContext', 'devtoolsLogs', 'traces'],
     };
   }
@@ -144,10 +145,7 @@ class Redirects extends Audit {
       {overallSavingsMs: totalWastedMs});
 
     return {
-      // We award a passing grade if you only have 1 redirect
-      // TODO(phulce): reconsider if cases like the example in https://github.com/GoogleChrome/lighthouse/issues/8984
-      // should fail this audit.
-      score: documentRequests.length <= 2 ? 1 : ByteEfficiencyAudit.scoreForWastedMs(totalWastedMs),
+      score: ByteEfficiencyAudit.scoreForWastedMs(totalWastedMs),
       numericValue: totalWastedMs,
       numericUnit: 'millisecond',
       displayValue: totalWastedMs ?

package/core/audits/seo/crawlable-anchors.js

@@ -44,6 +44,7 @@ class CrawlableAnchors extends Audit {
       name = '',
       role = '',
       id,
+      href,
     }) => {
       rawHref = rawHref.replace( /\s/g, '');
       name = name.trim();
@@ -61,7 +62,7 @@ class CrawlableAnchors extends Audit {
       if (rawHref.startsWith('file:')) return true;
       if (name.length > 0) return;
 
-      if (rawHref === '') return true;
+      if (href === '') return true;
       if (javaScriptVoidRegExp.test(rawHref)) return true;
 
       // checking if rawHref is a valid

package/core/audits/server-response-time.js

@@ -37,6 +37,7 @@ class ServerResponseTime extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
+      guidanceLevel: 1,
       requiredArtifacts: ['devtoolsLogs', 'URL', 'GatherContext'],
     };
   }

package/core/audits/third-party-facades.js

@@ -24,8 +24,8 @@ import * as i18n from '../lib/i18n/i18n.js';
 import {EntityClassification} from '../computed/entity-classification.js';
 import thirdPartyWeb from '../lib/third-party-web.js';
 import {NetworkRecords} from '../computed/network-records.js';
-import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import ThirdPartySummary from './third-party-summary.js';
+import {TBTImpactTasks} from '../computed/tbt-impact-tasks.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides details about the third-party code on a web page that can be lazy loaded with a facade alternative. This descriptive title is shown to users when no resources have facade alternatives available. A facade is a lightweight component which looks like the desired resource. Lazy loading means resources are deferred until they are needed. Third-party code refers to resources that are not within the control of the site owner. */
@@ -86,7 +86,8 @@ class ThirdPartyFacades extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
+      guidanceLevel: 3,
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
 
@@ -148,19 +149,23 @@ class ThirdPartyFacades extends Audit {
    */
   static async audit(artifacts, context) {
     const settings = context.settings;
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
     const classifiedEntities = await EntityClassification.request(
       {URL: artifacts.URL, devtoolsLog}, context);
-    const tasks = await MainThreadTasks.request(trace, context);
+
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+    const tbtImpactTasks = await TBTImpactTasks.request(metricComputationData, context);
+
     const multiplier = settings.throttlingMethod === 'simulate' ?
       settings.throttling.cpuSlowdownMultiplier : 1;
-    const summaries = ThirdPartySummary.getSummaries(networkRecords, tasks, multiplier,
+    const summaries = ThirdPartySummary.getSummaries(networkRecords, tbtImpactTasks, multiplier,
       classifiedEntities);
     const facadableProducts =
       ThirdPartyFacades.getProductsWithFacade(summaries.byURL, classifiedEntities);
 
+    let tbtImpact = 0;
+
     /** @type {LH.Audit.Details.TableItem[]} */
     const results = [];
     for (const {product, entity} of facadableProducts) {
@@ -179,6 +184,8 @@ class ThirdPartyFacades extends Audit {
       const entitySummary = summaries.byEntity.get(entity);
       if (!urls || !entitySummary) continue;
 
+      tbtImpact += entitySummary.tbtImpact;
+
       const items = Array.from(urls).map((url) => {
         const urlStats = summaries.byURL.get(url);
         return /** @type {import('./third-party-summary.js').URLSummary} */ ({url, ...urlStats});
@@ -198,6 +205,7 @@ class ThirdPartyFacades extends Audit {
       return {
         score: 1,
         notApplicable: true,
+        metricSavings: {TBT: 0},
       };
     }
 
@@ -216,6 +224,7 @@ class ThirdPartyFacades extends Audit {
         itemCount: results.length,
       }),
       details: Audit.makeTableDetails(headings, results),
+      metricSavings: {TBT: tbtImpact},
     };
   }
 }

package/core/audits/third-party-summary.d.ts

@@ -3,10 +3,12 @@ export type Summary = {
     mainThreadTime: number;
     transferSize: number;
     blockingTime: number;
+    tbtImpact: number;
 };
 export type URLSummary = {
     transferSize: number;
     blockingTime: number;
+    tbtImpact: number;
     url: string | LH.IcuMessage;
 };
 export type SummaryMaps = {
@@ -27,12 +29,12 @@ declare class ThirdPartySummary extends Audit {
     /**
      *
      * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-     * @param {Array<LH.Artifacts.TaskNode>} mainThreadTasks
+     * @param {Array<LH.Artifacts.TBTImpactTask>} tbtImpactTasks
      * @param {number} cpuMultiplier
      * @param {LH.Artifacts.EntityClassification} entityClassification
      * @return {SummaryMaps}
      */
-    static getSummaries(networkRecords: Array<LH.Artifacts.NetworkRequest>, mainThreadTasks: Array<LH.Artifacts.TaskNode>, cpuMultiplier: number, entityClassification: LH.Artifacts.EntityClassification): SummaryMaps;
+    static getSummaries(networkRecords: Array<LH.Artifacts.NetworkRequest>, tbtImpactTasks: Array<LH.Artifacts.TBTImpactTask>, cpuMultiplier: number, entityClassification: LH.Artifacts.EntityClassification): SummaryMaps;
     /**
      * @param {LH.Artifacts.Entity} entity
      * @param {SummaryMaps} summaries

package/core/audits/third-party-summary.js

@@ -8,8 +8,8 @@ import {Audit} from './audit.js';
 import {EntityClassification} from '../computed/entity-classification.js';
 import * as i18n from '../lib/i18n/i18n.js';
 import {NetworkRecords} from '../computed/network-records.js';
-import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {getJavaScriptURLs, getAttributableURLForTask} from '../lib/tracehouse/task-summary.js';
+import {TBTImpactTasks} from '../computed/tbt-impact-tasks.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -38,12 +38,14 @@ const PASS_THRESHOLD_IN_MS = 250;
  * @property {number} mainThreadTime
  * @property {number} transferSize
  * @property {number} blockingTime
+ * @property {number} tbtImpact
  */
 
 /**
  * @typedef URLSummary
  * @property {number} transferSize
  * @property {number} blockingTime
+ * @property {number} tbtImpact
  * @property {string | LH.IcuMessage} url
  */
 
@@ -72,24 +74,25 @@ class ThirdPartySummary extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
+      guidanceLevel: 1,
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
 
   /**
    *
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-   * @param {Array<LH.Artifacts.TaskNode>} mainThreadTasks
+   * @param {Array<LH.Artifacts.TBTImpactTask>} tbtImpactTasks
    * @param {number} cpuMultiplier
    * @param {LH.Artifacts.EntityClassification} entityClassification
    * @return {SummaryMaps}
    */
-  static getSummaries(networkRecords, mainThreadTasks, cpuMultiplier, entityClassification) {
+  static getSummaries(networkRecords, tbtImpactTasks, cpuMultiplier, entityClassification) {
     /** @type {Map<string, Summary>} */
     const byURL = new Map();
     /** @type {Map<LH.Artifacts.Entity, Summary>} */
     const byEntity = new Map();
-    const defaultSummary = {mainThreadTime: 0, blockingTime: 0, transferSize: 0};
+    const defaultSummary = {mainThreadTime: 0, blockingTime: 0, transferSize: 0, tbtImpact: 0};
 
     for (const request of networkRecords) {
       const urlSummary = byURL.get(request.url) || {...defaultSummary};
@@ -99,7 +102,7 @@ class ThirdPartySummary extends Audit {
 
     const jsURLs = getJavaScriptURLs(networkRecords);
 
-    for (const task of mainThreadTasks) {
+    for (const task of tbtImpactTasks) {
       const attributableURL = getAttributableURLForTask(task, jsURLs);
 
       const urlSummary = byURL.get(attributableURL) || {...defaultSummary};
@@ -110,6 +113,7 @@ class ThirdPartySummary extends Audit {
       // Note that this is not totally equivalent to the TBT definition since it fails to account for FCP,
       // but a majority of third-party work occurs after FCP and should yield largely similar numbers.
       urlSummary.blockingTime += Math.max(taskDuration - 50, 0);
+      urlSummary.tbtImpact += task.selfTbtImpact;
       byURL.set(attributableURL, urlSummary);
     }
 
@@ -127,6 +131,7 @@ class ThirdPartySummary extends Audit {
       entitySummary.transferSize += urlSummary.transferSize;
       entitySummary.mainThreadTime += urlSummary.mainThreadTime;
       entitySummary.blockingTime += urlSummary.blockingTime;
+      entitySummary.tbtImpact += urlSummary.tbtImpact;
       byEntity.set(entity, entitySummary);
 
       const entityURLs = urls.get(entity) || [];
@@ -152,7 +157,7 @@ class ThirdPartySummary extends Audit {
       // Sort by blocking time first, then transfer size to break ties.
       .sort((a, b) => (b.blockingTime - a.blockingTime) || (b.transferSize - a.transferSize));
 
-    const subitemSummary = {transferSize: 0, blockingTime: 0};
+    const subitemSummary = {transferSize: 0, blockingTime: 0, tbtImpact: 0};
     const minTransferSize = Math.max(MIN_TRANSFER_SIZE_FOR_SUBITEMS, stats.transferSize / 20);
     const maxSubItems = Math.min(MAX_SUBITEMS, items.length);
     let numSubItems = 0;
@@ -167,6 +172,7 @@ class ThirdPartySummary extends Audit {
       numSubItems++;
       subitemSummary.transferSize += nextSubItem.transferSize;
       subitemSummary.blockingTime += nextSubItem.blockingTime;
+      subitemSummary.tbtImpact += nextSubItem.tbtImpact;
     }
     if (!subitemSummary.blockingTime && !subitemSummary.transferSize) {
       // Don't bother breaking down if there are no large resources.
@@ -179,6 +185,7 @@ class ThirdPartySummary extends Audit {
       url: str_(i18n.UIStrings.otherResourcesLabel),
       transferSize: stats.transferSize - subitemSummary.transferSize,
       blockingTime: stats.blockingTime - subitemSummary.blockingTime,
+      tbtImpact: stats.tbtImpact - subitemSummary.tbtImpact,
     };
     if (remainder.transferSize > minTransferSize) {
       items.push(remainder);
@@ -193,19 +200,21 @@ class ThirdPartySummary extends Audit {
    */
   static async audit(artifacts, context) {
     const settings = context.settings || {};
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
     const classifiedEntities = await EntityClassification.request(
       {URL: artifacts.URL, devtoolsLog}, context);
     const firstPartyEntity = classifiedEntities.firstParty;
-    const tasks = await MainThreadTasks.request(trace, context);
+
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+    const tbtImpactTasks = await TBTImpactTasks.request(metricComputationData, context);
+
     const multiplier = settings.throttlingMethod === 'simulate' ?
       settings.throttling.cpuSlowdownMultiplier : 1;
 
     const summaries = ThirdPartySummary.getSummaries(
-      networkRecords, tasks, multiplier, classifiedEntities);
-    const overallSummary = {wastedBytes: 0, wastedMs: 0};
+      networkRecords, tbtImpactTasks, multiplier, classifiedEntities);
+    const overallSummary = {wastedBytes: 0, wastedMs: 0, tbtImpact: 0};
 
     const results = Array.from(summaries.byEntity.entries())
       // Don't consider the page we're on to be third-party.
@@ -214,6 +223,7 @@ class ThirdPartySummary extends Audit {
       .map(([entity, stats]) => {
         overallSummary.wastedBytes += stats.transferSize;
         overallSummary.wastedMs += stats.blockingTime;
+        overallSummary.tbtImpact += stats.tbtImpact;
 
         return {
           ...stats,
@@ -240,6 +250,7 @@ class ThirdPartySummary extends Audit {
       return {
         score: 1,
         notApplicable: true,
+        metricSavings: {TBT: 0},
       };
     }
 
@@ -252,6 +263,9 @@ class ThirdPartySummary extends Audit {
         timeInMs: overallSummary.wastedMs,
       }),
       details,
+      metricSavings: {
+        TBT: overallSummary.tbtImpact,
+      },
     };
   }
 }

package/core/audits/unsized-images.js

@@ -34,6 +34,7 @@ class UnsizedImages extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
+      guidanceLevel: 3,
       requiredArtifacts: ['ImageElements'],
     };
   }

package/core/audits/user-timings.js

@@ -39,6 +39,7 @@ class UserTimings extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      guidanceLevel: 2,
       requiredArtifacts: ['traces'],
     };
   }

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

@@ -62,6 +62,7 @@ class UsesRelPreconnectAudit extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
+      guidanceLevel: 3,
       requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'LinkElements'],
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
     };

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

@@ -43,6 +43,7 @@ class UsesRelPreloadAudit extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
+      guidanceLevel: 3,
       requiredArtifacts: ['devtoolsLogs', 'traces', 'URL'],
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
     };

package/core/audits/viewport.js

@@ -34,6 +34,7 @@ class Viewport extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
+      guidanceLevel: 3,
       requiredArtifacts: ['MetaElements'],
     };
   }

package/core/audits/work-during-interaction.js

@@ -60,6 +60,7 @@ class WorkDuringInteraction extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
       supportedModes: ['timespan'],
+      guidanceLevel: 1,
       requiredArtifacts: ['traces', 'devtoolsLogs', 'TraceElements'],
     };
   }

package/core/computed/main-resource.d.ts

@@ -9,7 +9,7 @@ declare const MainResourceComputed: typeof MainResource & {
 };
 /**
  * @fileoverview This artifact identifies the main resource on the page. Current solution assumes
- * that the main resource is the first non-rediected one.
+ * that the main resource is the first non-redirected one.
  */
 declare class MainResource {
     /**

package/core/computed/main-resource.js

@@ -5,12 +5,12 @@
  */
 
 import {makeComputedArtifact} from './computed-artifact.js';
-import {NetworkAnalyzer} from '../lib/dependency-graph/simulator/network-analyzer.js';
 import {NetworkRecords} from './network-records.js';
+import {NetworkAnalyzer} from '../lib/dependency-graph/simulator/network-analyzer.js';
 
 /**
  * @fileoverview This artifact identifies the main resource on the page. Current solution assumes
- * that the main resource is the first non-rediected one.
+ * that the main resource is the first non-redirected one.
  */
 class MainResource {
   /**
@@ -21,8 +21,14 @@ class MainResource {
   static async compute_(data, context) {
     const {mainDocumentUrl} = data.URL;
     if (!mainDocumentUrl) throw new Error('mainDocumentUrl must exist to get the main resource');
-    const requests = await NetworkRecords.request(data.devtoolsLog, context);
-    const mainResource = NetworkAnalyzer.findResourceForUrl(requests, mainDocumentUrl);
+    const records = await NetworkRecords.request(data.devtoolsLog, context);
+
+    // We could have more than one record matching the main doucment url,
+    // if the page did `location.reload()`. Since `mainDocumentUrl` refers to the _last_
+    // document request, we should return the last candidate here. Besides, the browser
+    // would have evicted the first request by the time `MainDocumentRequest` (a consumer
+    // of this computed artifact) attempts to fetch the contents, resulting in a protocol error.
+    const mainResource = NetworkAnalyzer.findLastDocumentForUrl(records, mainDocumentUrl);
     if (!mainResource) {
       throw new Error('Unable to identify the main resource');
     }

package/core/computed/page-dependency-graph.js

@@ -412,7 +412,8 @@ class PageDependencyGraph {
     const rootNode = networkNodeOutput.idToNodeMap.get(rootRequest.requestId);
     if (!rootNode) throw new Error('rootNode not found');
 
-    const mainDocumentRequest = NetworkAnalyzer.findResourceForUrl(networkRecords, mainDocumentUrl);
+    const mainDocumentRequest =
+      NetworkAnalyzer.findLastDocumentForUrl(networkRecords, mainDocumentUrl);
     if (!mainDocumentRequest) throw new Error('mainDocumentRequest not found');
     const mainDocumentNode = networkNodeOutput.idToNodeMap.get(mainDocumentRequest.requestId);
     if (!mainDocumentNode) throw new Error('mainDocumentNode not found');