From d9d08008138cd80a7740e40171f650799f75fc32 Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Wed, 8 Jan 2025 11:55:04 +0100 Subject: [PATCH 1/3] Use shorter column names --- env/tests/performance/cli/results.js | 39 ++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/env/tests/performance/cli/results.js b/env/tests/performance/cli/results.js index 3f88752..1d79dac 100644 --- a/env/tests/performance/cli/results.js +++ b/env/tests/performance/cli/results.js @@ -201,6 +201,41 @@ function formatValue( value, key ) { return `${ value.toFixed( 2 ) } ms`; } +/** + * Format key for readability. + * + * @param {string} key Key. + * @return {string} Formatted key. + */ +function formatKey( key ) { + switch ( key ) { + // Server-Timing. + + case 'wpDbQueries': + return '# DB Queries'; + case 'wpMemoryUsage': + return 'Memory'; + case 'wpBeforeTemplate': + return 'Before Template'; + case 'wpTemplate': + return 'Template'; + case 'wpTotal': + return 'WP Total'; + + // Web vitals. + + case 'timeToFirstByte': + return 'TTFB'; + case 'lcpMinusTtfb': + return 'LCP - TTFB'; + case 'largestContentfulPaint': + return 'LCP'; + + default: + return key; + } +} + for ( const [ url, results ] of Object.entries( afterStats ) ) { const prevStat = beforeStats[ url ]; @@ -239,7 +274,7 @@ for ( const [ url, results ] of Object.entries( afterStats ) ) { ! delta || Math.abs( delta ) <= DELTA_VARIANCE ) { - diffResult[ key ] = formatValue( + diffResult[ formatKey( key ) ] = formatValue( /** @type {number} */ ( value ), key ); @@ -248,7 +283,7 @@ for ( const [ url, results ] of Object.entries( afterStats ) ) { const prefix = delta > 0 ? '+' : ''; - diffResult[ key ] = `${ formatValue( + diffResult[ formatKey( key ) ] = `${ formatValue( value, key ) } (${ prefix }${ formatValue( From 6a3df4789629abc50c84061c885662d87b29d1ba Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Wed, 8 Jan 2025 11:55:21 +0100 Subject: [PATCH 2/3] Fix formatting --- env/blueprints/setup.json | 118 +++++++++--------- .../config/performance-reporter.ts | 14 +-- env/tests/performance/specs/main.spec.ts | 18 +-- 3 files changed, 72 insertions(+), 78 deletions(-) diff --git a/env/blueprints/setup.json b/env/blueprints/setup.json index 4cc2949..2e3cce5 100644 --- a/env/blueprints/setup.json +++ b/env/blueprints/setup.json @@ -1,63 +1,59 @@ { - "$schema": "https://playground.wordpress.net/blueprint-schema.json", - "landingPage": "/wp-admin/", - "preferredVersions": { - "php": "8.0", - "wp": "latest" - }, - "phpExtensionBundles": [ - "kitchen-sink" - ], - "features": { - "networking": false - }, - "plugins": [ - "performance-lab" - ], - "constants": { - "WP_HTTP_BLOCK_EXTERNAL": "true" - }, - "login": true, - "siteOptions": { - "permalink_structure": "/%postname%/" - }, - "steps": [ - { - "step": "defineWpConfigConsts", - "consts": { - "DISABLE_WP_CRON": true - } - }, - { - "step": "installTheme", - "themeData": { - "resource": "wordpress.org/themes", - "slug": "twentytwentyone" - }, - "ifAlreadyInstalled": "skip", - "options": { - "activate": true, - "importStarterContent": false - } - }, - { - "step": "installTheme", - "themeData": { - "resource": "wordpress.org/themes", - "slug": "twentytwentythree" - }, - "ifAlreadyInstalled": "skip", - "options": { - "activate": false, - "importStarterContent": false - } - }, - { - "step": "importWxr", - "file": { - "resource": "url", - "url": "https://raw.githubusercontent.com/WordPress/theme-test-data/b47acf980696897936265182cb684dca648476c7/themeunittestdata.wordpress.xml" - } - } - ] + "$schema": "https://playground.wordpress.net/blueprint-schema.json", + "landingPage": "/wp-admin/", + "preferredVersions": { + "php": "8.0", + "wp": "latest" + }, + "phpExtensionBundles": [ "kitchen-sink" ], + "features": { + "networking": false + }, + "plugins": [ "performance-lab" ], + "constants": { + "WP_HTTP_BLOCK_EXTERNAL": "true" + }, + "login": true, + "siteOptions": { + "permalink_structure": "/%postname%/" + }, + "steps": [ + { + "step": "defineWpConfigConsts", + "consts": { + "DISABLE_WP_CRON": true + } + }, + { + "step": "installTheme", + "themeData": { + "resource": "wordpress.org/themes", + "slug": "twentytwentyone" + }, + "ifAlreadyInstalled": "skip", + "options": { + "activate": true, + "importStarterContent": false + } + }, + { + "step": "installTheme", + "themeData": { + "resource": "wordpress.org/themes", + "slug": "twentytwentythree" + }, + "ifAlreadyInstalled": "skip", + "options": { + "activate": false, + "importStarterContent": false + } + }, + { + "step": "importWxr", + "file": { + "resource": "url", + "url": "https://raw.githubusercontent.com/WordPress/theme-test-data/b47acf980696897936265182cb684dca648476c7/themeunittestdata.wordpress.xml" + } + } + ] } diff --git a/env/tests/performance/config/performance-reporter.ts b/env/tests/performance/config/performance-reporter.ts index beb9b2f..de1800b 100644 --- a/env/tests/performance/config/performance-reporter.ts +++ b/env/tests/performance/config/performance-reporter.ts @@ -36,14 +36,14 @@ class PerformanceReporter implements Reporter { ); if ( performanceResults?.body ) { - const resultsByUrl = JSON.parse( performanceResults.body.toString( 'utf-8' ) ) as Record< string, Record< string, number[] > >; + const resultsByUrl = JSON.parse( + performanceResults.body.toString( 'utf-8' ) + ) as Record< string, Record< string, number[] > >; - for ( const [url, results ] of Object.entries(resultsByUrl)) { + for ( const [ url, results ] of Object.entries( resultsByUrl ) ) { this.allResults[ url ] ??= []; - this.allResults[ url ].push( - results - ); + this.allResults[ url ].push( results ); } } } @@ -68,9 +68,7 @@ class PerformanceReporter implements Reporter { console.log( `Status: ${ result.status }` ); } - for ( const [ url, results ] of Object.entries( - this.allResults - ) ) { + for ( const [ url, results ] of Object.entries( this.allResults ) ) { console.log( `\nURL: \`${ url }\`\n` ); console.table( results.map( ( r ) => diff --git a/env/tests/performance/specs/main.spec.ts b/env/tests/performance/specs/main.spec.ts index b34edce..3996e75 100644 --- a/env/tests/performance/specs/main.spec.ts +++ b/env/tests/performance/specs/main.spec.ts @@ -43,22 +43,22 @@ test.describe( 'Tests', () => { const serverTiming = await metrics.getServerTiming(); - results[url] ??= {}; + results[ url ] ??= {}; for ( const [ key, value ] of Object.entries( serverTiming ) ) { - results[url][ camelCaseDashes( key ) ] ??= []; - results[url][ camelCaseDashes( key ) ].push( value ); + results[ url ][ camelCaseDashes( key ) ] ??= []; + results[ url ][ camelCaseDashes( key ) ].push( value ); } const ttfb = await metrics.getTimeToFirstByte(); const lcp = await metrics.getLargestContentfulPaint(); - results[url].largestContentfulPaint ??= []; - results[url].largestContentfulPaint.push( lcp ); - results[url].timeToFirstByte ??= []; - results[url].timeToFirstByte.push( ttfb ); - results[url].lcpMinusTtfb ??= []; - results[url].lcpMinusTtfb.push( lcp - ttfb ); + results[ url ].largestContentfulPaint ??= []; + results[ url ].largestContentfulPaint.push( lcp ); + results[ url ].timeToFirstByte ??= []; + results[ url ].timeToFirstByte.push( ttfb ); + results[ url ].lcpMinusTtfb ??= []; + results[ url ].lcpMinusTtfb.push( lcp - ttfb ); } ); } } From bfc3cdc4d38518514e383a8e0f6c0faa4199c6de Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Wed, 8 Jan 2025 12:08:03 +0100 Subject: [PATCH 3/3] Even shorter --- env/tests/performance/cli/results.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/env/tests/performance/cli/results.js b/env/tests/performance/cli/results.js index 1d79dac..db2ff63 100644 --- a/env/tests/performance/cli/results.js +++ b/env/tests/performance/cli/results.js @@ -212,7 +212,7 @@ function formatKey( key ) { // Server-Timing. case 'wpDbQueries': - return '# DB Queries'; + return 'DB Queries'; case 'wpMemoryUsage': return 'Memory'; case 'wpBeforeTemplate':