diff --git a/cli/test/smokehouse/test-definitions/a11y.js b/cli/test/smokehouse/test-definitions/a11y.js index 4e77b894d33a..84b472360a7a 100644 --- a/cli/test/smokehouse/test-definitions/a11y.js +++ b/cli/test/smokehouse/test-definitions/a11y.js @@ -484,7 +484,7 @@ const expectations = { }, }, 'duplicate-id-aria': { - score: null, + score: 1, details: { items: [ { @@ -515,7 +515,7 @@ const expectations = { }, }, 'empty-heading': { - score: null, + score: 1, details: { items: [ { @@ -531,7 +531,7 @@ const expectations = { }, }, 'form-field-multiple-labels': { - score: null, + score: 1, scoreDisplayMode: 'informative', details: { items: [ @@ -625,7 +625,7 @@ const expectations = { scoreDisplayMode: 'notApplicable', }, 'identical-links-same-purpose': { - score: null, + score: 1, details: { items: [ { @@ -739,7 +739,7 @@ const expectations = { }, }, 'landmark-one-main': { - score: null, + score: 1, details: { items: [ { @@ -931,7 +931,7 @@ const expectations = { }, }, 'target-size': { - score: null, + score: 1, details: { items: [ { diff --git a/cli/test/smokehouse/test-definitions/dobetterweb.js b/cli/test/smokehouse/test-definitions/dobetterweb.js index acaa5ac7b042..4e56ee67c940 100644 --- a/cli/test/smokehouse/test-definitions/dobetterweb.js +++ b/cli/test/smokehouse/test-definitions/dobetterweb.js @@ -459,7 +459,7 @@ const expectations = { }, }, 'dom-size': { - score: null, + score: 1, numericValue: 154, details: { items: [ diff --git a/cli/test/smokehouse/test-definitions/perf-budgets.js b/cli/test/smokehouse/test-definitions/perf-budgets.js index 3761a5286437..49f425d70e76 100644 --- a/cli/test/smokehouse/test-definitions/perf-budgets.js +++ b/cli/test/smokehouse/test-definitions/perf-budgets.js @@ -67,7 +67,7 @@ const expectations = { finalDisplayedUrl: 'http://localhost:10200/perf/perf-budgets/load-things.html', audits: { 'resource-summary': { - score: null, + score: 1, details: { items: [ {resourceType: 'total', requestCount: 10, transferSize: '166472±1000'}, @@ -83,7 +83,7 @@ const expectations = { }, }, 'performance-budget': { - score: null, + score: 1, details: { // Undefined items are asserting that the property isn't included in the table item. items: [ diff --git a/cli/test/smokehouse/test-definitions/perf-diagnostics-animations.js b/cli/test/smokehouse/test-definitions/perf-diagnostics-animations.js index b85ad67bd4dc..565cb3d165cd 100644 --- a/cli/test/smokehouse/test-definitions/perf-diagnostics-animations.js +++ b/cli/test/smokehouse/test-definitions/perf-diagnostics-animations.js @@ -21,7 +21,7 @@ const expectations = { finalDisplayedUrl: 'http://localhost:10200/perf/animations.html', audits: { 'non-composited-animations': { - score: null, + score: 1, displayValue: '1 animated element found', details: { items: [ diff --git a/cli/test/smokehouse/test-definitions/perf-frame-metrics.js b/cli/test/smokehouse/test-definitions/perf-frame-metrics.js index 8af251d6a28e..8dda6a9ca2ac 100644 --- a/cli/test/smokehouse/test-definitions/perf-frame-metrics.js +++ b/cli/test/smokehouse/test-definitions/perf-frame-metrics.js @@ -67,7 +67,7 @@ const expectations = { finalDisplayedUrl: 'http://localhost:10200/perf/frame-metrics.html', audits: { 'metrics': { - score: null, + score: 1, details: { type: 'debugdata', items: [ diff --git a/cli/test/smokehouse/test-definitions/perf-trace-elements.js b/cli/test/smokehouse/test-definitions/perf-trace-elements.js index 7c085c86c793..80bf90695e87 100644 --- a/cli/test/smokehouse/test-definitions/perf-trace-elements.js +++ b/cli/test/smokehouse/test-definitions/perf-trace-elements.js @@ -189,7 +189,7 @@ const expectations = { }, }, 'layout-shift-elements': { - score: null, + score: 1, displayValue: '2 elements found', details: { items: [ @@ -228,7 +228,7 @@ const expectations = { }, }, 'long-tasks': { - score: null, + score: 1, details: { items: { 0: { diff --git a/core/audits/audit.js b/core/audits/audit.js index ba82eb62ba7c..4eb8bc88b4b6 100644 --- a/core/audits/audit.js +++ b/core/audits/audit.js @@ -330,6 +330,10 @@ class Audit { * @return {number|null} */ static _normalizeAuditScore(score, scoreDisplayMode, auditId) { + if (scoreDisplayMode === Audit.SCORING_MODES.INFORMATIVE) { + return 1; + } + if (scoreDisplayMode !== Audit.SCORING_MODES.BINARY && scoreDisplayMode !== Audit.SCORING_MODES.NUMERIC && scoreDisplayMode !== Audit.SCORING_MODES.METRIC_SAVINGS) { diff --git a/core/lib/lighthouse-compatibility.js b/core/lib/lighthouse-compatibility.js index 32257245d227..3fa41383f1f4 100644 --- a/core/lib/lighthouse-compatibility.js +++ b/core/lib/lighthouse-compatibility.js @@ -36,6 +36,10 @@ function upgradeLhrForCompatibility(lhr) { audit.scoreDisplayMode = 'notApplicable'; } + if (audit.scoreDisplayMode === 'informative') { + audit.score = 1; + } + if (audit.details) { // Turn `auditDetails.type` of undefined (LHR <4.2) and 'diagnostic' (LHR <5.0) // into 'debugdata' (LHR ≥5.0). diff --git a/core/test/audits/audit-test.js b/core/test/audits/audit-test.js index 3edd756f44e5..c4132adfadcd 100644 --- a/core/test/audits/audit-test.js +++ b/core/test/audits/audit-test.js @@ -87,14 +87,14 @@ describe('Audit', () => { assert.strictEqual(auditResult.score, 1); }); - it('override scoreDisplayMode if set on audit product', () => { + it('switches to INFORMATIVE and set score to 1 if set on audit product', () => { assert.strictEqual(NumericAudit.meta.scoreDisplayMode, Audit.SCORING_MODES.NUMERIC); const auditResult = Audit.generateAuditResult(NumericAudit, { - score: 1, + score: null, scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE, }); assert.strictEqual(auditResult.scoreDisplayMode, Audit.SCORING_MODES.INFORMATIVE); - assert.strictEqual(auditResult.score, null); + assert.strictEqual(auditResult.score, 1); }); it('switches to an ERROR and is not scored if an errorMessage is passed in', () => { 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 da432023247d..326012f8e881 100644 --- a/core/test/fixtures/user-flows/reports/sample-flow-result.json +++ b/core/test/fixtures/user-flows/reports/sample-flow-result.json @@ -104,7 +104,7 @@ "id": "screenshot-thumbnails", "title": "Screenshot Thumbnails", "description": "This is what the load of your site looked like.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "filmstrip", @@ -157,7 +157,7 @@ "id": "final-screenshot", "title": "Final Screenshot", "description": "The last screenshot captured of the pageload.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "screenshot", @@ -229,7 +229,7 @@ "id": "server-response-time", "title": "Initial server response time was short", "description": "Keep the server response time for the main document short because all other requests depend on it. [Learn more about the Time to First Byte metric](https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 19.687999999999988, "numericUnit": "millisecond", @@ -276,7 +276,7 @@ "id": "user-timings", "title": "User Timing marks and measures", "description": "Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. [Learn more about User Timing marks](https://developer.chrome.com/docs/lighthouse/performance/user-timings/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "4 user timings", "details": { @@ -527,7 +527,7 @@ "id": "mainthread-work-breakdown", "title": "Minimizes main-thread work", "description": "Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to minimize main-thread work](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 959.4240000000008, "numericUnit": "millisecond", @@ -592,7 +592,7 @@ "id": "bootup-time", "title": "JavaScript execution time", "description": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to reduce Javascript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 288.41200000000015, "numericUnit": "millisecond", @@ -713,7 +713,7 @@ "id": "diagnostics", "title": "Diagnostics", "description": "Collection of useful page vitals.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "debugdata", @@ -744,7 +744,7 @@ "id": "network-requests", "title": "Network Requests", "description": "Lists the network requests that were made during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -1213,7 +1213,7 @@ "id": "network-rtt", "title": "Network Round Trip Times", "description": "Network round trip times (RTT) have a large impact on performance. If the RTT to an origin is high, it's an indication that servers closer to the user could improve performance. [Learn more about the Round Trip Time](https://hpbn.co/primer-on-latency-and-bandwidth/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 162.331, "numericUnit": "millisecond", @@ -1260,7 +1260,7 @@ "id": "network-server-latency", "title": "Server Backend Latencies", "description": "Server latencies can impact web performance. If the server latency of an origin is high, it's an indication the server is overloaded or has poor backend performance. [Learn more about server response time](https://hpbn.co/primer-on-web-performance/#analyzing-the-resource-waterfall).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 22.397999999999982, "numericUnit": "millisecond", @@ -1307,7 +1307,7 @@ "id": "main-thread-tasks", "title": "Tasks", "description": "Lists the toplevel main thread tasks that executed during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -1361,7 +1361,7 @@ "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 2369, "numericUnit": "millisecond", @@ -1436,7 +1436,7 @@ "id": "resource-summary", "title": "Resources Summary", "description": "Aggregates all network requests and groups them by type", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -1519,7 +1519,7 @@ "id": "third-party-summary", "title": "Minimize third-party usage", "description": "Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. [Learn how to minimize third-party impact](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "Third-party code blocked the main thread for 0 ms", "metricSavings": { @@ -1614,7 +1614,7 @@ "id": "largest-contentful-paint-element", "title": "Largest Contentful Paint element", "description": "This is the largest contentful element painted within the viewport. [Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "1,370 ms", "metricSavings": { @@ -1744,7 +1744,7 @@ "id": "layout-shift-elements", "title": "Avoid large layout shifts", "description": "These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "5 elements found", "metricSavings": { @@ -1781,7 +1781,7 @@ "id": "layout-shifts", "title": "Avoid large layout shifts", "description": "These are the largest layout shifts observed on the page. Each table item represents a single layout shift, and shows the element that shifted the most. Below each item are possible root causes that led to the layout shift. Some of these layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "1 layout shift found", "metricSavings": { @@ -1837,7 +1837,7 @@ "id": "long-tasks", "title": "Avoid long main-thread tasks", "description": "Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. [Learn how to avoid long main-thread tasks](https://web.dev/articles/long-tasks-devtools)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "3 long tasks found", "metricSavings": { @@ -2044,7 +2044,7 @@ "id": "csp-xss", "title": "Ensure CSP is effective against XSS attacks", "description": "A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks. [Learn how to use a CSP to prevent XSS](https://developer.chrome.com/docs/lighthouse/best-practices/csp-xss/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -2086,7 +2086,7 @@ "id": "script-treemap-data", "title": "Script Treemap Data", "description": "Used for treemap app", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "treemap-data", @@ -2869,7 +2869,7 @@ "id": "total-byte-weight", "title": "Avoids enormous network payloads", "description": "Large network payloads cost users real money and are highly correlated with long load times. [Learn how to reduce payload sizes](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 186728, "numericUnit": "byte", @@ -3406,7 +3406,7 @@ "id": "dom-size", "title": "Avoids an excessive DOM size", "description": "A large DOM will increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 70, "numericUnit": "element", @@ -3535,7 +3535,7 @@ "id": "js-libraries", "title": "Detected JavaScript libraries", "description": "All front-end JavaScript libraries detected on the page. [Learn more about this JavaScript library detection diagnostic audit](https://developer.chrome.com/docs/lighthouse/best-practices/js-libraries/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -8628,7 +8628,7 @@ "id": "screenshot-thumbnails", "title": "Screenshot Thumbnails", "description": "This is what the load of your site looked like.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "filmstrip", @@ -8681,7 +8681,7 @@ "id": "final-screenshot", "title": "Final Screenshot", "description": "The last screenshot captured of the pageload.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "screenshot", @@ -8757,7 +8757,7 @@ "id": "user-timings", "title": "User Timing marks and measures", "description": "Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. [Learn more about User Timing marks](https://developer.chrome.com/docs/lighthouse/performance/user-timings/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "5 user timings", "details": { @@ -9000,7 +9000,7 @@ "id": "mainthread-work-breakdown", "title": "Minimizes main-thread work", "description": "Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to minimize main-thread work](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 867.7709999999973, "numericUnit": "millisecond", @@ -9070,7 +9070,7 @@ "id": "bootup-time", "title": "JavaScript execution time", "description": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to reduce Javascript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 352.6489999999996, "numericUnit": "millisecond", @@ -9138,7 +9138,7 @@ "id": "network-requests", "title": "Network Requests", "description": "Lists the network requests that were made during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -9495,7 +9495,7 @@ "id": "network-rtt", "title": "Network Round Trip Times", "description": "Network round trip times (RTT) have a large impact on performance. If the RTT to an origin is high, it's an indication that servers closer to the user could improve performance. [Learn more about the Round Trip Time](https://hpbn.co/primer-on-latency-and-bandwidth/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 49.56, "numericUnit": "millisecond", @@ -9538,7 +9538,7 @@ "id": "network-server-latency", "title": "Server Backend Latencies", "description": "Server latencies can impact web performance. If the server latency of an origin is high, it's an indication the server is overloaded or has poor backend performance. [Learn more about server response time](https://hpbn.co/primer-on-web-performance/#analyzing-the-resource-waterfall).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 581.8929999999999, "numericUnit": "millisecond", @@ -9581,7 +9581,7 @@ "id": "main-thread-tasks", "title": "Tasks", "description": "Lists the toplevel main thread tasks that executed during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -9727,7 +9727,7 @@ "id": "resource-summary", "title": "Resources Summary", "description": "Aggregates all network requests and groups them by type", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -9810,7 +9810,7 @@ "id": "third-party-summary", "title": "Minimize third-party usage", "description": "Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. [Learn how to minimize third-party impact](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "Third-party code blocked the main thread for 0 ms", "metricSavings": { @@ -9973,7 +9973,7 @@ "id": "long-tasks", "title": "Avoid long main-thread tasks", "description": "Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. [Learn how to avoid long main-thread tasks](https://web.dev/articles/long-tasks-devtools)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "1 long task found", "metricSavings": { @@ -10119,7 +10119,7 @@ "id": "script-treemap-data", "title": "Script Treemap Data", "description": "Used for treemap app", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "treemap-data", @@ -10299,7 +10299,7 @@ "id": "total-byte-weight", "title": "Avoids enormous network payloads", "description": "Large network payloads cost users real money and are highly correlated with long load times. [Learn how to reduce payload sizes](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 66067, "numericUnit": "byte", @@ -10763,7 +10763,7 @@ "id": "work-during-interaction", "title": "Minimizes work during key interaction", "description": "This is the thread-blocking work occurring during the Interaction to Next Paint measurement. [Learn more about the Interaction to Next Paint metric](https://web.dev/articles/inp).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "60 ms spent on event 'keypress'", "metricSavings": { @@ -14869,7 +14869,7 @@ "id": "dom-size", "title": "Avoids an excessive DOM size", "description": "A large DOM will increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 361, "numericUnit": "element", @@ -14959,7 +14959,7 @@ "id": "js-libraries", "title": "Detected JavaScript libraries", "description": "All front-end JavaScript libraries detected on the page. [Learn more about this JavaScript library detection diagnostic audit](https://developer.chrome.com/docs/lighthouse/best-practices/js-libraries/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -18153,7 +18153,7 @@ "id": "screenshot-thumbnails", "title": "Screenshot Thumbnails", "description": "This is what the load of your site looked like.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "filmstrip", @@ -18206,7 +18206,7 @@ "id": "final-screenshot", "title": "Final Screenshot", "description": "The last screenshot captured of the pageload.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "screenshot", @@ -18282,7 +18282,7 @@ "id": "server-response-time", "title": "Initial server response time was short", "description": "Keep the server response time for the main document short because all other requests depend on it. [Learn more about the Time to First Byte metric](https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 10.263, "numericUnit": "millisecond", @@ -18329,7 +18329,7 @@ "id": "user-timings", "title": "User Timing marks and measures", "description": "Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. [Learn more about User Timing marks](https://developer.chrome.com/docs/lighthouse/performance/user-timings/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "4 user timings", "details": { @@ -18580,7 +18580,7 @@ "id": "mainthread-work-breakdown", "title": "Minimizes main-thread work", "description": "Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to minimize main-thread work](https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 454.39200000000045, "numericUnit": "millisecond", @@ -18645,7 +18645,7 @@ "id": "bootup-time", "title": "JavaScript execution time", "description": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn how to reduce Javascript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 169.10399999999998, "numericUnit": "millisecond", @@ -18772,7 +18772,7 @@ "id": "diagnostics", "title": "Diagnostics", "description": "Collection of useful page vitals.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "debugdata", @@ -18803,7 +18803,7 @@ "id": "network-requests", "title": "Network Requests", "description": "Lists the network requests that were made during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -19238,7 +19238,7 @@ "id": "network-rtt", "title": "Network Round Trip Times", "description": "Network round trip times (RTT) have a large impact on performance. If the RTT to an origin is high, it's an indication that servers closer to the user could improve performance. [Learn more about the Round Trip Time](https://hpbn.co/primer-on-latency-and-bandwidth/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 0.0468, "numericUnit": "millisecond", @@ -19285,7 +19285,7 @@ "id": "network-server-latency", "title": "Server Backend Latencies", "description": "Server latencies can impact web performance. If the server latency of an origin is high, it's an indication the server is overloaded or has poor backend performance. [Learn more about server response time](https://hpbn.co/primer-on-web-performance/#analyzing-the-resource-waterfall).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 3.5377, "numericUnit": "millisecond", @@ -19332,7 +19332,7 @@ "id": "main-thread-tasks", "title": "Tasks", "description": "Lists the toplevel main thread tasks that executed during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -19378,7 +19378,7 @@ "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 925, "numericUnit": "millisecond", @@ -19453,7 +19453,7 @@ "id": "resource-summary", "title": "Resources Summary", "description": "Aggregates all network requests and groups them by type", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -19536,7 +19536,7 @@ "id": "third-party-summary", "title": "Minimize third-party usage", "description": "Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. [Learn how to minimize third-party impact](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "Third-party code blocked the main thread for 0 ms", "metricSavings": { @@ -19627,7 +19627,7 @@ "id": "largest-contentful-paint-element", "title": "Largest Contentful Paint element", "description": "This is the largest contentful element painted within the viewport. [Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "1,800 ms", "metricSavings": { @@ -19789,7 +19789,7 @@ "id": "long-tasks", "title": "Avoid long main-thread tasks", "description": "Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. [Learn how to avoid long main-thread tasks](https://web.dev/articles/long-tasks-devtools)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "2 long tasks found", "metricSavings": { @@ -20002,7 +20002,7 @@ "id": "csp-xss", "title": "Ensure CSP is effective against XSS attacks", "description": "A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks. [Learn how to use a CSP to prevent XSS](https://developer.chrome.com/docs/lighthouse/best-practices/csp-xss/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -20044,7 +20044,7 @@ "id": "script-treemap-data", "title": "Script Treemap Data", "description": "Used for treemap app", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "treemap-data", @@ -20864,7 +20864,7 @@ "id": "total-byte-weight", "title": "Avoids enormous network payloads", "description": "Large network payloads cost users real money and are highly correlated with long load times. [Learn how to reduce payload sizes](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 127688, "numericUnit": "byte", @@ -21471,7 +21471,7 @@ "id": "dom-size", "title": "Avoids an excessive DOM size", "description": "A large DOM will increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 81, "numericUnit": "element", @@ -21600,7 +21600,7 @@ "id": "js-libraries", "title": "Detected JavaScript libraries", "description": "All front-end JavaScript libraries detected on the page. [Learn more about this JavaScript library detection diagnostic audit](https://developer.chrome.com/docs/lighthouse/best-practices/js-libraries/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json index a55affd646c6..d64e234e439f 100644 --- a/core/test/results/sample_v2.json +++ b/core/test/results/sample_v2.json @@ -118,7 +118,7 @@ "id": "screenshot-thumbnails", "title": "Screenshot Thumbnails", "description": "This is what the load of your site looked like.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "filmstrip", @@ -171,7 +171,7 @@ "id": "final-screenshot", "title": "Final Screenshot", "description": "The last screenshot captured of the pageload.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "screenshot", @@ -388,7 +388,7 @@ "id": "server-response-time", "title": "Initial server response time was short", "description": "Keep the server response time for the main document short because all other requests depend on it. [Learn more about the Time to First Byte metric](https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 568.468, "numericUnit": "millisecond", @@ -435,7 +435,7 @@ "id": "user-timings", "title": "User Timing marks and measures", "description": "Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. [Learn more about User Timing marks](https://developer.chrome.com/docs/lighthouse/performance/user-timings/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "42 user timings", "details": { @@ -704,7 +704,7 @@ "id": "critical-request-chains", "title": "Avoid chaining critical requests", "description": "The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. [Learn how to avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "12 chains found", "details": { @@ -1290,7 +1290,7 @@ "id": "diagnostics", "title": "Diagnostics", "description": "Collection of useful page vitals.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "debugdata", @@ -1321,7 +1321,7 @@ "id": "network-requests", "title": "Network Requests", "description": "Lists the network requests that were made during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -1864,7 +1864,7 @@ "id": "network-rtt", "title": "Network Round Trip Times", "description": "Network round trip times (RTT) have a large impact on performance. If the RTT to an origin is high, it's an indication that servers closer to the user could improve performance. [Learn more about the Round Trip Time](https://hpbn.co/primer-on-latency-and-bandwidth/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 12.662, "numericUnit": "millisecond", @@ -1903,7 +1903,7 @@ "id": "network-server-latency", "title": "Server Backend Latencies", "description": "Server latencies can impact web performance. If the server latency of an origin is high, it's an indication the server is overloaded or has poor backend performance. [Learn more about server response time](https://hpbn.co/primer-on-web-performance/#analyzing-the-resource-waterfall).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 582.2760000000001, "numericUnit": "millisecond", @@ -1942,7 +1942,7 @@ "id": "main-thread-tasks", "title": "Tasks", "description": "Lists the toplevel main thread tasks that executed during page load.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -2032,7 +2032,7 @@ "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 8191, "numericUnit": "millisecond", @@ -2103,7 +2103,7 @@ "id": "performance-budget", "title": "Performance budget", "description": "Keep the quantity and size of network requests under the targets set by the provided performance budget. [Learn more about performance budgets](https://developers.google.com/web/tools/lighthouse/audits/budgets).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -2210,7 +2210,7 @@ "id": "timing-budget", "title": "Timing budget", "description": "Set a timing budget to help you keep an eye on the performance of your site. Performant sites load fast and respond to user input events quickly. [Learn more about performance budgets](https://developers.google.com/web/tools/lighthouse/audits/budgets).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -2266,7 +2266,7 @@ "id": "resource-summary", "title": "Resources Summary", "description": "Aggregates all network requests and groups them by type", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -2349,7 +2349,7 @@ "id": "third-party-summary", "title": "Minimize third-party usage", "description": "Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. [Learn how to minimize third-party impact](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "Third-party code blocked the main thread for 0 ms", "metricSavings": { @@ -2642,7 +2642,7 @@ "id": "long-tasks", "title": "Avoid long main-thread tasks", "description": "Lists the longest tasks on the main thread, useful for identifying worst contributors to input delay. [Learn how to avoid long main-thread tasks](https://web.dev/articles/long-tasks-devtools)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "2 long tasks found", "metricSavings": { @@ -2751,7 +2751,7 @@ "id": "non-composited-animations", "title": "Avoid non-composited animations", "description": "Animations which are not composited can be janky and increase CLS. [Learn how to avoid non-composited animations](https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "displayValue": "1 animated element found", "metricSavings": { @@ -2975,7 +2975,7 @@ "id": "csp-xss", "title": "Ensure CSP is effective against XSS attacks", "description": "A strong Content Security Policy (CSP) significantly reduces the risk of cross-site scripting (XSS) attacks. [Learn how to use a CSP to prevent XSS](https://developer.chrome.com/docs/lighthouse/best-practices/csp-xss/)", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", @@ -3017,7 +3017,7 @@ "id": "script-treemap-data", "title": "Script Treemap Data", "description": "Used for treemap app", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "treemap-data", @@ -4388,7 +4388,7 @@ "id": "total-byte-weight", "title": "Avoids enormous network payloads", "description": "Large network payloads cost users real money and are highly correlated with long load times. [Learn how to reduce payload sizes](https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 1437431, "numericUnit": "byte", @@ -5180,7 +5180,7 @@ "id": "dom-size", "title": "Avoids an excessive DOM size", "description": "A large DOM will increase memory usage, cause longer [style calculations](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations), and produce costly [layout reflows](https://developers.google.com/speed/articles/reflow). [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "numericValue": 153, "numericUnit": "element", @@ -5368,7 +5368,7 @@ "id": "js-libraries", "title": "Detected JavaScript libraries", "description": "All front-end JavaScript libraries detected on the page. [Learn more about this JavaScript library detection diagnostic audit](https://developer.chrome.com/docs/lighthouse/best-practices/js-libraries/).", - "score": null, + "score": 1, "scoreDisplayMode": "informative", "details": { "type": "table", diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index 284422e4a1ca..1d49145b4ce0 100644 --- a/report/renderer/performance-category-renderer.js +++ b/report/renderer/performance-category-renderer.js @@ -245,14 +245,11 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { } diagnosticAudits.sort((a, b) => { - // If the score display mode is "metricSavings", the `score` will be a coarse indicator of the overall impact. + // 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); + const scoreA = a.auditRef.result.score || 0; + const scoreB = b.auditRef.result.score || 0; if (scoreA !== scoreB) return scoreA - scoreB; // If there is a metric filter applied, we should sort by the impact to that specific metric.