lighthouse 8.6.0 → 9.0.0

package/lighthouse-core/audits/byte-efficiency/offscreen-images.js

@@ -37,7 +37,7 @@ const IGNORE_THRESHOLD_IN_BYTES = 2048;
 const IGNORE_THRESHOLD_IN_PERCENT = 75;
 const IGNORE_THRESHOLD_IN_MS = 50;
 
-/** @typedef {{url: string, requestStartTime: number, totalBytes: number, wastedBytes: number, wastedPercent: number}} WasteResult */
+/** @typedef {{node: LH.Audit.Details.NodeValue, url: string, requestStartTime: number, totalBytes: number, wastedBytes: number, wastedPercent: number}} WasteResult */
 
 class OffscreenImages extends ByteEfficiencyAudit {
   /**
@@ -100,6 +100,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
     }
 
     return {
+      node: ByteEfficiencyAudit.makeNodeItem(image.node),
       url,
       requestStartTime: networkRecord.startTime,
       totalBytes,
@@ -184,26 +185,26 @@ class OffscreenImages extends ByteEfficiencyAudit {
 
     /** @type {string[]} */
     const warnings = [];
-    const resultsMap = images.reduce((results, image) => {
+    /** @type {Map<string, WasteResult>} */
+    const resultsMap = new Map();
+    for (const image of images) {
       const processed = OffscreenImages.computeWaste(image, viewportDimensions, networkRecords);
       if (processed === null) {
-        return results;
+        continue;
       }
 
       if (processed instanceof Error) {
         warnings.push(processed.message);
         Sentry.captureException(processed, {tags: {audit: this.meta.id}, level: 'warning'});
-        return results;
+        continue;
       }
 
       // If an image was used more than once, warn only about its least wasteful usage
-      const existing = results.get(processed.url);
+      const existing = resultsMap.get(processed.url);
       if (!existing || existing.wastedBytes > processed.wastedBytes) {
-        results.set(processed.url, processed);
+        resultsMap.set(processed.url, processed);
       }
-
-      return results;
-    }, /** @type {Map<string, WasteResult>} */ (new Map()));
+    }
 
     const settings = context.settings;
 
@@ -233,7 +234,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
-      {key: 'url', valueType: 'thumbnail', label: ''},
+      {key: 'node', valueType: 'node', label: ''},
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnResourceSize)},
       {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},

package/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js

@@ -76,10 +76,12 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
     const imageElementsByURL = new Map();
     imageElements.forEach(img => imageElementsByURL.set(img.src, img));
 
