core: set relevant metric based on insight category (#16325)

GoogleChrome · Feb 7, 2025 · 27655e8 · 27655e8
1 parent af1ae29
commit 27655e8
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/core/audits/insights/insight-audit.js b/core/audits/insights/insight-audit.js
@@ -52,11 +52,22 @@ async function adaptInsightToAuditProduct(artifacts, context, insightName, creat
     };
   }
 
+  // This hack is to add metric adorners if an insight category links it to a metric,
+  // but doesn't output a metric savings for that metric.
+  let metricSavings = insight.metricSavings;
+  if (insight.category === 'INP' && !metricSavings?.INP) {
+    metricSavings = {...metricSavings, INP: /** @type {any} */ (0)};
+  } else if (insight.category === 'CLS' && !metricSavings?.CLS) {
+    metricSavings = {...metricSavings, CLS: /** @type {any} */ (0)};
+  } else if (insight.category === 'LCP' && !metricSavings?.LCP) {
+    metricSavings = {...metricSavings, LCP: /** @type {any} */ (0)};
+  }
+
   return {
     scoreDisplayMode:
       insight.metricSavings ? Audit.SCORING_MODES.METRIC_SAVINGS : Audit.SCORING_MODES.NUMERIC,
     score: insight.shouldShow ? 0 : 1,
-    metricSavings: insight.metricSavings,
+    metricSavings,
     warnings: insight.warnings,
     details,
   };

diff --git a/core/scripts/assert-golden-lhr-unchanged.sh b/core/scripts/assert-golden-lhr-unchanged.sh
@@ -42,7 +42,7 @@ node "$pwd/cleanup-LHR-for-diff.js" "$goldenLHRPath"
 node "$pwd/cleanup-LHR-for-diff.js" "$freshLHRPath"
 
 colorText "Diff'ing golden LHR against the fresh LHR" "$purple"
-git --no-pager diff --color=always --no-index "$goldenLHRPath" "$freshLHRPath"
+git --no-pager diff -U30 --color=always --no-index "$goldenLHRPath" "$freshLHRPath"
 
 # Use the return value from last command
 retVal=$?

diff --git a/core/test/fixtures/user-flows/reports/sample-flow-result.json b/core/test/fixtures/user-flows/reports/sample-flow-result.json
@@ -3879,6 +3879,9 @@
             "description": "A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).",
             "score": 1,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "INP": 0
+            },
             "details": {
               "type": "table",
               "headings": [
@@ -3965,6 +3968,9 @@
             "description": "Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)",
             "score": 0,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "LCP": 0
+            },
             "details": {
               "type": "checklist",
               "items": {
@@ -4030,6 +4036,9 @@
             "description": "Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.",
             "score": 1,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "INP": 0
+            },
             "details": {
               "type": "table",
               "headings": [
@@ -11056,6 +11065,9 @@
             "description": "A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).",
             "score": 1,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "INP": 0
+            },
             "details": {
               "type": "table",
               "headings": [
@@ -11190,6 +11202,9 @@
             "description": "Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.",
             "score": 1,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "INP": 0
+            },
             "details": {
               "type": "table",
               "headings": [
@@ -22610,6 +22625,9 @@
             "description": "A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).",
             "score": 1,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "INP": 0
+            },
             "details": {
               "type": "table",
               "headings": [
@@ -22696,6 +22714,9 @@
             "description": "Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)",
             "score": 0,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "LCP": 0
+            },
             "details": {
               "type": "checklist",
               "items": {
@@ -22761,6 +22782,9 @@
             "description": "Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.",
             "score": 1,
             "scoreDisplayMode": "numeric",
+            "metricSavings": {
+              "INP": 0
+            },
             "details": {
               "type": "table",
               "headings": [

diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json
@@ -5874,6 +5874,9 @@
       "description": "A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).",
       "score": 1,
       "scoreDisplayMode": "numeric",
+      "metricSavings": {
+        "INP": 0
+      },
       "details": {
         "type": "table",
         "headings": [
@@ -5960,6 +5963,9 @@
       "description": "Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)",
       "score": 0,
       "scoreDisplayMode": "numeric",
+      "metricSavings": {
+        "LCP": 0
+      },
       "details": {
         "type": "checklist",
         "items": {