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

package/report/renderer/performance-category-renderer.js

@@ -9,6 +9,7 @@
 import {CategoryRenderer} from './category-renderer.js';
 import {ReportUtils} from './report-utils.js';
 import {Globals} from './report-globals.js';
+import {Util} from '../../shared/util.js';
 import {createGauge, updateGauge} from './explodey-gauge.js';
 
 export class PerformanceCategoryRenderer extends CategoryRenderer {
@@ -44,61 +45,6 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     return element;
   }
 
-  /**
-   * @param {LH.ReportResult.AuditRef} audit
-   * @param {number} scale
-   * @return {!Element}
-   */
-  _renderOpportunity(audit, scale) {
-    const oppTmpl = this.dom.createComponent('opportunity');
-    const element = this.populateAuditValues(audit, oppTmpl);
-    element.id = audit.result.id;
-
-    if (!audit.result.details || audit.result.scoreDisplayMode === 'error') {
-      return element;
-    }
-    const details = audit.result.details;
-    if (details.overallSavingsMs === undefined) {
-      return element;
-    }
-
-    // Overwrite the displayValue with opportunity's wastedMs
-    // TODO: normalize this to one tagName.
-    const displayEl =
-      this.dom.find('span.lh-audit__display-text, div.lh-audit__display-text', element);
-    const sparklineWidthPct = `${details.overallSavingsMs / scale * 100}%`;
-    this.dom.find('div.lh-sparkline__bar', element).style.width = sparklineWidthPct;
-    displayEl.textContent = Globals.i18n.formatSeconds(details.overallSavingsMs, 0.01);
-
-    // Set [title] tooltips
-    if (audit.result.displayValue) {
-      const displayValue = audit.result.displayValue;
-      this.dom.find('div.lh-load-opportunity__sparkline', element).title = displayValue;
-      displayEl.title = displayValue;
-    }
-
-    return element;
-  }
-
-  /**
-   * Get an audit's wastedMs to sort the opportunity by, and scale the sparkline width
-   * Opportunities with an error won't have a details object, so MIN_VALUE is returned to keep any
-   * erroring opportunities last in sort order.
-   * @param {LH.ReportResult.AuditRef} audit
-   * @return {number}
-   */
-  _getWastedMs(audit) {
-    if (audit.result.details) {
-      const details = audit.result.details;
-      if (typeof details.overallSavingsMs !== 'number') {
-        throw new Error('non-opportunity details passed to _getWastedMs');
-      }
-      return details.overallSavingsMs;
-    } else {
-      return Number.MIN_VALUE;
-    }
-  }
-
   /**
    * Get a link to the interactive scoring calculator with the metric values.
    * @param {LH.ReportResult.AuditRef[]} auditRefs
@@ -147,18 +93,55 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
   }
 
   /**
-   * For performance, audits with no group should be a diagnostic or opportunity.
-   * The audit details type will determine which of the two groups an audit is in.
+   * Returns true if the audit is a general performance insight (i.e. not a metric or hidden audit).
    *
    * @param {LH.ReportResult.AuditRef} audit
-   * @return {'load-opportunity'|'diagnostic'|null}
+   * @return {boolean}
    */
