lighthouse 11.1.0-dev.20231002 → 11.1.0-dev.20231004

package/cli/test/smokehouse/__snapshots__/report-assert-test.js.snap

@@ -20,6 +20,10 @@ exports[`getAssertionReport works (multiple failing) 1`] = `
         \\"numericValue\\": 0.13570762803819444,
         \\"numericUnit\\": \\"unitless\\",
         \\"displayValue\\": \\"0.136\\",
+        \\"scoringOptions\\": {
+          \\"p10\\": 0.1,
+          \\"median\\": 0.25
+        },
         \\"details\\": {
           \\"type\\": \\"debugdata\\",
           \\"items\\": [
@@ -46,6 +50,10 @@ exports[`getAssertionReport works (trivial failing) 1`] = `
         \\"numericValue\\": 0.13570762803819444,
         \\"numericUnit\\": \\"unitless\\",
         \\"displayValue\\": \\"0.136\\",
+        \\"scoringOptions\\": {
+          \\"p10\\": 0.1,
+          \\"median\\": 0.25
+        },
         \\"details\\": {
           \\"type\\": \\"debugdata\\",
           \\"items\\": [

package/core/audits/audit.js

@@ -6,7 +6,6 @@
 
 import * as LH from '../../types/lh.js';
 import {isUnderTest} from '../lib/lh-env.js';
-import * as statistics from '../lib/statistics.js';
 import {Util} from '../../shared/util.js';
 
 const DEFAULT_PASS = 'defaultPass';
@@ -50,6 +49,7 @@ class Audit {
   static get SCORING_MODES() {
     return {
       NUMERIC: 'numeric',
+      METRIC_SAVINGS: 'metricSavings',
       BINARY: 'binary',
       MANUAL: 'manual',
       INFORMATIVE: 'informative',
@@ -105,14 +105,7 @@ class Audit {
    * @return {number}
    */
   static computeLogNormalScore(controlPoints, value) {
-    let percentile = statistics.getLogNormalScore(controlPoints, value);
-    // Add a boost to scores of 90+, linearly ramping from 0 at 0.9 to half a
-    // point (0.005) at 1. Expands scores in (0.9, 1] to (0.9, 1.005], so more top
-    // scores will be a perfect 1 after the two-digit `Math.floor()` rounding below.
-    if (percentile > 0.9) { // getLogNormalScore ensures `percentile` can't exceed 1.
-      percentile += 0.05 * (percentile - 0.9);
-    }
-    return Math.floor(percentile * 100) / 100;
+    return Util.computeLogNormalScore(controlPoints, value);
   }
 
   /**
@@ -329,7 +322,8 @@ class Audit {
    */
   static _normalizeAuditScore(score, scoreDisplayMode, auditId) {
     if (scoreDisplayMode !== Audit.SCORING_MODES.BINARY &&
-        scoreDisplayMode !== Audit.SCORING_MODES.NUMERIC) {
+        scoreDisplayMode !== Audit.SCORING_MODES.NUMERIC &&
+        scoreDisplayMode !== Audit.SCORING_MODES.METRIC_SAVINGS) {
       return null;
     }
 
@@ -371,6 +365,7 @@ class Audit {
 
     // Default to binary scoring.
     let scoreDisplayMode = audit.meta.scoreDisplayMode || Audit.SCORING_MODES.BINARY;
+    let score = product.score;
 
     // But override if product contents require it.
     if (product.errorMessage !== undefined) {
@@ -379,9 +374,21 @@ class Audit {
     } else if (product.notApplicable) {
       // Audit was determined to not apply to the page.
       scoreDisplayMode = Audit.SCORING_MODES.NOT_APPLICABLE;
+    } else if (product.scoreDisplayMode) {
+      scoreDisplayMode = product.scoreDisplayMode;
+    }
+
+    if (scoreDisplayMode === Audit.SCORING_MODES.METRIC_SAVINGS) {
+      if (score && score >= Util.PASS_THRESHOLD) {
+        score = 1;
+      } else if (Object.values(product.metricSavings || {}).some(v => v)) {
+        score = 0;
+      } else {
+        score = 0.5;
+      }
     }
 
-    const score = Audit._normalizeAuditScore(product.score, scoreDisplayMode, audit.meta.id);
+    score = Audit._normalizeAuditScore(score, scoreDisplayMode, audit.meta.id);
 
     let auditTitle = audit.meta.title;
     if (audit.meta.failureTitle) {
@@ -411,8 +418,11 @@ class Audit {
       errorMessage: product.errorMessage,
       errorStack: product.errorStack,
       warnings: product.warnings,
+      scoringOptions: product.scoringOptions,
+      metricSavings: product.metricSavings,
 
       details: product.details,
+      guidanceLevel: audit.meta.guidanceLevel,
     };
   }
 

package/core/audits/bf-cache.js

@@ -61,6 +61,7 @@ class BFCache extends Audit {
       supportedModes: ['navigation', 'timespan'],
       guidanceLevel: 2,
       requiredArtifacts: ['BFCacheFailures'],
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
     };
   }
 

package/core/audits/bootup-time.js

@@ -14,6 +14,7 @@ import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {getExecutionTimingsByURL} from '../lib/tracehouse/task-summary.js';
 import {TBTImpactTasks} from '../computed/tbt-impact-tasks.js';
 import {Sentry} from '../lib/sentry.js';
+import {Util} from '../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -47,7 +48,7 @@ class BootupTime extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
       requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
     };
@@ -169,6 +170,8 @@ class BootupTime extends Audit {
 
     return {
       score,
+      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
+      notApplicable: !results.length,
       numericValue: totalBootupTime,
       numericUnit: 'millisecond',
       displayValue: totalBootupTime > 0 ?

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

@@ -309,7 +309,7 @@ class ByteEfficiencyAudit extends Audit {
       displayValue,
       numericValue: wastedMs,
       numericUnit: 'millisecond',
-      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
+      score: results.length ? 0 : 1,
       details,
       metricSavings,
     };

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

@@ -46,7 +46,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
       id: 'duplicated-javascript',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 2,
       requiredArtifacts: ['devtoolsLogs', 'traces', 'SourceMaps', 'Scripts',
         'GatherContext', 'URL'],

package/core/audits/byte-efficiency/efficient-animated-content.js

@@ -36,7 +36,7 @@ class EfficientAnimatedContent extends ByteEfficiencyAudit {
       id: 'efficient-animated-content',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['devtoolsLogs', 'traces', 'GatherContext', 'URL'],
     };

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

@@ -115,7 +115,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
   static get meta() {
     return {
       id: 'legacy-javascript',
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       description: str_(UIStrings.description),
       title: str_(UIStrings.title),
       guidanceLevel: 2,

package/core/audits/byte-efficiency/modern-image-formats.js

@@ -34,7 +34,7 @@ class ModernImageFormats extends ByteEfficiencyAudit {
       id: 'modern-image-formats',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['OptimizedImages', 'devtoolsLogs', 'traces', 'URL', 'GatherContext',
         'ImageElements'],

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

@@ -48,7 +48,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
       id: 'offscreen-images',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       supportedModes: ['navigation'],
       guidanceLevel: 2,
       requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext', 'devtoolsLogs',

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

@@ -12,7 +12,6 @@
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {BaseNode} from '../../lib/dependency-graph/base-node.js';
-import {ByteEfficiencyAudit} from './byte-efficiency-audit.js';
 import {UnusedCSS} from '../../computed/unused-css.js';
 import {NetworkRequest} from '../../lib/network-request.js';
 import {ProcessedNavigation} from '../../computed/processed-navigation.js';
@@ -113,7 +112,7 @@ class RenderBlockingResources extends Audit {
       id: 'render-blocking-resources',
       title: str_(UIStrings.title),
       supportedModes: ['navigation'],
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       description: str_(UIStrings.description),
       guidanceLevel: 2,
       // TODO: look into adding an `optionalArtifacts` property that captures the non-required nature
@@ -296,7 +295,7 @@ class RenderBlockingResources extends Audit {
 
     return {
       displayValue,
-      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
+      score: results.length ? 0 : 1,
       numericValue: wastedMs,
       numericUnit: 'millisecond',
       details,

package/core/audits/byte-efficiency/total-byte-weight.js

@@ -8,6 +8,7 @@ import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {NetworkRequest} from '../../lib/network-request.js';
 import {NetworkRecords} from '../../computed/network-records.js';
+import {Util} from '../../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -34,7 +35,7 @@ class TotalByteWeight extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
       requiredArtifacts: ['devtoolsLogs'],
     };
@@ -98,6 +99,7 @@ class TotalByteWeight extends Audit {
 
     return {
       score,
+      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       numericValue: totalBytes,
       numericUnit: 'byte',
       displayValue: str_(UIStrings.displayValue, {totalBytes}),

package/core/audits/byte-efficiency/unminified-css.js

@@ -34,7 +34,7 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
       id: 'unminified-css',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['CSSUsage', 'devtoolsLogs', 'traces', 'URL', 'GatherContext'],
     };

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

@@ -42,7 +42,7 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit {
       id: 'unminified-javascript',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['Scripts', 'devtoolsLogs', 'traces', 'GatherContext', 'URL'],
     };

package/core/audits/byte-efficiency/unused-css-rules.js

@@ -32,7 +32,7 @@ class UnusedCSSRules extends ByteEfficiencyAudit {
       id: 'unused-css-rules',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 2,
       requiredArtifacts: ['CSSUsage', 'URL', 'devtoolsLogs', 'traces', 'GatherContext'],
     };

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

@@ -66,7 +66,7 @@ class UnusedJavaScript extends ByteEfficiencyAudit {
       id: 'unused-javascript',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 2,
       requiredArtifacts: ['JsUsage', 'Scripts', 'SourceMaps', 'GatherContext',
         'devtoolsLogs', 'traces', 'URL'],

package/core/audits/byte-efficiency/uses-long-cache-ttl.js

@@ -9,7 +9,7 @@ import parseCacheControl from 'parse-cache-control';
 import {Audit} from '../audit.js';
 import {NetworkRequest} from '../../lib/network-request.js';
 import UrlUtils from '../../lib/url-utils.js';
-import {linearInterpolation} from '../../lib/statistics.js';
+import {linearInterpolation} from '../../../shared/statistics.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {NetworkRecords} from '../../computed/network-records.js';
 
@@ -44,7 +44,7 @@ class CacheHeaders extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['devtoolsLogs'],
     };
@@ -266,11 +266,6 @@ class CacheHeaders extends Audit {
         a.url.localeCompare(b.url);
     });
 
-    const score = Audit.computeLogNormalScore(
-      {p10: context.options.p10, median: context.options.median},
-      totalWastedBytes
-    );
-
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
@@ -285,7 +280,7 @@ class CacheHeaders extends Audit {
       {wastedBytes: totalWastedBytes, sortedBy: ['totalBytes'], skipSumming: ['cacheLifetimeMs']});
 
     return {
-      score,
+      score: results.length ? 0 : 1,
       numericValue: totalWastedBytes,
       numericUnit: 'byte',
       displayValue: str_(UIStrings.displayValue, {itemCount: results.length}),

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

@@ -34,7 +34,7 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
       id: 'uses-optimized-images',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 2,
       requiredArtifacts: ['OptimizedImages', 'ImageElements', 'GatherContext', 'devtoolsLogs',
         'traces', 'URL'],

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

@@ -42,6 +42,7 @@ class UsesResponsiveImagesSnapshot extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: UsesResponsiveImages.str_(UsesResponsiveImages.UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       supportedModes: ['snapshot'],
       guidanceLevel: 2,
       requiredArtifacts: ['ImageElements', 'ViewportDimensions'],

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

@@ -45,7 +45,7 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
       id: 'uses-responsive-images',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 2,
       requiredArtifacts: ['ImageElements', 'ViewportDimensions', 'GatherContext',
         'devtoolsLogs', 'traces', 'URL'],

package/core/audits/byte-efficiency/uses-text-compression.js

@@ -36,7 +36,7 @@ class ResponsesAreCompressed extends ByteEfficiencyAudit {
       id: 'uses-text-compression',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['ResponseCompression', 'GatherContext', 'devtoolsLogs', 'traces', 'URL'],
     };

package/core/audits/csp-xss.js

@@ -21,7 +21,7 @@ const UIStrings = {
   /** Summary text for the results of a Lighthouse audit that evaluates the security of a page's CSP. This is displayed if no CSP is being enforced. "CSP" stands for "Content Security Policy". "CSP" does not need to be translated. */
   noCsp: 'No CSP found in enforcement mode',
   /** Message shown when one or more CSPs are defined in a <meta> tag. Shown in a table with a list of other CSP bypasses and warnings. "CSP" stands for "Content Security Policy". "CSP" and "HTTP" do not need to be translated. */
-  metaTagMessage: 'The page contains a CSP defined in a <meta> tag. ' +
+  metaTagMessage: 'The page contains a CSP defined in a `<meta>` tag. ' +
     'Consider moving the CSP to an HTTP header or ' +
     'defining another strict CSP in an HTTP header.',
   /** Label for a column in a data table; entries will be a directive of a CSP. "CSP" stands for "Content Security Policy". */

package/core/audits/dobetterweb/dom-size.js

@@ -14,6 +14,7 @@
 import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 import {TBTImpactTasks} from '../../computed/tbt-impact-tasks.js';
+import {Util} from '../../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the size of the web page's DOM. The size of a DOM is characterized by the total number of DOM elements and greatest DOM depth. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -53,7 +54,7 @@ class DOMSize extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
       requiredArtifacts: ['DOMStats', 'URL', 'GatherContext'],
       __internalOptionalArtifacts: ['traces', 'devtoolsLogs'],
@@ -167,6 +168,7 @@ class DOMSize extends Audit {
 
     return {
       score,
+      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       numericValue: stats.totalBodyElements,
       numericUnit: 'element',
       displayValue: str_(UIStrings.displayValue, {itemCount: stats.totalBodyElements}),

package/core/audits/dobetterweb/no-document-write.js

@@ -55,6 +55,7 @@ class NoDocWriteAudit extends ViolationAudit {
       description: str_(UIStrings.description),
       guidanceLevel: 2,
       requiredArtifacts: ['ConsoleMessages', 'SourceMaps', 'Scripts'],
+      scoreDisplayMode: ViolationAudit.SCORING_MODES.METRIC_SAVINGS,
     };
   }
 

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

@@ -15,7 +15,6 @@
 import {Audit} from '../audit.js';
 import {EntityClassification} from '../../computed/entity-classification.js';
 import UrlUtils from '../../lib/url-utils.js';
-import {ByteEfficiencyAudit} from '../byte-efficiency/byte-efficiency-audit.js';
 import {LanternInteractive} from '../../computed/metrics/lantern-interactive.js';
 import {NetworkRequest} from '../../lib/network-request.js';
 import {NetworkRecords} from '../../computed/network-records.js';
@@ -61,7 +60,7 @@ class UsesHTTP2Audit extends Audit {
       id: 'uses-http2',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       supportedModes: ['timespan', 'navigation'],
       requiredArtifacts: ['URL', 'devtoolsLogs', 'traces', 'GatherContext'],
@@ -300,7 +299,7 @@ class UsesHTTP2Audit extends Audit {
       displayValue,
       numericValue: wastedMsTti,
       numericUnit: 'millisecond',
-      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMsTti),
+      score: resources.length ? 0 : 1,
       details,
       metricSavings: {LCP: wasteLcp.savings, FCP: wasteFcp.savings},
     };

package/core/audits/dobetterweb/uses-passive-event-listeners.js

@@ -38,6 +38,7 @@ class PassiveEventsAudit extends ViolationAudit {
       description: str_(UIStrings.description),
       guidanceLevel: 3,
       requiredArtifacts: ['ConsoleMessages', 'SourceMaps', 'Scripts'],
+      scoreDisplayMode: ViolationAudit.SCORING_MODES.METRIC_SAVINGS,
     };
   }
 

package/core/audits/font-display.js

@@ -51,6 +51,7 @@ class FontDisplay extends Audit {
       supportedModes: ['navigation'],
       guidanceLevel: 3,
       requiredArtifacts: ['devtoolsLogs', 'CSSUsage', 'URL'],
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
     };
   }
 

package/core/audits/installable-manifest.js

@@ -39,9 +39,9 @@ const UIStrings = {
   /** Error message explaining that the provided manifest URL is invalid. */
   'start-url-not-valid': `Manifest start URL is not valid`,
   /** Error message explaining that the provided manifest does not contain a name or short_name field. */
-  'manifest-missing-name-or-short-name': `Manifest does not contain a 'name' or 'short_name' field`,
+  'manifest-missing-name-or-short-name': 'Manifest does not contain a `name` or `short_name` field',
   /** Error message explaining that the manifest display property must be one of 'standalone', 'fullscreen', or 'minimal-ui'. */
-  'manifest-display-not-supported': `Manifest 'display' property must be one of 'standalone', 'fullscreen', or 'minimal-ui'`,
+  '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`,
   /**

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

@@ -46,7 +46,7 @@ class LargestContentfulPaintElement extends Audit {
       id: 'largest-contentful-paint-element',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
       supportedModes: ['navigation'],
       requiredArtifacts:
@@ -162,7 +162,8 @@ class LargestContentfulPaintElement extends Audit {
     const lcpSavings = Math.max(0, metricLcp - idealLcp);
 
     return {
-      score: 1,
+      score: lcpSavings ? 0 : 1,
+      scoreDisplayMode: lcpSavings ? undefined : Audit.SCORING_MODES.INFORMATIVE,
       displayValue,
       details,
       metricSavings: {

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

@@ -5,7 +5,8 @@
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
-import {CumulativeLayoutShift} from '../computed/metrics/cumulative-layout-shift.js';
+import {CumulativeLayoutShift as CumulativeLayoutShiftComputed} from '../computed/metrics/cumulative-layout-shift.js';
+import CumulativeLayoutShift from './metrics/cumulative-layout-shift.js';
 
 const UIStrings = {
   /** Descriptive title of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. */
@@ -27,7 +28,7 @@ class LayoutShiftElements extends Audit {
       id: 'layout-shift-elements',
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 2,
       requiredArtifacts: ['traces', 'TraceElements'],
     };
@@ -64,10 +65,13 @@ class LayoutShiftElements extends Audit {
     }
 
     const {cumulativeLayoutShift: clsSavings} =
-      await CumulativeLayoutShift.request(artifacts.traces[Audit.DEFAULT_PASS], context);
+      await CumulativeLayoutShiftComputed.request(artifacts.traces[Audit.DEFAULT_PASS], context);
+
+    const passed = clsSavings <= CumulativeLayoutShift.defaultOptions.p10;
 
     return {
-      score: 1,
+      score: passed ? 1 : 0,
+      scoreDisplayMode: passed ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       metricSavings: {
         CLS: clsSavings,
       },

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

@@ -33,6 +33,7 @@ class LargestContentfulPaintLazyLoaded extends Audit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 3,
       requiredArtifacts: ['TraceElements', 'ViewportDimensions', 'ImageElements',
         'traces', 'devtoolsLogs', 'GatherContext', 'URL'],

package/core/audits/long-tasks.js

@@ -11,6 +11,7 @@ import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {PageDependencyGraph} from '../computed/page-dependency-graph.js';
 import {LoadSimulator} from '../computed/load-simulator.js';
 import {getJavaScriptURLs, getAttributableURLForTask} from '../lib/tracehouse/task-summary.js';
+import {TotalBlockingTime} from '../computed/metrics/total-blocking-time.js';
 
 /** We don't always have timing data for short tasks, if we're missing timing data. Treat it as though it were 0ms. */
 const DEFAULT_TIMING = {startTime: 0, endTime: 0, duration: 0};
@@ -66,8 +67,8 @@ class LongTasks extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: str_(UIStrings.title),
       description: str_(UIStrings.description),
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
       guidanceLevel: 1,
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
     };
   }
 
@@ -180,6 +181,9 @@ class LongTasks extends Audit {
     const devtoolsLog = artifacts.devtoolsLogs[LongTasks.DEFAULT_PASS];
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
 
+    const metricComputationData = Audit.makeMetricComputationDataInput(artifacts, context);
+    const tbtResult = await TotalBlockingTime.request(metricComputationData, context);
+
     /** @type {Map<LH.TraceEvent, LH.Gatherer.Simulation.NodeTiming>|undefined} */
     let taskTimingsByEvent;
 
@@ -245,6 +249,9 @@ class LongTasks extends Audit {
       notApplicable: results.length === 0,
       details: tableDetails,
       displayValue,
+      metricSavings: {
+        TBT: tbtResult.timing,
+      },
     };
   }
 }

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

@@ -16,6 +16,7 @@ import * as i18n from '../lib/i18n/i18n.js';
 import {MainThreadTasks} from '../computed/main-thread-tasks.js';
 import {TotalBlockingTime} from '../computed/metrics/total-blocking-time.js';
 import {Sentry} from '../lib/sentry.js';
+import {Util} from '../../shared/util.js';
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on the main thread work the browser did to load the page. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -44,7 +45,7 @@ class MainThreadWorkBreakdown extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      scoreDisplayMode: Audit.SCORING_MODES.METRIC_SAVINGS,
       guidanceLevel: 1,
       requiredArtifacts: ['traces', 'devtoolsLogs', 'URL', 'GatherContext'],
     };
@@ -141,6 +142,7 @@ class MainThreadWorkBreakdown extends Audit {
 
     return {
       score,
+      scoreDisplayMode: score >= Util.PASS_THRESHOLD ? Audit.SCORING_MODES.INFORMATIVE : undefined,
       numericValue: totalExecutionTime,
       numericUnit: 'millisecond',
       displayValue: str_(i18n.UIStrings.seconds, {timeInMs: totalExecutionTime}),

package/core/audits/metrics/cumulative-layout-shift.js

@@ -62,11 +62,14 @@ class CumulativeLayoutShift extends Audit {
       items: [rest],
     };
 
+    const scoringOptions = {p10: context.options.p10, median: context.options.median};
+
     return {
       score: Audit.computeLogNormalScore(
-        {p10: context.options.p10, median: context.options.median},
+        scoringOptions,
         cumulativeLayoutShift
       ),
+      scoringOptions,
       numericValue: cumulativeLayoutShift,
       numericUnit: 'unitless',
       displayValue: cumulativeLayoutShift.toLocaleString(context.settings.locale),

package/core/audits/metrics/first-contentful-paint.js

@@ -74,6 +74,7 @@ class FirstContentfulPaint extends Audit {
         options.scoring,
         metricResult.timing
       ),
+      scoringOptions: options.scoring,
       numericValue: metricResult.timing,
       numericUnit: 'millisecond',
       displayValue: str_(i18n.UIStrings.seconds, {timeInMs: metricResult.timing}),

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

@@ -83,6 +83,7 @@ class LargestContentfulPaint extends Audit {
         options.scoring,
         metricResult.timing
       ),
+      scoringOptions: options.scoring,
       numericValue: metricResult.timing,
       numericUnit: 'millisecond',
       displayValue: str_(i18n.UIStrings.seconds, {timeInMs: metricResult.timing}),