Changeset 57083

Timestamp:

11/08/2023 10:30:21 AM (11 months ago)

Author:

swissspidy

Message:

Build/Test Tools: Expand performance test scenarios.

Adds new tests for localized sites as well as the dashboard.
Also amends Server-Timing output to measure memory usage in all scenarios.

Props swissspidy, joemcgill, flixos90, mukesh27, mamaduka.
See #59656.
Fixes #59815.

Location:

trunk

Files:

• .github/workflows/performance.yml (modified) (1 diff)
• tests/performance/compare-results.js (modified) (3 diffs)
• tests/performance/log-results.js (modified) (1 diff)
• tests/performance/playwright.config.js (modified) (1 diff)
• tests/performance/results.js (modified) (1 diff)
• tests/performance/specs/admin-l10n.test.js (added)
• tests/performance/specs/admin.test.js (added)
• tests/performance/specs/home-block-theme-l10n.test.js (added)
• tests/performance/specs/home-block-theme.test.js (modified) (1 diff)
• tests/performance/specs/home-classic-theme-l10n.test.js (added)
• tests/performance/specs/home-classic-theme.test.js (modified) (1 diff)
• tests/performance/wp-content/mu-plugins/server-timing.php (modified) (1 diff)

trunk/.github/workflows/performance.yml

@@ -163 +163 @@
           npm run env:cli -- rewrite structure '/%year%/%monthnum%/%postname%/' --path=/var/www/${{ env.LOCAL_DIR }}
 
+      - name: Install additional languages
+        run: |
+          npm run env:cli -- language core install de_DE --path=/var/www/${{ env.LOCAL_DIR }}
+          npm run env:cli -- language plugin install de_DE --all --path=/var/www/${{ env.LOCAL_DIR }}
+          npm run env:cli -- language theme install de_DE --all --path=/var/www/${{ env.LOCAL_DIR }}
+
       - name: Install MU plugin
         run: |

trunk/tests/performance/compare-results.js

@@ -24 +24 @@
 
 // The list of test suites to log.
-const testSuites = [ 'home-block-theme', 'home-classic-theme' ];
+const testSuites = [
+    'admin',
+    'admin-l10n',
+    'home-block-theme',
+    'home-block-theme-l10n',
+    'home-classic-theme',
+    'home-classic-theme-l10n',
+];
 
 // The current commit's results.
@@ -129 +136 @@
 console.log( 'Note: Due to the nature of how GitHub Actions work, some variance in the results is expected.\n' );
 
+/**
+ * Nicely formats a given value.
+ *
+ * @param {string} metric Metric.
+ * @param {number} value
+ */
+function formatValue( metric, value) {
+    if ( null === value ) {
+        return 'N/A';
+    }
+    if ( 'wpMemoryUsage' === metric ) {
+        return `${ ( value / Math.pow( 10, 6 ) ).toFixed( 2 ) } MB`;
+    }
+
+    return `${ value.toFixed( 2 ) } ms`;
+}
+
 for ( const key of testSuites ) {
     const current = testResults[ key ] || {};
@@ -142 +166 @@
     for ( const [ metric, values ] of Object.entries( current ) ) {
         const value = median( values );
-        const prevValue = median( prev[ metric ] );
+        const prevValue = prev[ metric ] ? median( prev[ metric ] ) : null;
 
-        const delta = value - prevValue;
+        const delta = null !== prevValue ? value - prevValue : 0
         const percentage = ( delta / value ) * 100;
         rows.push( {
             Metric: metric,
-            Before: `${ prevValue.toFixed( 2 ) } ms`,
-            After: `${ value.toFixed( 2 ) } ms`,
-            'Diff abs.': `${ delta.toFixed( 2 ) } ms`,
+            Before: formatValue( metric, prevValue ),
+            After: formatValue( metric, value ),
+            'Diff abs.': formatValue( metric, delta ),
             'Diff %': `${ percentage.toFixed( 2 ) } %`,
         } );

trunk/tests/performance/log-results.js

@@ -12 +12 @@
 // The list of test suites to log.
 const testSuites = [
+    'admin',
+    'admin-l10n',
     'home-block-theme',
+    'home-block-theme-l10n',
     'home-classic-theme',
+    'home-classic-theme-l10n',
 ];
 

trunk/tests/performance/playwright.config.js

@@ -20 +20 @@
     ...baseConfig,
     globalSetup: require.resolve( './config/global-setup.js' ),
-    reporter: process.env.CI
-        ? './config/performance-reporter.js'
-        : [ [ 'list' ], [ './config/performance-reporter.js' ] ],
+    reporter: [ [ 'list' ], [ './config/performance-reporter.js' ] ],
     forbidOnly: !! process.env.CI,
     workers: 1,

trunk/tests/performance/results.js

@@ -9 +9 @@
 
 const testSuites = [
+    'admin',
+    'admin-l10n',
     'home-classic-theme',
+    'home-classic-theme-l10n',
     'home-block-theme',
+    'home-block-theme-l10n',
 ];
 

trunk/tests/performance/specs/home-block-theme.test.js

@@ -42 +42 @@
             const serverTiming = await metrics.getServerTiming();
 
-            for ( const [key, value] of Object.entries( serverTiming ) ) {
+            for ( const [ key, value ] of Object.entries( serverTiming ) ) {
                 results[ camelCaseDashes( key ) ] ??= [];
                 results[ camelCaseDashes( key ) ].push( value );

trunk/tests/performance/specs/home-classic-theme.test.js

@@ -41 +41 @@
             const serverTiming = await metrics.getServerTiming();
 
-            for (const [key, value] of Object.entries( serverTiming ) ) {
+            for ( const [ key, value ] of Object.entries( serverTiming ) ) {
                 results[ camelCaseDashes( key ) ] ??= [];
                 results[ camelCaseDashes( key ) ].push( value );

trunk/tests/performance/wp-content/mu-plugins/server-timing.php

@@ -26 +26 @@
                 $server_timing_values['total'] = $server_timing_values['before-template'] + $server_timing_values['template'];
 
+                /*
+                 * While values passed via Server-Timing are intended to be durations,
+                 * any numeric value can actually be passed.
+                 * This is a nice little trick as it allows to easily get this information in JS.
+                 */
+                $server_timing_values['memory-usage'] = memory_get_usage();
+
                 $header_values = array();
                 foreach ( $server_timing_values as $slug => $value ) {