diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap index 12f61806ea07..ceb3757ed125 100644 --- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap +++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap @@ -25,10 +25,10 @@ Object { "path": "metrics/first-contentful-paint", }, Object { - "path": "metrics/first-meaningful-paint", + "path": "metrics/largest-contentful-paint", }, Object { - "path": "metrics/largest-contentful-paint", + "path": "metrics/first-meaningful-paint", }, Object { "path": "load-fast-enough-for-pwa", @@ -756,48 +756,47 @@ Object { Object { "group": "metrics", "id": "first-contentful-paint", - "weight": 3, + "weight": 15, }, Object { "group": "metrics", - "id": "first-meaningful-paint", - "weight": 1, + "id": "speed-index", + "weight": 15, }, Object { "group": "metrics", "id": "largest-contentful-paint", - "weight": 0, + "weight": 25, }, Object { "group": "metrics", - "id": "speed-index", - "weight": 4, + "id": "interactive", + "weight": 15, }, Object { "group": "metrics", - "id": "interactive", - "weight": 5, + "id": "total-blocking-time", + "weight": 25, }, Object { "group": "metrics", - "id": "first-cpu-idle", - "weight": 2, + "id": "cumulative-layout-shift", + "weight": 5, }, Object { - "group": "metrics", - "id": "max-potential-fid", + "id": "first-cpu-idle", "weight": 0, }, Object { - "id": "cumulative-layout-shift", + "id": "max-potential-fid", "weight": 0, }, Object { - "id": "estimated-input-latency", + "id": "first-meaningful-paint", "weight": 0, }, Object { - "id": "total-blocking-time", + "id": "estimated-input-latency", "weight": 0, }, Object { diff --git a/lighthouse-core/audits/metrics/cumulative-layout-shift.js b/lighthouse-core/audits/metrics/cumulative-layout-shift.js index c4c3a137a331..585a213b2de4 100644 --- a/lighthouse-core/audits/metrics/cumulative-layout-shift.js +++ b/lighthouse-core/audits/metrics/cumulative-layout-shift.js @@ -44,9 +44,11 @@ class CumulativeLayoutShift extends Audit { */ static get defaultOptions() { return { - // TODO(paulirish): Calibrate these - scorePODR: 0.05, - scoreMedian: 0.4, + // Calibrated to assure 0.1 gets a score of 0.9. https://web.dev/cls/#what-is-a-good-cls-score + // This 0.1 target score was determined through both manual evaluation and large-scale analysis. + // see https://www.desmos.com/calculator/wmcxn7zfhc + scorePODR: 0.02, + scoreMedian: 0.2, }; } diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index 42c283405b59..7a006d0550c5 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -179,8 +179,8 @@ const defaultConfig = { 'viewport', 'without-javascript', 'metrics/first-contentful-paint', - 'metrics/first-meaningful-paint', 'metrics/largest-contentful-paint', + 'metrics/first-meaningful-paint', 'load-fast-enough-for-pwa', 'metrics/speed-index', 'screenshot-thumbnails', @@ -388,16 +388,18 @@ const defaultConfig = { 'performance': { title: str_(UIStrings.performanceCategoryTitle), auditRefs: [ - {id: 'first-contentful-paint', weight: 3, group: 'metrics'}, - {id: 'first-meaningful-paint', weight: 1, group: 'metrics'}, - {id: 'largest-contentful-paint', weight: 0, group: 'metrics'}, - {id: 'speed-index', weight: 4, group: 'metrics'}, - {id: 'interactive', weight: 5, group: 'metrics'}, - {id: 'first-cpu-idle', weight: 2, group: 'metrics'}, - {id: 'max-potential-fid', weight: 0, group: 'metrics'}, - {id: 'cumulative-layout-shift', weight: 0}, // intentionally left out of metrics so it won't be displayed - {id: 'estimated-input-latency', weight: 0}, // intentionally left out of metrics so it won't be displayed - {id: 'total-blocking-time', weight: 0}, // intentionally left out of metrics so it won't be displayed + {id: 'first-contentful-paint', weight: 15, group: 'metrics'}, + {id: 'speed-index', weight: 15, group: 'metrics'}, + {id: 'largest-contentful-paint', weight: 25, group: 'metrics'}, + {id: 'interactive', weight: 15, group: 'metrics'}, + {id: 'total-blocking-time', weight: 25, group: 'metrics'}, + {id: 'cumulative-layout-shift', weight: 5, group: 'metrics'}, + // intentionally left out of metrics group so they won't be displayed + {id: 'first-cpu-idle', weight: 0}, + {id: 'max-potential-fid', weight: 0}, + {id: 'first-meaningful-paint', weight: 0}, + {id: 'estimated-input-latency', weight: 0}, + {id: 'render-blocking-resources', weight: 0, group: 'load-opportunities'}, {id: 'uses-responsive-images', weight: 0, group: 'load-opportunities'}, {id: 'offscreen-images', weight: 0, group: 'load-opportunities'}, diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index c0c593088af4..e05fc8cde505 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -132,8 +132,9 @@ class PerformanceCategoryRenderer extends CategoryRenderer { metricAuditsEl.append(..._toggleEl.childNodes); const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics'); - const keyMetrics = metricAudits.filter(a => a.weight >= 3); - const otherMetrics = metricAudits.filter(a => a.weight < 3); + + const keyMetrics = metricAudits.slice(0, 3); + const otherMetrics = metricAudits.slice(3); const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-columns'); const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-column'); diff --git a/lighthouse-core/test/config/config-test.js b/lighthouse-core/test/config/config-test.js index e959064743cc..54a368fe72c0 100644 --- a/lighthouse-core/test/config/config-test.js +++ b/lighthouse-core/test/config/config-test.js @@ -86,7 +86,7 @@ describe('Config', () => { it('uses the default config when no config is provided', () => { const config = new Config(); assert.deepStrictEqual(config.categories, origConfig.categories); - assert.equal(config.audits.length, origConfig.audits.length); + assert.deepStrictEqual(config.audits.map(a => a.path), origConfig.audits); }); it('throws when a passName is used twice', () => { diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 3ea4726827a0..2d6027310d62 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -81,16 +81,6 @@ "numericUnit": "millisecond", "displayValue": "4.0 s" }, - "first-meaningful-paint": { - "id": "first-meaningful-paint", - "title": "First Meaningful Paint", - "description": "First Meaningful Paint measures when the primary content of a page is visible. [Learn more](https://web.dev/first-meaningful-paint).", - "score": 0.51, - "scoreDisplayMode": "numeric", - "numericValue": 3969.136, - "numericUnit": "millisecond", - "displayValue": "4.0 s" - }, "largest-contentful-paint": { "id": "largest-contentful-paint", "title": "Largest Contentful Paint", @@ -101,6 +91,16 @@ "numericUnit": "millisecond", "displayValue": "4.9 s" }, + "first-meaningful-paint": { + "id": "first-meaningful-paint", + "title": "First Meaningful Paint", + "description": "First Meaningful Paint measures when the primary content of a page is visible. [Learn more](https://web.dev/first-meaningful-paint).", + "score": 0.51, + "scoreDisplayMode": "numeric", + "numericValue": 3969.136, + "numericUnit": "millisecond", + "displayValue": "4.0 s" + }, "load-fast-enough-for-pwa": { "id": "load-fast-enough-for-pwa", "title": "Page load is fast enough on mobile networks", @@ -230,7 +230,7 @@ "id": "cumulative-layout-shift", "title": "Cumulative Layout Shift", "description": "Cumulative Layout Shift is the sum of all layout shifts that occurred during a page's load. A layout shift is any movement an element makes once it is visible to the user. All layout shift is recorded, scored, and then aggregated into a cumulative score between 0 and 1; 0 being a perfectly stable page, and >=0.5 being a highly shifting page. [Learn more](https://web.dev/cls).", - "score": 0.48, + "score": 0.21, "scoreDisplayMode": "numeric", "numericValue": 0.42, "numericUnit": "unitless", @@ -3639,49 +3639,48 @@ "auditRefs": [ { "id": "first-contentful-paint", - "weight": 3, + "weight": 15, "group": "metrics" }, { - "id": "first-meaningful-paint", - "weight": 1, + "id": "speed-index", + "weight": 15, "group": "metrics" }, { "id": "largest-contentful-paint", - "weight": 0, + "weight": 25, "group": "metrics" }, { - "id": "speed-index", - "weight": 4, + "id": "interactive", + "weight": 15, "group": "metrics" }, { - "id": "interactive", - "weight": 5, + "id": "total-blocking-time", + "weight": 25, "group": "metrics" }, { - "id": "first-cpu-idle", - "weight": 2, + "id": "cumulative-layout-shift", + "weight": 5, "group": "metrics" }, { - "id": "max-potential-fid", - "weight": 0, - "group": "metrics" + "id": "first-cpu-idle", + "weight": 0 }, { - "id": "cumulative-layout-shift", + "id": "max-potential-fid", "weight": 0 }, { - "id": "estimated-input-latency", + "id": "first-meaningful-paint", "weight": 0 }, { - "id": "total-blocking-time", + "id": "estimated-input-latency", "weight": 0 }, { @@ -3853,7 +3852,7 @@ } ], "id": "performance", - "score": 0.69 + "score": 0.64 }, "accessibility": { "title": "Accessibility", @@ -4525,25 +4524,25 @@ }, { "startTime": 0, - "name": "lh:audit:first-meaningful-paint", + "name": "lh:audit:largest-contentful-paint", "duration": 100, "entryType": "measure" }, { "startTime": 0, - "name": "lh:computed:FirstMeaningfulPaint", + "name": "lh:computed:LargestContentfulPaint", "duration": 100, "entryType": "measure" }, { "startTime": 0, - "name": "lh:audit:largest-contentful-paint", + "name": "lh:audit:first-meaningful-paint", "duration": 100, "entryType": "measure" }, { "startTime": 0, - "name": "lh:computed:LargestContentfulPaint", + "name": "lh:computed:FirstMeaningfulPaint", "duration": 100, "entryType": "measure" }, @@ -5632,15 +5631,15 @@ }, { "values": { - "timeInMs": 3969.136 + "timeInMs": 4927.278 }, - "path": "audits[first-meaningful-paint].displayValue" + "path": "audits[largest-contentful-paint].displayValue" }, { "values": { - "timeInMs": 4927.278 + "timeInMs": 3969.136 }, - "path": "audits[largest-contentful-paint].displayValue" + "path": "audits[first-meaningful-paint].displayValue" }, { "values": { @@ -5673,6 +5672,12 @@ "path": "audits[bootup-time].displayValue" } ], + "lighthouse-core/audits/metrics/largest-contentful-paint.js | title": [ + "audits[largest-contentful-paint].title" + ], + "lighthouse-core/audits/metrics/largest-contentful-paint.js | description": [ + "audits[largest-contentful-paint].description" + ], "lighthouse-core/lib/i18n/i18n.js | firstMeaningfulPaintMetric": [ "audits[first-meaningful-paint].title", "audits[timing-budget].details.items[2].label" @@ -5680,12 +5685,6 @@ "lighthouse-core/audits/metrics/first-meaningful-paint.js | description": [ "audits[first-meaningful-paint].description" ], - "lighthouse-core/audits/metrics/largest-contentful-paint.js | title": [ - "audits[largest-contentful-paint].title" - ], - "lighthouse-core/audits/metrics/largest-contentful-paint.js | description": [ - "audits[largest-contentful-paint].description" - ], "lighthouse-core/audits/load-fast-enough-for-pwa.js | title": [ "audits[load-fast-enough-for-pwa].title" ], @@ -6970,4 +6969,4 @@ } } ] -} +} \ No newline at end of file diff --git a/proto/sample_v2_round_trip.json b/proto/sample_v2_round_trip.json index 638426e23bbe..0ca76463ea2c 100644 --- a/proto/sample_v2_round_trip.json +++ b/proto/sample_v2_round_trip.json @@ -447,7 +447,7 @@ "id": "cumulative-layout-shift", "numericUnit": "unitless", "numericValue": 0.42, - "score": 0.48, + "score": 0.21, "scoreDisplayMode": "numeric", "title": "Cumulative Layout Shift" }, @@ -3798,48 +3798,47 @@ { "group": "metrics", "id": "first-contentful-paint", - "weight": 3.0 + "weight": 15.0 }, { "group": "metrics", - "id": "first-meaningful-paint", - "weight": 1.0 + "id": "speed-index", + "weight": 15.0 }, { "group": "metrics", "id": "largest-contentful-paint", - "weight": 0.0 + "weight": 25.0 }, { "group": "metrics", - "id": "speed-index", - "weight": 4.0 + "id": "interactive", + "weight": 15.0 }, { "group": "metrics", - "id": "interactive", - "weight": 5.0 + "id": "total-blocking-time", + "weight": 25.0 }, { "group": "metrics", - "id": "first-cpu-idle", - "weight": 2.0 + "id": "cumulative-layout-shift", + "weight": 5.0 }, { - "group": "metrics", - "id": "max-potential-fid", + "id": "first-cpu-idle", "weight": 0.0 }, { - "id": "cumulative-layout-shift", + "id": "max-potential-fid", "weight": 0.0 }, { - "id": "estimated-input-latency", + "id": "first-meaningful-paint", "weight": 0.0 }, { - "id": "total-blocking-time", + "id": "estimated-input-latency", "weight": 0.0 }, { @@ -4011,7 +4010,7 @@ } ], "id": "performance", - "score": 0.69, + "score": 0.64, "title": "Performance" }, "pwa": { @@ -4441,25 +4440,25 @@ { "duration": 100.0, "entryType": "measure", - "name": "lh:audit:first-meaningful-paint", + "name": "lh:audit:largest-contentful-paint", "startTime": 0.0 }, { "duration": 100.0, "entryType": "measure", - "name": "lh:computed:FirstMeaningfulPaint", + "name": "lh:computed:LargestContentfulPaint", "startTime": 0.0 }, { "duration": 100.0, "entryType": "measure", - "name": "lh:audit:largest-contentful-paint", + "name": "lh:audit:first-meaningful-paint", "startTime": 0.0 }, { "duration": 100.0, "entryType": "measure", - "name": "lh:computed:LargestContentfulPaint", + "name": "lh:computed:FirstMeaningfulPaint", "startTime": 0.0 }, { @@ -5438,4 +5437,4 @@ "total": 12345.6789 }, "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3358.0 Safari/537.36" -} +} \ No newline at end of file