-  _classifyPerformanceAudit(audit) {
-    if (audit.group) return null;
-    if (audit.result.details?.overallSavingsMs !== undefined) {
-      return 'load-opportunity';
+  _isPerformanceInsight(audit) {
+    return !audit.group;
+  }
+
+  /**
+   * Returns overallImpact and linearImpact for an audit.
+   * The overallImpact is determined by the audit saving's effect on the overall performance score.
+   * We use linearImpact to compare audits where their overallImpact is rounded down to 0.
+   *
+   * @param {LH.ReportResult.AuditRef} audit
+   * @param {LH.ReportResult.AuditRef[]} metricAudits
+   * @return {{overallImpact: number, overallLinearImpact: number}}
+   */
+  overallImpact(audit, metricAudits) {
+    if (!audit.result.metricSavings) {
+      return {overallImpact: 0, overallLinearImpact: 0};
+    }
+
+    let overallImpact = 0;
+    let overallLinearImpact = 0;
+    for (const [k, savings] of Object.entries(audit.result.metricSavings)) {
+      // Get metric savings for individual audit.
+      if (savings === undefined) continue;
+
+      // Get the metric data.
+      const mAudit = metricAudits.find(audit => audit.acronym === k);
+      if (!mAudit) continue;
+      if (mAudit.result.score === null) continue;
+
+      const mValue = mAudit.result.numericValue;
+      if (!mValue) continue;
+
+      const linearImpact = savings / mValue * mAudit.weight;
+      overallLinearImpact += linearImpact;
+
+      const scoringOptions = mAudit.result.scoringOptions;
+      if (!scoringOptions) continue;
+
+      const newMetricScore = Util.computeLogNormalScore(scoringOptions, mValue - savings);
+
+      const weightedMetricImpact = (newMetricScore - mAudit.result.score) * mAudit.weight;
+      overallImpact += weightedMetricImpact;
     }
-    return 'diagnostic';
+    return {overallImpact, overallLinearImpact};
   }
 
   /**
@@ -228,53 +211,58 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       filmstripEl && timelineEl.append(filmstripEl);
     }
 
-    // Opportunities
-    const opportunityAudits = category.auditRefs
-        .filter(audit => this._classifyPerformanceAudit(audit) === 'load-opportunity')
-        .filter(audit => !ReportUtils.showAsPassed(audit.result))
-        .sort((auditA, auditB) => this._getWastedMs(auditB) - this._getWastedMs(auditA));
-
     const filterableMetrics = metricAudits.filter(a => !!a.relevantAudits);
     // TODO: only add if there are opportunities & diagnostics rendered.
     if (filterableMetrics.length) {
       this.renderMetricAuditFilter(filterableMetrics, element);
     }
 
-    if (opportunityAudits.length) {
-      // Scale the sparklines relative to savings, minimum 2s to not overstate small savings
-      const minimumScale = 2000;
-      const wastedMsValues = opportunityAudits.map(audit => this._getWastedMs(audit));
-      const maxWaste = Math.max(...wastedMsValues);
-      const scale = Math.max(Math.ceil(maxWaste / 1000) * 1000, minimumScale);
-      const [groupEl, footerEl] = this.renderAuditGroup(groups['load-opportunities']);
-      const tmpl = this.dom.createComponent('opportunityHeader');
-
-      this.dom.find('.lh-load-opportunity__col--one', tmpl).textContent =
-        strings.opportunityResourceColumnLabel;
-      this.dom.find('.lh-load-opportunity__col--two', tmpl).textContent =
-        strings.opportunitySavingsColumnLabel;
-
-      const headerEl = this.dom.find('.lh-load-opportunity__header', tmpl);
-      groupEl.insertBefore(headerEl, footerEl);
-      opportunityAudits.forEach(item =>
-        groupEl.insertBefore(this._renderOpportunity(item, scale), footerEl));
-      groupEl.classList.add('lh-audit-group--load-opportunities');
-      element.append(groupEl);
-    }
-
     // Diagnostics
     const diagnosticAudits = category.auditRefs
-        .filter(audit => this._classifyPerformanceAudit(audit) === 'diagnostic')
-        .filter(audit => !ReportUtils.showAsPassed(audit.result))
-        .sort((a, b) => {
-          const scoreA = a.result.scoreDisplayMode === 'informative' ? 100 : Number(a.result.score);
-          const scoreB = b.result.scoreDisplayMode === 'informative' ? 100 : Number(b.result.score);
-          return scoreA - scoreB;
-        });
-
-    if (diagnosticAudits.length) {
+        .filter(audit => this._isPerformanceInsight(audit))
+        .filter(audit => !ReportUtils.showAsPassed(audit.result));
+
+    /** @type {Array<{auditRef:LH.ReportResult.AuditRef, overallImpact: number, overallLinearImpact: number, guidanceLevel: number}>} */
+    const auditImpacts = [];
+    diagnosticAudits.forEach(audit => {
+      const {
+        overallImpact: overallImpact,
+        overallLinearImpact: overallLinearImpact,
+      } = this.overallImpact(audit, metricAudits);
+      const guidanceLevel = audit.result.guidanceLevel ?? 1;
+      auditImpacts.push({auditRef: audit, overallImpact, overallLinearImpact, guidanceLevel});
+    });
+
+    auditImpacts.sort((a, b) => {
+      // Performance diagnostics should only have score display modes of "informative" and "metricSavings"
+      // If the score display mode is "metricSavings", the `score` will be a coarse approximation of the overall impact.
+      // Therefore, it makes sense to sort audits by score first to ensure visual clarity with the score icons.
+      const scoreA = a.auditRef.result.scoreDisplayMode === 'informative'
+        ? 100
+        : Number(a.auditRef.result.score);
+      const scoreB = b.auditRef.result.scoreDisplayMode === 'informative'
+        ? 100
+        : Number(b.auditRef.result.score);
+      if (scoreA !== scoreB) return scoreA - scoreB;
+
+      // Overall impact is the estimated improvement to the performance score
+      if (a.overallImpact !== b.overallImpact) return b.overallImpact - a.overallImpact;
+
+      // Fall back to the linear impact if the normal impact is rounded down to 0
+      if (
+        a.overallImpact === 0 && b.overallImpact === 0 &&
+        a.overallLinearImpact !== b.overallLinearImpact
+      ) {
+        return b.overallLinearImpact - a.overallLinearImpact;
+      }
+
+      // Audits that have no estimated savings should be prioritized by the guidance level
+      return b.guidanceLevel - a.guidanceLevel;
+    });
+
+    if (auditImpacts.length) {
       const [groupEl, footerEl] = this.renderAuditGroup(groups['diagnostics']);
-      diagnosticAudits.forEach(item => groupEl.insertBefore(this.renderAudit(item), footerEl));
+      auditImpacts.forEach(item => groupEl.insertBefore(this.renderAudit(item.auditRef), footerEl));
       groupEl.classList.add('lh-audit-group--diagnostics');
       element.append(groupEl);
     }
@@ -282,7 +270,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     // Passed audits
     const passedAudits = category.auditRefs
         .filter(audit =>
-          this._classifyPerformanceAudit(audit) && ReportUtils.showAsPassed(audit.result));
+          this._isPerformanceInsight(audit) && ReportUtils.showAsPassed(audit.result));
 
     if (!passedAudits.length) return element;
 

package/shared/localization/locales/en-US.json

@@ -774,7 +774,7 @@
     "message": "Syntax"
   },
   "core/audits/csp-xss.js | metaTagMessage": {
-    "message": "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."
+    "message": "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."
   },
   "core/audits/csp-xss.js | noCsp": {
     "message": "No CSP found in enforcement mode"
@@ -1026,7 +1026,7 @@
     "message": "Page is loaded in an incognito window"
   },
   "core/audits/installable-manifest.js | manifest-display-not-supported": {
-    "message": "Manifest 'display' property must be one of 'standalone', 'fullscreen', or 'minimal-ui'"
+    "message": "Manifest `display` property must be one of `standalone`, `fullscreen`, or `minimal-ui`"
   },
   "core/audits/installable-manifest.js | manifest-display-override-not-supported": {
     "message": "Manifest contains 'display_override' field, and the first supported display mode must be one of 'standalone', 'fullscreen', or 'minimal-ui'"
@@ -1038,7 +1038,7 @@
     "message": "Manifest URL changed while the manifest was being fetched."
   },
   "core/audits/installable-manifest.js | manifest-missing-name-or-short-name": {
-    "message": "Manifest does not contain a 'name' or 'short_name' field"
+    "message": "Manifest does not contain a `name` or `short_name` field"
   },
   "core/audits/installable-manifest.js | manifest-missing-suitable-icon": {
     "message": "Manifest does not contain a suitable icon - PNG, SVG or WebP format of at least {value0} px is required, the sizes attribute must be set, and the purpose attribute, if set, must include \"any\"."
@@ -2211,25 +2211,25 @@
     "message": "Pages that use WebXR are not currently eligible for back/forward cache."
   },
   "core/lib/csp-evaluator.js | allowlistFallback": {
-    "message": "Consider adding https: and http: URL schemes (ignored by browsers supporting 'strict-dynamic') to be backward compatible with older browsers."
+    "message": "Consider adding https: and http: URL schemes (ignored by browsers supporting `'strict-dynamic'`) to be backward compatible with older browsers."
   },
   "core/lib/csp-evaluator.js | deprecatedDisownOpener": {
-    "message": "disown-opener is deprecated since CSP3. Please, use the Cross-Origin-Opener-Policy header instead."
+    "message": "`disown-opener` is deprecated since CSP3. Please, use the Cross-Origin-Opener-Policy header instead."
   },
   "core/lib/csp-evaluator.js | deprecatedReferrer": {
-    "message": "referrer is deprecated since CSP2. Please, use the Referrer-Policy header instead."
+    "message": "`referrer` is deprecated since CSP2. Please, use the Referrer-Policy header instead."
   },
   "core/lib/csp-evaluator.js | deprecatedReflectedXSS": {
-    "message": "reflected-xss is deprecated since CSP2. Please, use the X-XSS-Protection header instead."
+    "message": "`reflected-xss` is deprecated since CSP2. Please, use the X-XSS-Protection header instead."
   },
   "core/lib/csp-evaluator.js | missingBaseUri": {
-    "message": "Missing base-uri allows injected <base> tags to set the base URL for all relative URLs (e.g. scripts) to an attacker controlled domain. Consider setting base-uri to 'none' or 'self'."
+    "message": "Missing `base-uri` allows injected `<base>` tags to set the base URL for all relative URLs (e.g. scripts) to an attacker controlled domain. Consider setting `base-uri` to `'none'` or `'self'`."
   },
   "core/lib/csp-evaluator.js | missingObjectSrc": {
-    "message": "Missing object-src allows the injection of plugins that execute unsafe scripts. Consider setting object-src to 'none' if you can."
+    "message": "Missing `object-src` allows the injection of plugins that execute unsafe scripts. Consider setting `object-src` to `'none'` if you can."
   },
   "core/lib/csp-evaluator.js | missingScriptSrc": {
-    "message": "script-src directive is missing. This can allow the execution of unsafe scripts."
+    "message": "`script-src` directive is missing. This can allow the execution of unsafe scripts."
   },
   "core/lib/csp-evaluator.js | missingSemicolon": {
     "message": "Did you forget the semicolon? {keyword} seems to be a directive, not a keyword."
@@ -2250,10 +2250,10 @@
     "message": "No CSP configures a reporting destination. This makes it difficult to maintain the CSP over time and monitor for any breakages."
   },
   "core/lib/csp-evaluator.js | reportToOnly": {
-    "message": "The reporting destination is only configured via the report-to directive. This directive is only supported in Chromium-based browsers so it is recommended to also use a report-uri directive."
+    "message": "The reporting destination is only configured via the report-to directive. This directive is only supported in Chromium-based browsers so it is recommended to also use a `report-uri` directive."
   },
   "core/lib/csp-evaluator.js | strictDynamic": {
-    "message": "Host allowlists can frequently be bypassed. Consider using CSP nonces or hashes instead, along with 'strict-dynamic' if necessary."
+    "message": "Host allowlists can frequently be bypassed. Consider using CSP nonces or hashes instead, along with `'strict-dynamic'` if necessary."
   },
   "core/lib/csp-evaluator.js | unknownDirective": {
     "message": "Unknown CSP directive."
@@ -2262,10 +2262,10 @@
     "message": "{keyword} seems to be an invalid keyword."
   },
   "core/lib/csp-evaluator.js | unsafeInline": {
-    "message": "'unsafe-inline' allows the execution of unsafe in-page scripts and event handlers. Consider using CSP nonces or hashes to allow scripts individually."
+    "message": "`'unsafe-inline'` allows the execution of unsafe in-page scripts and event handlers. Consider using CSP nonces or hashes to allow scripts individually."
   },
   "core/lib/csp-evaluator.js | unsafeInlineFallback": {
-    "message": "Consider adding 'unsafe-inline' (ignored by browsers supporting nonces/hashes) to be backward compatible with older browsers."
+    "message": "Consider adding `'unsafe-inline'` (ignored by browsers supporting nonces/hashes) to be backward compatible with older browsers."
   },
   "core/lib/deprecation-description.js | feature": {
     "message": "Check the feature status page for more details."

package/shared/localization/locales/en-XL.json

@@ -774,7 +774,7 @@
     "message": "Ŝýn̂t́âx́"
   },
   "core/audits/csp-xss.js | metaTagMessage": {
-    "message": "T̂h́ê ṕâǵê ćôńt̂áîńŝ á ĈŚP̂ d́êf́îńêd́ îń â <ḿêt́â> t́âǵ. Ĉón̂śîd́êŕ m̂óv̂ín̂ǵ t̂h́ê ĆŜṔ t̂ó âń ĤT́T̂Ṕ ĥéâd́êŕ ôŕ d̂éf̂ín̂ín̂ǵ âńôt́ĥér̂ śt̂ŕîćt̂ ĆŜṔ îń âń ĤT́T̂Ṕ ĥéâd́êŕ."
+    "message": "T̂h́ê ṕâǵê ćôńt̂áîńŝ á ĈŚP̂ d́êf́îńêd́ îń â `<meta>` t́âǵ. Ĉón̂śîd́êŕ m̂óv̂ín̂ǵ t̂h́ê ĆŜṔ t̂ó âń ĤT́T̂Ṕ ĥéâd́êŕ ôŕ d̂éf̂ín̂ín̂ǵ âńôt́ĥér̂ śt̂ŕîćt̂ ĆŜṔ îń âń ĤT́T̂Ṕ ĥéâd́êŕ."
   },
   "core/audits/csp-xss.js | noCsp": {
     "message": "N̂ó ĈŚP̂ f́ôún̂d́ îń êńf̂ór̂ćêḿêńt̂ ḿôd́ê"
@@ -1026,7 +1026,7 @@
     "message": "P̂áĝé îś l̂óâd́êd́ îń âń îńĉóĝńît́ô ẃîńd̂óŵ"
   },
   "core/audits/installable-manifest.js | manifest-display-not-supported": {
-    "message": "M̂án̂íf̂éŝt́ 'd̂íŝṕl̂áŷ' ṕr̂óp̂ér̂t́ŷ ḿûśt̂ b́ê ón̂é ôf́ 'ŝt́âńd̂ál̂ón̂é', 'f̂úl̂ĺŝćr̂éêń', ôŕ 'm̂ín̂ím̂ál̂-úî'"
+    "message": "M̂án̂íf̂éŝt́ `display` p̂ŕôṕêŕt̂ý m̂úŝt́ b̂é ôńê óf̂ `standalone`, `fullscreen`, ór̂ `minimal-ui`"
   },
   "core/audits/installable-manifest.js | manifest-display-override-not-supported": {
     "message": "M̂án̂íf̂éŝt́ ĉón̂t́âín̂ś 'd̂íŝṕl̂áŷ_óv̂ér̂ŕîd́ê' f́îél̂d́, âńd̂ t́ĥé f̂ír̂śt̂ śûṕp̂ór̂t́êd́ d̂íŝṕl̂áŷ ḿôd́ê ḿûśt̂ b́ê ón̂é ôf́ 'ŝt́âńd̂ál̂ón̂é', 'f̂úl̂ĺŝćr̂éêń', ôŕ 'm̂ín̂ím̂ál̂-úî'"
@@ -1038,7 +1038,7 @@
     "message": "M̂án̂íf̂éŝt́ ÛŔL̂ ćĥán̂ǵêd́ ŵh́îĺê t́ĥé m̂án̂íf̂éŝt́ ŵáŝ b́êín̂ǵ f̂ét̂ćĥéd̂."
   },
   "core/audits/installable-manifest.js | manifest-missing-name-or-short-name": {
-    "message": "M̂án̂íf̂éŝt́ d̂óêś n̂ót̂ ćôńt̂áîń â 'ńâḿê' ór̂ 'śĥór̂t́_n̂ám̂é' f̂íêĺd̂"
+    "message": "M̂án̂íf̂éŝt́ d̂óêś n̂ót̂ ćôńt̂áîń â `name` ór̂ `short_name` f́îél̂d́"
   },
   "core/audits/installable-manifest.js | manifest-missing-suitable-icon": {
     "message": "M̂án̂íf̂éŝt́ d̂óêś n̂ót̂ ćôńt̂áîń â śûít̂áb̂ĺê íĉón̂ - ṔN̂Ǵ, ŜV́Ĝ ór̂ Ẃêb́P̂ f́ôŕm̂át̂ óf̂ át̂ ĺêáŝt́ {value0} p̂x́ îś r̂éq̂úîŕêd́, t̂h́ê śîźêś ât́t̂ŕîb́ût́ê ḿûśt̂ b́ê śêt́, âńd̂ t́ĥé p̂úr̂ṕôśê át̂t́r̂íb̂út̂é, îf́ ŝét̂, ḿûśt̂ ín̂ćl̂úd̂é \"âńŷ\"."
@@ -2211,25 +2211,25 @@
     "message": "P̂áĝéŝ t́ĥát̂ úŝé Ŵéb̂X́R̂ ár̂é n̂ót̂ ćûŕr̂én̂t́l̂ý êĺîǵîb́l̂é f̂ór̂ b́âćk̂/f́ôŕŵár̂d́ ĉáĉh́ê."
   },
   "core/lib/csp-evaluator.js | allowlistFallback": {
-    "message": "Ĉón̂śîd́êŕ âd́d̂ín̂ǵ ĥt́t̂ṕŝ: án̂d́ ĥt́t̂ṕ: ÛŔL̂ śĉh́êḿêś (îǵn̂ór̂éd̂ b́ŷ b́r̂óŵśêŕŝ śûṕp̂ór̂t́îńĝ 'śt̂ŕîćt̂-d́ŷńâḿîć') t̂ó b̂é b̂áĉḱŵár̂d́ ĉóm̂ṕât́îb́l̂é ŵít̂h́ ôĺd̂ér̂ b́r̂óŵśêŕŝ."
+    "message": "Ĉón̂śîd́êŕ âd́d̂ín̂ǵ ĥt́t̂ṕŝ: án̂d́ ĥt́t̂ṕ: ÛŔL̂ śĉh́êḿêś (îǵn̂ór̂éd̂ b́ŷ b́r̂óŵśêŕŝ śûṕp̂ór̂t́îńĝ `'strict-dynamic'`) t́ô b́ê b́âćk̂ẃâŕd̂ ćôḿp̂át̂íb̂ĺê ẃît́ĥ ól̂d́êŕ b̂ŕôẃŝér̂ś."
   },
   "core/lib/csp-evaluator.js | deprecatedDisownOpener": {
-    "message": "d̂íŝóŵń-ôṕêńêŕ îś d̂ép̂ŕêćât́êd́ ŝín̂ćê ĆŜṔ3. P̂ĺêáŝé, ûśê t́ĥé Ĉŕôśŝ-Ór̂íĝín̂-Óp̂én̂ér̂-Ṕôĺîćŷ h́êád̂ér̂ ín̂śt̂éâd́."
+    "message": "`disown-opener` îś d̂ép̂ŕêćât́êd́ ŝín̂ćê ĆŜṔ3. P̂ĺêáŝé, ûśê t́ĥé Ĉŕôśŝ-Ór̂íĝín̂-Óp̂én̂ér̂-Ṕôĺîćŷ h́êád̂ér̂ ín̂śt̂éâd́."
   },
   "core/lib/csp-evaluator.js | deprecatedReferrer": {
-    "message": "r̂éf̂ér̂ŕêŕ îś d̂ép̂ŕêćât́êd́ ŝín̂ćê ĆŜṔ2. P̂ĺêáŝé, ûśê t́ĥé R̂éf̂ér̂ŕêŕ-P̂ól̂íĉý ĥéâd́êŕ îńŝt́êád̂."
+    "message": "`referrer` îś d̂ép̂ŕêćât́êd́ ŝín̂ćê ĆŜṔ2. P̂ĺêáŝé, ûśê t́ĥé R̂éf̂ér̂ŕêŕ-P̂ól̂íĉý ĥéâd́êŕ îńŝt́êád̂."
   },
   "core/lib/csp-evaluator.js | deprecatedReflectedXSS": {
-    "message": "r̂éf̂ĺêćt̂éd̂-x́ŝś îś d̂ép̂ŕêćât́êd́ ŝín̂ćê ĆŜṔ2. P̂ĺêáŝé, ûśê t́ĥé X̂-X́ŜŚ-P̂ŕôt́êćt̂íôń ĥéâd́êŕ îńŝt́êád̂."
+    "message": "`reflected-xss` îś d̂ép̂ŕêćât́êd́ ŝín̂ćê ĆŜṔ2. P̂ĺêáŝé, ûśê t́ĥé X̂-X́ŜŚ-P̂ŕôt́êćt̂íôń ĥéâd́êŕ îńŝt́êád̂."
   },
   "core/lib/csp-evaluator.js | missingBaseUri": {
-    "message": "M̂íŝśîńĝ b́âśê-úr̂í âĺl̂óŵś îńĵéĉt́êd́ <b̂áŝé> t̂áĝś t̂ó ŝét̂ t́ĥé b̂áŝé ÛŔL̂ f́ôŕ âĺl̂ ŕêĺât́îv́ê ÚR̂Ĺŝ (é.ĝ. śĉŕîṕt̂ś) t̂ó âń ât́t̂áĉḱêŕ ĉón̂t́r̂ól̂ĺêd́ d̂óm̂áîń. Ĉón̂śîd́êŕ ŝét̂t́îńĝ b́âśê-úr̂í t̂ó 'n̂ón̂é' ôŕ 'ŝél̂f́'."
+    "message": "M̂íŝśîńĝ `base-uri` ál̂ĺôẃŝ ín̂j́êćt̂éd̂ `<base>` t́âǵŝ t́ô śêt́ t̂h́ê b́âśê ÚR̂Ĺ f̂ór̂ ál̂ĺ r̂él̂át̂ív̂é ÛŔL̂ś (ê.ǵ. ŝćr̂íp̂t́ŝ) t́ô án̂ át̂t́âćk̂ér̂ ćôńt̂ŕôĺl̂éd̂ d́ôḿâín̂. Ćôńŝíd̂ér̂ śêt́t̂ín̂ǵ `base-uri` t̂ó `'none'` ôŕ `'self'`."
   },
   "core/lib/csp-evaluator.js | missingObjectSrc": {
-    "message": "M̂íŝśîńĝ ób̂j́êćt̂-śr̂ć âĺl̂óŵś t̂h́ê ín̂j́êćt̂íôń ôf́ p̂ĺûǵîńŝ t́ĥát̂ éx̂éĉút̂é ûńŝáf̂é ŝćr̂íp̂t́ŝ. Ćôńŝíd̂ér̂ śêt́t̂ín̂ǵ ôb́ĵéĉt́-ŝŕĉ t́ô 'ńôńê' íf̂ ýôú ĉán̂."
+    "message": "M̂íŝśîńĝ `object-src` ál̂ĺôẃŝ t́ĥé îńĵéĉt́îón̂ óf̂ ṕl̂úĝín̂ś t̂h́ât́ êx́êćût́ê ún̂śâf́ê śĉŕîṕt̂ś. Ĉón̂śîd́êŕ ŝét̂t́îńĝ `object-src` t́ô `'none'` íf̂ ýôú ĉán̂."
   },
   "core/lib/csp-evaluator.js | missingScriptSrc": {
-    "message": "ŝćr̂íp̂t́-ŝŕĉ d́îŕêćt̂ív̂é îś m̂íŝśîńĝ. T́ĥíŝ ćâń âĺl̂óŵ t́ĥé êx́êćût́îón̂ óf̂ ún̂śâf́ê śĉŕîṕt̂ś."
+    "message": "`script-src` d̂ír̂éĉt́îv́ê íŝ ḿîśŝín̂ǵ. T̂h́îś ĉán̂ ál̂ĺôẃ t̂h́ê éx̂éĉút̂íôń ôf́ ûńŝáf̂é ŝćr̂íp̂t́ŝ."
   },
   "core/lib/csp-evaluator.js | missingSemicolon": {
     "message": "D̂íd̂ ýôú f̂ór̂ǵêt́ t̂h́ê śêḿîćôĺôń? {keyword} ŝéêḿŝ t́ô b́ê á d̂ír̂éĉt́îv́ê, ńôt́ â ḱêýŵór̂d́."
@@ -2250,10 +2250,10 @@
     "message": "N̂ó ĈŚP̂ ćôńf̂íĝúr̂éŝ á r̂ép̂ór̂t́îńĝ d́êśt̂ín̂át̂íôń. T̂h́îś m̂ák̂éŝ ít̂ d́îf́f̂íĉúl̂t́ t̂ó m̂áîńt̂áîń t̂h́ê ĆŜṔ ôv́êŕ t̂ím̂é âńd̂ ḿôńît́ôŕ f̂ór̂ án̂ý b̂ŕêák̂áĝéŝ."
   },
   "core/lib/csp-evaluator.js | reportToOnly": {
-    "message": "T̂h́ê ŕêṕôŕt̂ín̂ǵ d̂éŝt́îńât́îón̂ íŝ ón̂ĺŷ ćôńf̂íĝúr̂éd̂ v́îá t̂h́ê ŕêṕôŕt̂-t́ô d́îŕêćt̂ív̂é. T̂h́îś d̂ír̂éĉt́îv́ê íŝ ón̂ĺŷ śûṕp̂ór̂t́êd́ îń Ĉh́r̂óm̂íûḿ-b̂áŝéd̂ b́r̂óŵśêŕŝ śô ít̂ íŝ ŕêćôḿm̂én̂d́êd́ t̂ó âĺŝó ûśê á r̂ép̂ór̂t́-ûŕî d́îŕêćt̂ív̂é."
+    "message": "T̂h́ê ŕêṕôŕt̂ín̂ǵ d̂éŝt́îńât́îón̂ íŝ ón̂ĺŷ ćôńf̂íĝúr̂éd̂ v́îá t̂h́ê ŕêṕôŕt̂-t́ô d́îŕêćt̂ív̂é. T̂h́îś d̂ír̂éĉt́îv́ê íŝ ón̂ĺŷ śûṕp̂ór̂t́êd́ îń Ĉh́r̂óm̂íûḿ-b̂áŝéd̂ b́r̂óŵśêŕŝ śô ít̂ íŝ ŕêćôḿm̂én̂d́êd́ t̂ó âĺŝó ûśê á `report-uri` d̂ír̂éĉt́îv́ê."
   },
   "core/lib/csp-evaluator.js | strictDynamic": {
-    "message": "Ĥóŝt́ âĺl̂óŵĺîśt̂ś ĉán̂ f́r̂éq̂úêńt̂ĺŷ b́ê b́ŷṕâśŝéd̂. Ćôńŝíd̂ér̂ úŝín̂ǵ ĈŚP̂ ńôńĉéŝ ór̂ h́âśĥéŝ ín̂śt̂éâd́, âĺôńĝ ẃît́ĥ 'śt̂ŕîćt̂-d́ŷńâḿîć' îf́ n̂éĉéŝśâŕŷ."
+    "message": "Ĥóŝt́ âĺl̂óŵĺîśt̂ś ĉán̂ f́r̂éq̂úêńt̂ĺŷ b́ê b́ŷṕâśŝéd̂. Ćôńŝíd̂ér̂ úŝín̂ǵ ĈŚP̂ ńôńĉéŝ ór̂ h́âśĥéŝ ín̂śt̂éâd́, âĺôńĝ ẃît́ĥ `'strict-dynamic'` íf̂ ńêćêśŝár̂ý."
   },
   "core/lib/csp-evaluator.js | unknownDirective": {
     "message": "Ûńk̂ńôẃn̂ ĆŜṔ d̂ír̂éĉt́îv́ê."
@@ -2262,10 +2262,10 @@
     "message": "{keyword} ŝéêḿŝ t́ô b́ê án̂ ín̂v́âĺîd́ k̂éŷẃôŕd̂."
   },
   "core/lib/csp-evaluator.js | unsafeInline": {
-    "message": "'ûńŝáf̂é-îńl̂ín̂é' âĺl̂óŵś t̂h́ê éx̂éĉút̂íôń ôf́ ûńŝáf̂é îń-p̂áĝé ŝćr̂íp̂t́ŝ án̂d́ êv́êńt̂ h́âńd̂ĺêŕŝ. Ćôńŝíd̂ér̂ úŝín̂ǵ ĈŚP̂ ńôńĉéŝ ór̂ h́âśĥéŝ t́ô ál̂ĺôẃ ŝćr̂íp̂t́ŝ ín̂d́îv́îd́ûál̂ĺŷ."
+    "message": "`'unsafe-inline'` âĺl̂óŵś t̂h́ê éx̂éĉút̂íôń ôf́ ûńŝáf̂é îń-p̂áĝé ŝćr̂íp̂t́ŝ án̂d́ êv́êńt̂ h́âńd̂ĺêŕŝ. Ćôńŝíd̂ér̂ úŝín̂ǵ ĈŚP̂ ńôńĉéŝ ór̂ h́âśĥéŝ t́ô ál̂ĺôẃ ŝćr̂íp̂t́ŝ ín̂d́îv́îd́ûál̂ĺŷ."
   },
   "core/lib/csp-evaluator.js | unsafeInlineFallback": {
-    "message": "Ĉón̂śîd́êŕ âd́d̂ín̂ǵ 'ûńŝáf̂é-îńl̂ín̂é' (îǵn̂ór̂éd̂ b́ŷ b́r̂óŵśêŕŝ śûṕp̂ór̂t́îńĝ ńôńĉéŝ/h́âśĥéŝ) t́ô b́ê b́âćk̂ẃâŕd̂ ćôḿp̂át̂íb̂ĺê ẃît́ĥ ól̂d́êŕ b̂ŕôẃŝér̂ś."
+    "message": "Ĉón̂śîd́êŕ âd́d̂ín̂ǵ `'unsafe-inline'` (îǵn̂ór̂éd̂ b́ŷ b́r̂óŵśêŕŝ śûṕp̂ór̂t́îńĝ ńôńĉéŝ/h́âśĥéŝ) t́ô b́ê b́âćk̂ẃâŕd̂ ćôḿp̂át̂íb̂ĺê ẃît́ĥ ól̂d́êŕ b̂ŕôẃŝér̂ś."
   },
   "core/lib/deprecation-description.js | feature": {
     "message": "Ĉh́êćk̂ t́ĥé f̂éât́ûŕê śt̂át̂úŝ ṕâǵê f́ôŕ m̂ór̂é d̂ét̂áîĺŝ."

package/shared/util.d.ts

@@ -130,5 +130,27 @@ export class Util {
         lineNumber: number;
         truncated?: boolean | undefined;
     }[];
+    /**
+     * Computes a score between 0 and 1 based on the measured `value`. Score is determined by
+     * considering a log-normal distribution governed by two control points (the 10th
+     * percentile value and the median value) and represents the percentage of sites that are
+     * greater than `value`.
+     *
+     * Score characteristics:
+     * - within [0, 1]
+     * - rounded to two digits
+     * - value must meet or beat a controlPoint value to meet or exceed its percentile score:
+     *   - value > median will give a score < 0.5; value ≤ median will give a score ≥ 0.5.
+     *   - value > p10 will give a score < 0.9; value ≤ p10 will give a score ≥ 0.9.
+     * - values < p10 will get a slight boost so a score of 1 is achievable by a
+     *   `value` other than those close to 0. Scores of > ~0.99524 end up rounded to 1.
+     * @param {{median: number, p10: number}} controlPoints
+     * @param {number} value
+     * @return {number}
+     */
+    static computeLogNormalScore(controlPoints: {
+        median: number;
+        p10: number;
+    }, value: number): number;
 }
 //# sourceMappingURL=util.d.ts.map

