lighthouse 11.1.0-dev.20231001 → 11.1.0-dev.20231003

package/report/renderer/explodey-gauge.js

@@ -0,0 +1,357 @@
+/**
+ * @license Copyright 2023 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+*/
+
+/* eslint-env browser */
+/* eslint-disable max-len */
+
+import {ReportUtils} from './report-utils.js';
+
+/**
+ * @param {import('./dom.js').DOM} dom
+ */
+function createGauge(dom) {
+  const docFrag = dom.createComponent('explodeyGauge');
+  return dom.find('.lh-exp-gauge-component', docFrag);
+}
+
+/**
+ * @param {import('./dom.js').DOM} dom
+ * @param {Element} componentEl
+ * @param {LH.ReportResult.Category} category
+ */
+function updateGauge(dom, componentEl, category) {
+  const wrapperEl = dom.find('div.lh-exp-gauge__wrapper', componentEl);
+  wrapperEl.className = '';
+  wrapperEl.classList.add('lh-exp-gauge__wrapper',
+    `lh-exp-gauge__wrapper--${ReportUtils.calculateRating(category.score)}`);
+  _setPerfGaugeExplodey(dom, wrapperEl, category);
+}
+
+/**
+ * @param {number} sizeSVG
+ * @param {number} percent
+ * @param {number=} strokeWidth
+ */
+function _determineTrig(sizeSVG, percent, strokeWidth) {
+  strokeWidth = strokeWidth || sizeSVG / 32;
+
+  const radiusInner = sizeSVG / strokeWidth;
+  const strokeGap = 0.5 * strokeWidth;
+  const radiusOuter = radiusInner + strokeGap + strokeWidth;
+
+  const circumferenceInner = 2 * Math.PI * radiusInner;
+  // arc length we need to subtract
+  // for very small strokeWidth:radius ratios this is ≈ strokeWidth
+  // angle = acute angle of isosceles △ with 2 edges equal to radius & 3rd equal to strokeWidth
+  // angle formula given by law of cosines
+  const endDiffInner = Math.acos(1 - 0.5 * Math.pow((0.5 * strokeWidth) / radiusInner, 2)) * radiusInner;
+
+  const circumferenceOuter = 2 * Math.PI * radiusOuter;
+  const endDiffOuter = Math.acos(1 - 0.5 * Math.pow((0.5 * strokeWidth) / radiusOuter, 2)) * radiusOuter;
+
+  return {
+    radiusInner,
+    radiusOuter,
+    circumferenceInner,
+    circumferenceOuter,
+    getArcLength: () => Math.max(0, Number((percent * circumferenceInner))),
+    /**
+     * @param {number} weightingPct
+     * @param {boolean} isButt for metricArcHoverTarget
+     */
+    getMetricArcLength: (weightingPct, isButt = false) => {
+      // TODO: this math isn't perfect butt it's very close.
+      const linecapFactor = isButt ? 0 : 2 * endDiffOuter;
+      return Math.max(0, Number((weightingPct * circumferenceOuter - strokeGap - linecapFactor)));
+    },
+    endDiffInner,
+    endDiffOuter,
+    strokeWidth,
+    strokeGap,
+  };
+}
+
+/**
+ * @param {import('./dom.js').DOM} dom
+ * @param {HTMLElement} wrapperEl
+ * @param {LH.ReportResult.Category} category
+ */
+function _setPerfGaugeExplodey(dom, wrapperEl, category) {
+  const sizeSVG = 128;
+  const offsetSVG = -0.5 * sizeSVG;
+
+  const percent = Number(category.score);
+  const {
+    radiusInner,
+    radiusOuter,
+    circumferenceInner,
+    circumferenceOuter,
+    getArcLength,
+    getMetricArcLength,
+    endDiffInner,
+    endDiffOuter,
+    strokeWidth,
+    strokeGap,
+  } = _determineTrig(sizeSVG, percent);
+
+  const SVG = dom.find('svg.lh-exp-gauge', wrapperEl);
+
+  dom.find('.lh-exp-gauge__label', SVG).textContent = category.title;
+
+  SVG.setAttribute('viewBox', [offsetSVG, offsetSVG / 2, sizeSVG, sizeSVG / 2].join(' '));
+  SVG.style.setProperty('--stroke-width', `${strokeWidth}px`);
+  SVG.style.setProperty('--circle-meas', (2 * Math.PI).toFixed(4));
+
+  const groupOuter = dom.find('g.lh-exp-gauge__outer', wrapperEl);
+  const groupInner = dom.find('g.lh-exp-gauge__inner', wrapperEl);
+  const cover = dom.find('circle.lh-cover', groupOuter);
+  const gaugeArc = dom.find('circle.lh-exp-gauge__arc', groupInner);
+  const gaugePerc = dom.find('text.lh-exp-gauge__percentage', groupInner);
+
+  groupOuter.style.setProperty('--scale-initial', String(radiusInner / radiusOuter));
+  groupOuter.style.setProperty('--radius', `${radiusOuter}px`);
+  cover.style.setProperty('--radius', `${0.5 * (radiusInner + radiusOuter)}px`);
+  cover.setAttribute('stroke-width', String(strokeGap));
+  SVG.style.setProperty('--radius', `${radiusInner}px`);
+
+  gaugeArc.setAttribute('stroke-dasharray',
+    `${getArcLength()} ${(circumferenceInner - getArcLength()).toFixed(4)}`);
+  gaugeArc.setAttribute('stroke-dashoffset', String(0.25 * circumferenceInner - endDiffInner));
+
+  gaugePerc.textContent = Math.round(percent * 100).toString();
+
+  const radiusTextOuter = radiusOuter + strokeWidth;
+  const radiusTextInner = radiusOuter - strokeWidth;
+
+  const metrics = category.auditRefs.filter(r => r.group === 'metrics' && r.weight);
+  const totalWeight = metrics.reduce((sum, each) => (sum += each.weight), 0);
+  let offsetAdder = 0.25 * circumferenceOuter - endDiffOuter - 0.5 * strokeGap;
+  let angleAdder = -0.5 * Math.PI;
+
+  // Extra hack on top of the HACK for element reuse below. Delete any metric elems that aren't needed anymore (happens when the same gauge goes from v5 to v6)
+  groupOuter.querySelectorAll('.metric').forEach(metricElem => {
+    const classNamesToRetain = metrics.map(metric => `metric--${metric.id}`);
+    const match = classNamesToRetain.find(selector => metricElem.classList.contains(selector));
+    if (!match) metricElem.remove();
+  });
+
+  metrics.forEach((metric, i) => {
+    const alias = metric.acronym ?? metric.id;
+
+    // Hack
+    const needsDomPopulation = !groupOuter.querySelector(`.metric--${alias}`);
+
+    // HACK:This isn't ideal but it was quick. Create element during initialization or reuse existing during updates
+    const metricGroup = dom.maybeFind(`g.metric--${alias}`, groupOuter) || dom.createSVGElement('g');
+    const metricArcMax = dom.maybeFind(`.metric--${alias} circle.lh-exp-gauge--faded`, groupOuter) || dom.createSVGElement('circle');
+    const metricArc = dom.maybeFind(`.metric--${alias} circle.lh-exp-gauge--miniarc`, groupOuter) || dom.createSVGElement('circle');
+    const metricArcHoverTarget = dom.maybeFind(`.metric--${alias} circle.lh-exp-gauge-hovertarget`, groupOuter) || dom.createSVGElement('circle');
+    const metricLabel = dom.maybeFind(`.metric--${alias} text.metric__label`, groupOuter) || dom.createSVGElement('text');
+    const metricValue = dom.maybeFind(`.metric--${alias} text.metric__value`, groupOuter) || dom.createSVGElement('text');
+
+    metricGroup.classList.add('metric', `metric--${alias}`);
+    metricArcMax.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge--faded');
+    metricArc.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge--miniarc');
+    metricArcHoverTarget.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge-hovertarget');
+
+    const weightingPct = metric.weight / totalWeight;
+    const metricLengthMax = getMetricArcLength(weightingPct);
+    const metricPercent = metric.result.score ? metric.result.score * weightingPct : 0;
+    const metricLength = getMetricArcLength(metricPercent);
+    const metricOffset = weightingPct * circumferenceOuter;
+    const metricHoverLength = getMetricArcLength(weightingPct, true);
+    const rating = ReportUtils.calculateRating(metric.result.score, metric.result.scoreDisplayMode);
+
+    metricGroup.style.setProperty('--metric-rating', rating);
+    metricGroup.style.setProperty('--metric-color', `var(--color-${rating})`);
+    metricGroup.style.setProperty('--metric-offset', `${offsetAdder}`);
+    metricGroup.style.setProperty('--i', i.toString());
+
+    metricArcMax.setAttribute('stroke-dasharray', `${metricLengthMax} ${circumferenceOuter - metricLengthMax}`);
+    metricArc.style.setProperty('--metric-array', `${metricLength} ${circumferenceOuter - metricLength}`);
+    metricArcHoverTarget.setAttribute('stroke-dasharray', `${metricHoverLength} ${circumferenceOuter - metricHoverLength - endDiffOuter}`);
+
+    metricLabel.classList.add('metric__label');
+    metricValue.classList.add('metric__value');
+    metricLabel.textContent = alias;
+    metricValue.textContent = `+${Math.round(metricPercent * 100)}`;
+
+    const midAngle = angleAdder + weightingPct * Math.PI;
+    const cos = Math.cos(midAngle);
+    const sin = Math.sin(midAngle);
+
+    // only set non-default alignments
+    switch (true) {
+      case cos > 0:
+        metricValue.setAttribute('text-anchor', 'end');
+        break;
+      case cos < 0:
+        metricLabel.setAttribute('text-anchor', 'end');
+        break;
+      case cos === 0:
+        metricLabel.setAttribute('text-anchor', 'middle');
+        metricValue.setAttribute('text-anchor', 'middle');
+        break;
+    }
+
+    switch (true) {
+      case sin > 0:
+        metricLabel.setAttribute('dominant-baseline', 'hanging');
+        break;
+      case sin < 0:
+        metricValue.setAttribute('dominant-baseline', 'hanging');
+        break;
+      case sin === 0:
+        metricLabel.setAttribute('dominant-baseline', 'middle');
+        metricValue.setAttribute('dominant-baseline', 'middle');
+        break;
+    }
+
+    metricLabel.setAttribute('x', (radiusTextOuter * cos).toFixed(2));
+    metricLabel.setAttribute('y', (radiusTextOuter * sin).toFixed(2));
+    metricValue.setAttribute('x', (radiusTextInner * cos).toFixed(2));
+    metricValue.setAttribute('y', (radiusTextInner * sin).toFixed(2));
+
+    if (needsDomPopulation) {
+      metricGroup.appendChild(metricArcMax);
+      metricGroup.appendChild(metricArc);
+      metricGroup.appendChild(metricArcHoverTarget);
+      metricGroup.appendChild(metricLabel);
+      metricGroup.appendChild(metricValue);
+      groupOuter.appendChild(metricGroup);
+    }
+
+    offsetAdder -= metricOffset;
+    angleAdder += weightingPct * 2 * Math.PI;
+  });
+
+  // Catch pointerover movement between the hovertarget arcs. Without this the metric-highlights can clear when moving between.
+  const underHoverTarget = groupOuter.querySelector(`.lh-exp-gauge-underhovertarget`) || dom.createSVGElement('circle');
+  underHoverTarget.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge-hovertarget', 'lh-exp-gauge-underhovertarget');
+  const underHoverLength = getMetricArcLength(1, true);
+  underHoverTarget.setAttribute('stroke-dasharray', `${underHoverLength} ${circumferenceOuter - underHoverLength - endDiffOuter}`);
+  if (!underHoverTarget.isConnected) {
+    groupOuter.prepend(underHoverTarget);
+  }
+
+  // Hack. Not ideal.
+  if (SVG.dataset.listenersSetup) return;
+  // @ts-expect-error
+  SVG.dataset.listenersSetup = true;
+
+  peekGauge(SVG);
+
+  /*
+    wrapperEl.state-expanded: gauge is exploded
+    wrapperEl.state-highlight: gauge is exploded and one of the metrics is being highlighted
+    metric.metric-highlight: highlight this particular metric
+  */
+  SVG.addEventListener('pointerover', e => {
+    // If hovering outside of the arcs, reset back to unexploded state
+    if (e.target === SVG && SVG.classList.contains('state--expanded')) {
+      SVG.classList.remove('state--expanded');
+
+      if (SVG.classList.contains('state--highlight')) {
+        SVG.classList.remove('state--highlight');
+        dom.find('.metric--highlight', SVG).classList.remove('metric--highlight');
+      }
+      return;
+    }
+
+    if (!(e.target instanceof Element)) {
+      return;
+    }
+
+    const parentEl = e.target.parentNode;
+    if (!(parentEl instanceof SVGElement)) {
+      return;
+    }
+
+    // if hovering on the primary (inner) part, then explode it but dont highlight
+    if (parentEl && parentEl === groupInner) {
+      if (!SVG.classList.contains('state--expanded')) SVG.classList.add('state--expanded');
+      else if (SVG.classList.contains('state--highlight')) {
+        SVG.classList.remove('state--highlight');
+        dom.find('.metric--highlight', SVG).classList.remove('metric--highlight');
+      }
+      return;
+    }
+
+    // if hovering on a metric, highlight that one.
+    // TODO: The hover target is a little small. ideally it's thicker.
+    if (parentEl && parentEl.classList && parentEl.classList.contains('metric')) {
+      // match the bg color of the gauge during a metric highlight
+      const metricRating = parentEl.style.getPropertyValue('--metric-rating');
+      wrapperEl.style.setProperty('--color-highlight', `var(--color-${metricRating}-secondary)`);
+
+      if (!SVG.classList.contains('state--highlight')) {
+        SVG.classList.add('state--highlight');
+        parentEl.classList.add('metric--highlight');
+      } else {
+        const highlightEl = dom.find('.metric--highlight', SVG);
+
+        if (parentEl !== highlightEl) {
+          highlightEl.classList.remove('metric--highlight');
+          parentEl.classList.add('metric--highlight');
+          console.log({highlightEl, parent: parentEl});
+        }
+      }
+    }
+  });
+
+  // clear on mouselave even if mousemove didn't catch it.
+  SVG.addEventListener('mouseleave', () => {
+    // SVG.classList.remove('state--expanded');
+    SVG.classList.remove('state--highlight');
+    const mh = SVG.querySelector('.metric--highlight');
+    mh?.classList.remove('metric--highlight');
+  });
+
+  /**
+   * On the first run, tease with a little peek reveal
+   * @param {SVGElement} SVG
+   */
+  async function peekGauge(SVG) {
+    // Delay just a tad to let the user aclimatize beforehand.
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    // Early exit if it's already engaged
+    if (SVG.classList.contains('state--expanded')) return;
+
+    // To visually get the outer ring to peek on the edge, we need the inner ring on top. This is SVG's equivalent to `innerElem.zIndex = 100`
+    const inner = dom.find('.lh-exp-gauge__inner', SVG);
+    const id = `uniq-${Math.random()}`;
+    inner.setAttribute('id', id);
+    const useElem = dom.createSVGElement('use');
+    useElem.setAttribute('href', `#${id}`);
+    // for paint order this must come _after_ the outer.
+    SVG.appendChild(useElem);
+
+    const peekDurationSec = 2.5;
+    SVG.style.setProperty('--peek-dur', `${peekDurationSec}s`);
+    SVG.classList.add('state--peek', 'state--expanded');
+
+    // Fancy double cleanup
+    const cleanup = () => {
+      SVG.classList.remove('state--peek', 'state--expanded');
+      useElem.remove();
+    };
+    const tId = setTimeout(() => {
+      SVG.removeEventListener('mouseenter', handleEarlyInteraction);
+      cleanup();
+    }, peekDurationSec * 1000 * 1.5); // lil extra time just cuz
+    function handleEarlyInteraction() {
+      clearTimeout(tId);
+      cleanup();
+    }
+    SVG.addEventListener('mouseenter', handleEarlyInteraction, {once: true});
+  }
+}
+
+export {
+  createGauge,
+  updateGauge,
+};

