Changeset 56399

Timestamp:

08/16/2023 08:46:22 AM (9 months ago)

Author:

swissspidy

Message:

Build/Test Tools: Measure additional load time metrics in performance tests.

Three new metrics are being collected and reported as part of this change:

• Time To First Byte (TTFB) - the time between the request for a resource and when the first byte of a response begins to arrive
• Largest Contentful Paint (LCP) — the render time of the largest image or text block visible within the viewport
• The difference between the two (LCP minus TTFB)

Props joemcgill, flixos90, oandregal, mukesh27, youknowriad, swissspidy.
Fixes #58360.

Location:

trunk/tests/performance

Files:

• specs/home-block-theme.test.js (modified) (4 diffs)
• specs/home-classic-theme.test.js (modified) (3 diffs)
• utils.js (modified) (2 diffs)

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

@@ -4 +4 @@
 const { basename, join } = require( 'path' );
 const { writeFileSync } = require( 'fs' );
-const { getResultsFilename } = require( './../utils' );
+const {
+    getResultsFilename,
+    getTimeToFirstByte,
+    getLargestContentfulPaint,
+} = require( './../utils' );
 
 /**
@@ -16 +20 @@
         wpTemplate: [],
         wpTotal: [],
+        timeToFirstByte: [],
+        largestContentfulPaint: [],
+        lcpMinusTtfb: [],
     };
 
@@ -23 +30 @@
 
     afterAll( async () => {
-        const resultsFilename = getResultsFilename( basename( __filename, '.js' ) );
+        const resultsFilename = getResultsFilename(
+            basename( __filename, '.js' )
+        );
         writeFileSync(
             join( __dirname, resultsFilename ),
@@ -41 +50 @@
 
             results.wpBeforeTemplate.push(
-                navigationTiming.serverTiming[0].duration
+                navigationTiming.serverTiming[ 0 ].duration
             );
             results.wpTemplate.push(
-                navigationTiming.serverTiming[1].duration
+                navigationTiming.serverTiming[ 1 ].duration
             );
-            results.wpTotal.push(
-                navigationTiming.serverTiming[2].duration
-            );
+            results.wpTotal.push( navigationTiming.serverTiming[ 2 ].duration );
+
+            const ttfb = await getTimeToFirstByte();
+            const lcp = await getLargestContentfulPaint();
+
+            results.timeToFirstByte.push( ttfb );
+            results.largestContentfulPaint.push( lcp );
+            results.lcpMinusTtfb.push( lcp - ttfb );
         }
     } );

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

@@ -5 +5 @@
 const { writeFileSync } = require( 'fs' );
 const { exec } = require( 'child_process' );
-const { getResultsFilename } = require( './../utils' );
+const {
+    getResultsFilename,
+    getTimeToFirstByte,
+    getLargestContentfulPaint,
+} = require( './../utils' );
 
 /**
@@ -17 +21 @@
         wpTemplate: [],
         wpTotal: [],
+        timeToFirstByte: [],
+        largestContentfulPaint: [],
+        lcpMinusTtfb: [],
     };
 
     beforeAll( async () => {
         await activateTheme( 'twentytwentyone' );
-        await exec( 'npm run env:cli -- menu location assign all-pages primary' );
+        await exec(
+            'npm run env:cli -- menu location assign all-pages primary'
+        );
     } );
 
     afterAll( async () => {
-        const resultsFilename = getResultsFilename( basename( __filename, '.js' ) );
+        const resultsFilename = getResultsFilename(
+            basename( __filename, '.js' )
+        );
         writeFileSync(
             join( __dirname, resultsFilename ),
@@ -43 +54 @@
 
             results.wpBeforeTemplate.push(
-                navigationTiming.serverTiming[0].duration
+                navigationTiming.serverTiming[ 0 ].duration
             );
             results.wpTemplate.push(
-                navigationTiming.serverTiming[1].duration
+                navigationTiming.serverTiming[ 1 ].duration
             );
-            results.wpTotal.push(
-                navigationTiming.serverTiming[2].duration
-            );
+            results.wpTotal.push( navigationTiming.serverTiming[ 2 ].duration );
+
+            const ttfb = await getTimeToFirstByte();
+            const lcp = await getLargestContentfulPaint();
+
+            results.timeToFirstByte.push( ttfb );
+            results.largestContentfulPaint.push( lcp );
+            results.lcpMinusTtfb.push( lcp - ttfb );
         }
     } );

trunk/tests/performance/utils.js

@@ -22 +22 @@
  */
 function getResultsFilename( fileName ) {
-    const prefixArg = process.argv.find( ( arg ) => arg.startsWith( '--prefix' ) );
-    const fileNamePrefix = prefixArg ? `${prefixArg.split( '=' )[1]}-` : '';
+    const prefixArg = process.argv.find( ( arg ) =>
+        arg.startsWith( '--prefix' )
+    );
+    const fileNamePrefix = prefixArg ? `${ prefixArg.split( '=' )[ 1 ] }-` : '';
     const resultsFilename = fileNamePrefix + fileName + '.results.json';
     return resultsFilename;
+}
+
+/**
+ * Returns time to first byte (TTFB) using the Navigation Timing API.
+ *
+ * @see https://web.dev/ttfb/#measure-ttfb-in-javascript
+ *
+ * @return {Promise<number>}
+ */
+async function getTimeToFirstByte() {
+    return page.evaluate( () => {
+        const { responseStart, startTime } =
+            performance.getEntriesByType( 'navigation' )[ 0 ];
+        return responseStart - startTime;
+    } );
+}
+
+/**
+ * Returns the Largest Contentful Paint (LCP) value using the dedicated API.
+ *
+ * @see https://w3c.github.io/largest-contentful-paint/
+ * @see https://web.dev/lcp/#measure-lcp-in-javascript
+ *
+ * @return {Promise<number>}
+ */
+async function getLargestContentfulPaint() {
+    return page.evaluate(
+        () =>
+            new Promise( ( resolve ) => {
+                new PerformanceObserver( ( entryList ) => {
+                    const entries = entryList.getEntries();
+                    // The last entry is the largest contentful paint.
+                    const largestPaintEntry = entries.at( -1 );
+
+                    resolve( largestPaintEntry?.startTime || 0 );
+                } ).observe( {
+                    type: 'largest-contentful-paint',
+                    buffered: true,
+                } );
+            } )
+    );
 }
 
@@ -31 +74 @@
     median,
     getResultsFilename,
+    getTimeToFirstByte,
+    getLargestContentfulPaint,
 };