From 0dbd30ce160ffb717ad3003b89ee4e11baec28d4 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Thu, 6 Feb 2025 15:26:20 -0800 Subject: [PATCH 1/4] core: set relevant metric based on insight category --- core/audits/insights/insight-audit.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/core/audits/insights/insight-audit.js b/core/audits/insights/insight-audit.js index c5fa6119f413..3c22587fccac 100644 --- 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, }; From d5dfe0cfa19103729e2f9981dafb83a593ed72b5 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Thu, 6 Feb 2025 15:26:57 -0800 Subject: [PATCH 2/4] sample --- .../user-flows/reports/sample-flow-result.json | 18 ++++++++++++++++++ core/test/results/sample_v2.json | 3 +++ 2 files changed, 21 insertions(+) diff --git a/core/test/fixtures/user-flows/reports/sample-flow-result.json b/core/test/fixtures/user-flows/reports/sample-flow-result.json index 0afcef62210f..1f37647d37e1 100644 --- 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": [ @@ -4030,6 +4033,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 +11062,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 +11199,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 +22622,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": [ @@ -22761,6 +22776,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 index 0f33c253c361..2d1032a5684a 100644 --- 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": [ From 4855bbf89de725f2683ca38088bec63395290637 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 7 Feb 2025 10:13:58 -0800 Subject: [PATCH 3/4] need more context --- core/scripts/assert-golden-lhr-unchanged.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/scripts/assert-golden-lhr-unchanged.sh b/core/scripts/assert-golden-lhr-unchanged.sh index 1acf98c71b9a..4553c78b5d5e 100644 --- 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=$? From 0e969b65881161525a3bbaed388441b56256a59f Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 7 Feb 2025 10:24:41 -0800 Subject: [PATCH 4/4] update --- .../fixtures/user-flows/reports/sample-flow-result.json | 6 ++++++ core/test/results/sample_v2.json | 3 +++ 2 files changed, 9 insertions(+) diff --git a/core/test/fixtures/user-flows/reports/sample-flow-result.json b/core/test/fixtures/user-flows/reports/sample-flow-result.json index 1f37647d37e1..562245a3f8e0 100644 --- a/core/test/fixtures/user-flows/reports/sample-flow-result.json +++ b/core/test/fixtures/user-flows/reports/sample-flow-result.json @@ -3968,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": { @@ -22711,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": { diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json index 2d1032a5684a..85e456acc3eb 100644 --- a/core/test/results/sample_v2.json +++ b/core/test/results/sample_v2.json @@ -5963,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": {