package/report/renderer/performance-category-renderer.d.ts

@@ -4,20 +4,6 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
      * @return {!Element}
      */
     _renderMetric(audit: LH.ReportResult.AuditRef): Element;
-    /**
-     * @param {LH.ReportResult.AuditRef} audit
-     * @param {number} scale
-     * @return {!Element}
-     */
-    _renderOpportunity(audit: LH.ReportResult.AuditRef, scale: number): 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: LH.ReportResult.AuditRef): number;
     /**
      * Get a link to the interactive scoring calculator with the metric values.
      * @param {LH.ReportResult.AuditRef[]} auditRefs
@@ -25,13 +11,25 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
      */
     _getScoringCalculatorHref(auditRefs: LH.ReportResult.AuditRef[]): string;
     /**
-     * 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 {boolean}
+     */
+    _isPerformanceInsight(audit: LH.ReportResult.AuditRef): boolean;
+    /**
+     * 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
-     * @return {'load-opportunity'|'diagnostic'|null}
+     * @param {LH.ReportResult.AuditRef[]} metricAudits
+     * @return {{overallImpact: number, overallLinearImpact: number}}
      */
-    _classifyPerformanceAudit(audit: LH.ReportResult.AuditRef): 'load-opportunity' | 'diagnostic' | null;
+    overallImpact(audit: LH.ReportResult.AuditRef, metricAudits: LH.ReportResult.AuditRef[]): {
+        overallImpact: number;
+        overallLinearImpact: number;
+    };
     /**
      * @param {LH.ReportResult.Category} category
      * @param {Object<string, LH.Result.ReportGroup>} groups

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

@@ -9,6 +9,8 @@
 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 {
   /**
@@ -43,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
@@ -146,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};
   }
 
   /**
@@ -227,53 +211,54 @@ 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) => {
+      // Sort audits by impact, prioritizing those with a higher overallImpact first,
+      // then falling back to linearImpact, guidance level and score.
+      if (a.overallImpact !== b.overallImpact) return b.overallImpact - a.overallImpact;
+
+      if (
+        a.overallImpact === 0 && b.overallImpact === 0 &&
+        a.overallLinearImpact !== b.overallLinearImpact
+      ) {
+        return b.overallLinearImpact - a.overallLinearImpact;
+      }
+
+      if (a.guidanceLevel !== b.guidanceLevel) return b.guidanceLevel - a.guidanceLevel;
+
+      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);
+      return scoreA - scoreB;
+    });
+
+    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);
     }
@@ -281,7 +266,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;
 
@@ -313,6 +298,12 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       element.append(groupEl);
     }
 
+    if (!options || options?.gatherMode === 'navigation') {
+      const el = createGauge(this.dom);
+      updateGauge(this.dom, el, category);
+      this.dom.find('.lh-score__gauge', element).replaceWith(el);
+    }
+
     return element;
   }