-    /** @type {Array<{url: string, fromProtocol: boolean, isCrossOrigin: boolean, totalBytes: number, wastedBytes: number}>} */
+    /** @type {Array<{node?: LH.Audit.Details.NodeValue, url: string, fromProtocol: boolean, isCrossOrigin: boolean, totalBytes: number, wastedBytes: number}>} */
     const items = [];
     const warnings = [];
     for (const image of images) {
+      const imageElement = imageElementsByURL.get(image.url);
+
       if (image.failed) {
         warnings.push(`Unable to decode ${URL.getURLDisplayName(image.url)}`);
         continue;
@@ -91,7 +93,6 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
       let fromProtocol = true;
 
       if (typeof jpegSize === 'undefined') {
-        const imageElement = imageElementsByURL.get(image.url);
         if (!imageElement) {
           warnings.push(`Unable to locate resource ${URL.getURLDisplayName(image.url)}`);
           continue;
@@ -115,6 +116,7 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
       const jpegSavings = UsesOptimizedImages.computeSavings({...image, jpegSize});
 
       items.push({
+        node: imageElement ? ByteEfficiencyAudit.makeNodeItem(imageElement.node) : undefined,
         url,
         fromProtocol,
         isCrossOrigin,
@@ -125,7 +127,7 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
-      {key: 'url', valueType: 'thumbnail', label: ''},
+      {key: 'node', valueType: 'node', label: ''},
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnResourceSize)},
       {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js

@@ -70,6 +70,7 @@ class UsesResponsiveImagesSnapshot extends Audit {
       if (actualPixels - usedPixels > IGNORE_THRESHOLD_IN_PIXELS) score = 0;
 
       items.push({
+        node: Audit.makeNodeItem(image.node),
         url: URL.elideDataURI(image.src),
         displayedDimensions: `${displayed.width}x${displayed.height}`,
         actualDimensions: `${actual.width}x${actual.height}`,
@@ -79,7 +80,7 @@ class UsesResponsiveImagesSnapshot extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       /* eslint-disable max-len */
-      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'node', itemType: 'node', text: ''},
       {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
       {key: 'displayedDimensions', itemType: 'text', text: str_(UIStrings.columnDisplayedDimensions)},
       {key: 'actualDimensions', itemType: 'text', text: str_(UIStrings.columnActualDimensions)},

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js

@@ -104,6 +104,7 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
     const wastedBytes = Math.round(totalBytes * wastedRatio);
 
     return {
+      node: ByteEfficiencyAudit.makeNodeItem(image.node),
       url,
       totalBytes,
       wastedBytes,
@@ -158,7 +159,7 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
-      {key: 'url', valueType: 'thumbnail', label: ''},
+      {key: 'node', valueType: 'node', label: ''},
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnResourceSize)},
       {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},

package/lighthouse-core/audits/deprecations.js

@@ -11,6 +11,8 @@
  * that contain deprecated API warnings sent by Chrome.
  */
 
+// TODO: when M97 is sufficiently old, drop support for console messages
+
 const Audit = require('./audit.js');
 const i18n = require('../lib/i18n/i18n.js');
 
@@ -45,7 +47,7 @@ class Deprecations extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['ConsoleMessages'],
+      requiredArtifacts: ['ConsoleMessages', 'InspectorIssues'],
     };
   }
 
@@ -56,16 +58,36 @@ class Deprecations extends Audit {
   static audit(artifacts) {
     const entries = artifacts.ConsoleMessages;
 
-    const deprecations = entries.filter(log => log.source === 'deprecation')
-    // TODO(M91): Temporary ignore until Chrome M91 became stable version.
-    // M91 doesn't throw deprecation on ::-webkit-details-marker.
-    .filter(log => !log.text.includes('::-webkit-details-marker'))
-    .map(log => {
-      return {
-        value: log.text,
-        source: Audit.makeSourceLocationFromConsoleMessage(log),
-      };
-    });
+    let deprecations;
+
+    if (artifacts.InspectorIssues.deprecations.length) {
+      deprecations = artifacts.InspectorIssues.deprecations
+        .map(deprecation => {
+          return {
+            value: deprecation.message || '',
+            /** @type {LH.Audit.Details.SourceLocationValue} */
+            source: {
+              type: 'source-location',
+              url: deprecation.sourceCodeLocation.url,
+              urlProvider: 'network',
+              line: deprecation.sourceCodeLocation.lineNumber,
+              // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed,
+              // but we use 0-indexed.
+              column: deprecation.sourceCodeLocation.columnNumber - 1,
+            },
+          };
+        });
+    } else {
+      // Backcompat for <M97.
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=1248484
+      deprecations = entries.filter(log => log.source === 'deprecation')
+        .map(log => {
+          return {
+            value: log.text,
+            source: Audit.makeSourceLocationFromConsoleMessage(log),
+          };
+        });
+    }
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [

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

@@ -61,8 +61,8 @@ class UsesHTTP2Audit extends Audit {
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['URL', 'devtoolsLogs', 'traces'],
+      supportedModes: ['timespan', 'navigation'],
+      requiredArtifacts: ['URL', 'devtoolsLogs', 'traces', 'GatherContext'],
     };
   }
 
@@ -202,24 +202,40 @@ class UsesHTTP2Audit extends Audit {
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const resources = UsesHTTP2Audit.determineNonHttp2Resources(networkRecords);
+
+    let displayValue;
+    if (resources.length > 0) {
+      displayValue = str_(UIStrings.displayValue, {itemCount: resources.length});
+    }
+
+    // TODO: Compute actual savings for timespan mode.
+    if (artifacts.GatherContext.gatherMode === 'timespan') {
+      /** @type {LH.Audit.Details.Table['headings']} */
+      const headings = [
+        {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+        {key: 'protocol', itemType: 'text', text: str_(UIStrings.columnProtocol)},
+      ];
+
+      const details = Audit.makeTableDetails(headings, resources);
+
+      return {
+        displayValue,
+        score: resources.length ? 0 : 1,
+        details,
+      };
+    }
+
     const settings = context && context.settings || {};
     const simulatorOptions = {
       devtoolsLog,
       settings,
     };
-
-    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
     const graph = await PageDependencyGraph.request({trace, devtoolsLog}, context);
     const simulator = await LoadSimulator.request(simulatorOptions, context);
-
-    const resources = UsesHTTP2Audit.determineNonHttp2Resources(networkRecords);
     const wastedMs = UsesHTTP2Audit.computeWasteWithTTIGraph(resources, graph, simulator);
 
-    let displayValue;
-    if (resources.length > 0) {
-      displayValue = str_(UIStrings.displayValue, {itemCount: resources.length});
-    }
-
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},

package/lighthouse-core/audits/errors-in-console.js

@@ -88,8 +88,6 @@ class ErrorLogs extends Audit {
         return {
           source: item.source,
           description: item.text,
-          // TODO: remove for v8 (url is covered in sourceLocation)
-          url: item.url,
           sourceLocation: Audit.makeSourceLocationFromConsoleMessage(item),
         };
       });

package/lighthouse-core/audits/image-aspect-ratio.js

@@ -51,7 +51,7 @@ class ImageAspectRatio extends Audit {
 
   /**
    * @param {WellDefinedImage} image
-   * @return {{url: string, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}}
+   * @return {{url: string, node: LH.Audit.Details.NodeValue, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}}
    */
   static computeAspectRatios(image) {
     const url = URL.elideDataURI(image.src);
@@ -63,6 +63,7 @@ class ImageAspectRatio extends Audit {
 
     return {
       url,
+      node: Audit.makeNodeItem(image.node),
       displayedAspectRatio: `${image.displayedWidth} x ${image.displayedHeight}
         (${displayedAspectRatio.toFixed(2)})`,
       actualAspectRatio: `${image.naturalDimensions.width} x ${image.naturalDimensions.height}
@@ -78,7 +79,7 @@ class ImageAspectRatio extends Audit {
   static audit(artifacts) {
     const images = artifacts.ImageElements;
 
-    /** @type {Array<{url: string, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}>} */
+    /** @type {Array<{url: string, node: LH.Audit.Details.NodeValue, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}>} */
     const results = [];
     images.filter(image => {
       // - filter out css background images since we don't have a reliable way to tell if it's a
@@ -88,8 +89,7 @@ class ImageAspectRatio extends Audit {
       // - filter all svgs as they have no natural dimensions to audit
       // - filter out images that have falsy naturalWidth or naturalHeight
       return !image.isCss &&
-        image.mimeType &&
-        image.mimeType !== 'image/svg+xml' &&
+        URL.guessMimeType(image.src) !== 'image/svg+xml' &&
         image.naturalDimensions &&
         image.naturalDimensions.height > 5 &&
         image.naturalDimensions.width > 5 &&
@@ -105,7 +105,7 @@ class ImageAspectRatio extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'node', itemType: 'node', text: ''},
       {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
       {key: 'displayedAspectRatio', itemType: 'text', text: str_(UIStrings.columnDisplayed)},
       {key: 'actualAspectRatio', itemType: 'text', text: str_(UIStrings.columnActual)},

package/lighthouse-core/audits/image-size-responsive.js

@@ -45,7 +45,7 @@ const LARGE_IMAGE_FACTOR = 0.75;
 // considered SMALL.
 const SMALL_IMAGE_THRESHOLD = 64;
 
-/** @typedef {{url: string, elidedUrl: string, displayedSize: string, actualSize: string, actualPixels: number, expectedSize: string, expectedPixels: number}} Result */
+/** @typedef {{url: string, node: LH.Audit.Details.NodeValue, displayedSize: string, actualSize: string, actualPixels: number, expectedSize: string, expectedPixels: number}} Result */
 
 /**
  * @param {{top: number, bottom: number, left: number, right: number}} imageRect
@@ -95,7 +95,7 @@ function isCandidate(image) {
   ) {
     return false;
   }
-  if (image.mimeType === 'image/svg+xml') {
+  if (URL.guessMimeType(image.src) === 'image/svg+xml') {
     return false;
   }
   if (image.isCss) {
@@ -146,8 +146,8 @@ function getResult(image, DPR) {
   const [expectedWidth, expectedHeight] =
       expectedImageSize(image.displayedWidth, image.displayedHeight, DPR);
   return {
-    url: image.src,
-    elidedUrl: URL.elideDataURI(image.src),
+    url: URL.elideDataURI(image.src),
+    node: Audit.makeNodeItem(image.node),
     displayedSize: `${image.displayedWidth} x ${image.displayedHeight}`,
     actualSize: `${image.naturalDimensions.width} x ${image.naturalDimensions.height}`,
     actualPixels: image.naturalDimensions.width * image.naturalDimensions.height,
@@ -263,8 +263,8 @@ class ImageSizeResponsive extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'thumbnail', text: ''},
-      {key: 'elidedUrl', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'node', itemType: 'node', text: ''},
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
       {key: 'displayedSize', itemType: 'text', text: str_(UIStrings.columnDisplayed)},
       {key: 'actualSize', itemType: 'text', text: str_(UIStrings.columnActual)},
       {key: 'expectedSize', itemType: 'text', text: str_(UIStrings.columnExpected)},

package/lighthouse-core/audits/installable-manifest.js

@@ -50,9 +50,9 @@ const UIStrings = {
    * 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
-  */
+   * @description Error message explaining that the manifest does not contain a suitable icon.
+   * @example {192} value0
+   */
   'manifest-missing-suitable-icon': `Manifest does not contain a suitable icon - PNG, SVG or WebP format of at least {value0}\xa0px is required, the sizes attribute must be set, and the purpose attribute, if set, must include "any".`,
 
   /**
@@ -93,6 +93,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.`,
 };
 /* eslint-enable max-len */
 

package/lighthouse-core/audits/preload-lcp-image.js

@@ -106,13 +106,14 @@ class PreloadLCPImageAudit extends Audit {
 
   /**
    * Computes the estimated effect of preloading the LCP image.
+   * @param {LH.Artifacts.TraceElement|undefined} lcpElement
    * @param {LH.Gatherer.Simulation.GraphNetworkNode|undefined} lcpNode
    * @param {LH.Gatherer.Simulation.GraphNode} graph
    * @param {LH.Gatherer.Simulation.Simulator} simulator
-   * @return {{wastedMs: number, results: Array<{url: string, wastedMs: number}>}}
+   * @return {{wastedMs: number, results: Array<{node: LH.Audit.Details.NodeValue, url: string, wastedMs: number}>}}
    */
-  static computeWasteWithGraph(lcpNode, graph, simulator) {
-    if (!lcpNode) {
+  static computeWasteWithGraph(lcpElement, lcpNode, graph, simulator) {
+    if (!lcpElement || !lcpNode) {
       return {
         wastedMs: 0,
         results: [],
@@ -185,6 +186,7 @@ class PreloadLCPImageAudit extends Audit {
     return {
       wastedMs,
       results: [{
+        node: Audit.makeNodeItem(lcpElement.node),
         url: lcpNode.record.url,
         wastedMs,
       }],
@@ -216,11 +218,11 @@ class PreloadLCPImageAudit extends Audit {
     const lcpNode = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpElement, artifacts.ImageElements);
 
     const {results, wastedMs} =
-      PreloadLCPImageAudit.computeWasteWithGraph(lcpNode, graph, simulator);
+      PreloadLCPImageAudit.computeWasteWithGraph(lcpElement, lcpNode, graph, simulator);
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
-      {key: 'url', valueType: 'thumbnail', label: ''},
+      {key: 'node', valueType: 'node', label: ''},
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
     ];

package/lighthouse-core/audits/script-treemap-data.js

@@ -8,7 +8,7 @@
 /**
  * @fileoverview
  * Creates nodes for treemap app.
- * Example output: lighthouse-treemap/app/debug.json
+ * Example output: treemap/app/debug.json
  */
 
 /**

package/lighthouse-core/audits/unsized-images.js

@@ -106,7 +106,7 @@ class UnsizedImages extends Audit {
    * @return {boolean}
    */
   static isNonNetworkSvg(image) {
-    const isSvg = image.mimeType === 'image/svg+xml';
+    const isSvg = URL.guessMimeType(image.src) === 'image/svg+xml';
     const urlScheme = image.src.slice(0, image.src.indexOf(':'));
     const isNonNetwork = URL.isNonNetworkProtocol(urlScheme);
     return isSvg && isNonNetwork;
@@ -147,9 +147,8 @@ class UnsizedImages extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'node', itemType: 'node', text: ''},
       {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'node', itemType: 'node', text: str_(i18n.UIStrings.columnFailingElem)},
     ];
 
     return {

package/lighthouse-core/computed/image-records.js

@@ -5,6 +5,7 @@
  */
 'use strict';
 
+const URL = require('../lib/url-shim.js');
 const makeComputedArtifact = require('./computed-artifact.js');
 
 class ImageRecords {
@@ -28,12 +29,12 @@ class ImageRecords {
 
   /**
    * @param {{ImageElements: LH.Artifacts['ImageElements'], networkRecords: LH.Artifacts.NetworkRequest[]}} data
-   * @return {Promise<LH.Artifacts.ImageElement[]>}
+   * @return {Promise<LH.Artifacts.ImageElementRecord[]>}
    */
   static async compute_(data) {
     const indexedNetworkRecords = ImageRecords.indexNetworkRecords(data.networkRecords);
 
-    /** @type {LH.Artifacts.ImageElement[]} */
+    /** @type {LH.Artifacts.ImageElementRecord[]} */
     const imageRecords = [];
 
     for (const element of data.ImageElements) {
@@ -43,7 +44,7 @@ class ImageRecords {
       // Don't change the guessed mime type if no mime type was found.
       imageRecords.push({
         ...element,
-        mimeType: mimeType ? mimeType : element.mimeType,
+        mimeType: mimeType ? mimeType : URL.guessMimeType(element.src),
       });
     }
 

package/lighthouse-core/computed/metrics/lantern-total-blocking-time.js

@@ -10,6 +10,7 @@ const LanternMetric = require('./lantern-metric.js');
 const BaseNode = require('../../lib/dependency-graph/base-node.js');
 const LanternFirstContentfulPaint = require('./lantern-first-contentful-paint.js');
 const LanternInteractive = require('./lantern-interactive.js');
+const {BLOCKING_TIME_THRESHOLD, calculateSumOfBlockingTime} = require('./tbt-utils.js');
 
 /** @typedef {BaseNode.Node} Node */
 
@@ -66,9 +67,7 @@ class LanternTotalBlockingTime extends LanternMetric {
       ? extras.interactiveResult.optimisticEstimate.timeInMs
       : extras.interactiveResult.pessimisticEstimate.timeInMs;
 
-    // Require here to resolve circular dependency.
-    const TotalBlockingTime = require('./total-blocking-time.js');
-    const minDurationMs = TotalBlockingTime.BLOCKING_TIME_THRESHOLD;
+    const minDurationMs = BLOCKING_TIME_THRESHOLD;
 
     const events = LanternTotalBlockingTime.getTopLevelEvents(
       simulation.nodeTimings,
@@ -76,7 +75,7 @@ class LanternTotalBlockingTime extends LanternMetric {
     );
 
     return {
-      timeInMs: TotalBlockingTime.calculateSumOfBlockingTime(
+      timeInMs: calculateSumOfBlockingTime(
         events,
         fcpTimeInMs,
         interactiveTimeMs

package/lighthouse-core/computed/metrics/tbt-utils.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright 2021 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.
+ */
+'use strict';
+
+const BLOCKING_TIME_THRESHOLD = 50;
+
+/**
+ * @param {Array<{start: number, end: number, duration: number}>} topLevelEvents
+ * @param {number} startTimeMs
+ * @param {number} endTimeMs
+ * @return {number}
+ */
+function calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
+  if (endTimeMs <= startTimeMs) return 0;
+
+  const threshold = BLOCKING_TIME_THRESHOLD;
+  let sumBlockingTime = 0;
+  for (const event of topLevelEvents) {
+    // Early exit for small tasks, which should far outnumber long tasks.
+    if (event.duration < threshold) continue;
+
+    // We only want to consider tasks that fall in our time range (FCP and TTI for navigations).
+    // FCP is picked as the lower bound because there is little risk of user input happening
+    // before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
+    // optimizing to reach FCP as fast as possible without having to worry about task lengths.
+    if (event.end < startTimeMs) continue;
+
+    // TTI is picked as the upper bound because we want a well defined end point for page load.
+    if (event.start > endTimeMs) continue;
+
+    // We first perform the clipping, and then calculate Blocking Region. So if we have a 150ms
+    // task [0, 150] and FCP happens midway at 50ms, we first clip the task to [50, 150], and then
+    // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before FCP
+    // are unimportant, so we care whether the main thread is busy more than 50ms at a time only
+    // after FCP.
+    const clippedStart = Math.max(event.start, startTimeMs);
+    const clippedEnd = Math.min(event.end, endTimeMs);
+    const clippedDuration = clippedEnd - clippedStart;
+    if (clippedDuration < threshold) continue;
+
+    // The duration of the task beyond 50ms at the beginning is considered the Blocking Region.
+    // Example:
+    //   [              250ms Task                   ]
+    //   | First 50ms |   Blocking Region (200ms)    |
+    sumBlockingTime += clippedDuration - threshold;
+  }
+
+  return sumBlockingTime;
+}
+
+module.exports = {
+  BLOCKING_TIME_THRESHOLD,
+  calculateSumOfBlockingTime,
+};

package/lighthouse-core/computed/metrics/total-blocking-time.js

@@ -10,6 +10,7 @@ const ComputedMetric = require('./metric.js');
 const TraceProcessor = require('../../lib/tracehouse/trace-processor.js');
 const LanternTotalBlockingTime = require('./lantern-total-blocking-time.js');
 const TimetoInteractive = require('./interactive.js');
+const {calculateSumOfBlockingTime} = require('./tbt-utils.js');
 
 /**
  * @fileoverview This audit determines Total Blocking Time.
@@ -25,57 +26,6 @@ const TimetoInteractive = require('./interactive.js');
  * to smaller improvements to main thread responsiveness.
  */
 class TotalBlockingTime extends ComputedMetric {
-  /**
-   * @return {number}
-   */
-  static get BLOCKING_TIME_THRESHOLD() {
-    return 50;
-  }
-
-  /**
-   * @param {Array<{start: number, end: number, duration: number}>} topLevelEvents
-   * @param {number} startTimeMs
-   * @param {number} endTimeMs
-   * @return {number}
-   */
-  static calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
-    if (endTimeMs <= startTimeMs) return 0;
-
-    const threshold = TotalBlockingTime.BLOCKING_TIME_THRESHOLD;
-    let sumBlockingTime = 0;
-    for (const event of topLevelEvents) {
-      // Early exit for small tasks, which should far outnumber long tasks.
-      if (event.duration < threshold) continue;
-
-      // We only want to consider tasks that fall in our time range (FCP and TTI for navigations).
-      // FCP is picked as the lower bound because there is little risk of user input happening
-      // before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
-      // optimizing to reach FCP as fast as possible without having to worry about task lengths.
-      if (event.end < startTimeMs) continue;
-
-      // TTI is picked as the upper bound because we want a well defined end point for page load.
-      if (event.start > endTimeMs) continue;
-
-      // We first perform the clipping, and then calculate Blocking Region. So if we have a 150ms
-      // task [0, 150] and FCP happens midway at 50ms, we first clip the task to [50, 150], and then
-      // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before FCP
-      // are unimportant, so we care whether the main thread is busy more than 50ms at a time only
-      // after FCP.
-      const clippedStart = Math.max(event.start, startTimeMs);
-      const clippedEnd = Math.min(event.end, endTimeMs);
-      const clippedDuration = clippedEnd - clippedStart;
-      if (clippedDuration < threshold) continue;
-
-      // The duration of the task beyond 50ms at the beginning is considered the Blocking Region.
-      // Example:
-      //   [              250ms Task                   ]
-      //   | First 50ms |   Blocking Region (200ms)    |
-      sumBlockingTime += clippedDuration - threshold;
-    }
-
-    return sumBlockingTime;
-  }
-
   /**
    * @param {LH.Artifacts.MetricComputationData} data
    * @param {LH.Artifacts.ComputedContext} context
@@ -100,7 +50,7 @@ class TotalBlockingTime extends ComputedMetric {
       const interactiveTimeMs = (await TimetoInteractive.request(metricData, context)).timing;
 
       return {
-        timing: TotalBlockingTime.calculateSumOfBlockingTime(
+        timing: calculateSumOfBlockingTime(
           events,
           firstContentfulPaint,
           interactiveTimeMs
@@ -108,7 +58,7 @@ class TotalBlockingTime extends ComputedMetric {
       };
     } else {
       return {
-        timing: TotalBlockingTime.calculateSumOfBlockingTime(
+        timing: calculateSumOfBlockingTime(
           events,
           0,
           data.processedTrace.timestamps.traceEnd