package/shared/util.js

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as statistics from './statistics.js';
+
 /** @typedef {import('../types/lhr/audit-details').default.SnippetValue} SnippetValue */
 
 const ELLIPSIS = '\u2026';
@@ -362,6 +364,35 @@ class Util {
 
     return lines.filter(line => lineNumbersToKeep.has(line.lineNumber));
   }
+
+  /**
+   * Computes a score between 0 and 1 based on the measured `value`. Score is determined by
+   * considering a log-normal distribution governed by two control points (the 10th
+   * percentile value and the median value) and represents the percentage of sites that are
+   * greater than `value`.
+   *
+   * Score characteristics:
+   * - within [0, 1]
+   * - rounded to two digits
+   * - value must meet or beat a controlPoint value to meet or exceed its percentile score:
+   *   - value > median will give a score < 0.5; value ≤ median will give a score ≥ 0.5.
+   *   - value > p10 will give a score < 0.9; value ≤ p10 will give a score ≥ 0.9.
+   * - values < p10 will get a slight boost so a score of 1 is achievable by a
+   *   `value` other than those close to 0. Scores of > ~0.99524 end up rounded to 1.
+   * @param {{median: number, p10: number}} controlPoints
+   * @param {number} value
+   * @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;
+  }
 }
 
 export {

package/types/audit.d.ts

@@ -86,8 +86,12 @@ declare module Audit {
     details?: AuditDetails;
     /** If an audit encounters unusual execution circumstances, strings can be put in this optional array to add top-level warnings to the LHR. */
     runWarnings?: Array<IcuMessage>;
-    /** [EXPERIMENTAL] Estimates of how much this audit affects various performance metrics. Values will be in the unit of the respective metrics. */
+    /** Estimates of how much this audit affects various performance metrics. Values will be in the unit of the respective metrics. */
     metricSavings?: MetricSavings;
+    /** Score details including p10 and median for calculating an audit's log-normal score. */
+    scoringOptions?: ScoreOptions;
+    /** A string identifying how the score should be interpreted for display. Overrides audit meta `scoreDisplayMode` if defined. */
+    scoreDisplayMode?: AuditResult.ScoreDisplayMode;
   }
 
   /** The Audit.Product type for audits that do not return a `numericValue`. */

package/types/internal/rxjs.d.ts

@@ -22,5 +22,8 @@ declare module 'rxjs' {
   export const tap: any;
   export const throwIfEmpty: any;
   export const firstValueFrom: any;
+  export const delay: any;
+  export const startWith: any;
+  export const switchMap: any;
 }
 

package/types/lhr/audit-result.d.ts

@@ -12,6 +12,13 @@ interface ScoreDisplayModes {
   NUMERIC: 'numeric';
   /** Pass/fail audit (0 and 1 are only possible scores). */
   BINARY: 'binary';
+  /**
+   * Audit result score is determined by the metric savings and product score:
+   * 1   - audit passed based on product score
+   * 0.5 - audit failed and had no metric savings
+   * 0   - audit failed and had metric savings
+   */
+  METRIC_SAVINGS: 'metricSavings';
   /** The audit exists only to tell you to review something yourself. Score is null and should be ignored. */
   MANUAL: 'manual';
   /** The audit is an FYI only, and can't be interpreted as pass/fail. Score is null and should be ignored. */
@@ -66,4 +73,13 @@ export interface Result {
   numericUnit?: string;
   /** Extra information about the page provided by some types of audits, in one of several possible forms that can be rendered in the HTML report. */
   details?: FormattedIcu<AuditDetails>;
+  /** Estimates of how much this audit affects various performance metrics. Values will be in the unit of the respective metrics. */
+  metricSavings?: MetricSavings
+  /** Score details including p10 and median for calculating an audit's log-normal score. */
+  scoringOptions?: {
+    p10: number;
+    median: number;
+  };
+  /** A number indicating how much guidance Lighthouse provides to solve the problem in this audit on a 1-3 scale. Higher means more guidance. */
+  guidanceLevel?: number;
 }