Changeset 56399
- Timestamp:
- 08/16/2023 08:46:22 AM (18 months ago)
- Location:
- trunk/tests/performance
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/tests/performance/specs/home-block-theme.test.js
r55459 r56399 4 4 const { basename, join } = require( 'path' ); 5 5 const { writeFileSync } = require( 'fs' ); 6 const { getResultsFilename } = require( './../utils' ); 6 const { 7 getResultsFilename, 8 getTimeToFirstByte, 9 getLargestContentfulPaint, 10 } = require( './../utils' ); 7 11 8 12 /** … … 16 20 wpTemplate: [], 17 21 wpTotal: [], 22 timeToFirstByte: [], 23 largestContentfulPaint: [], 24 lcpMinusTtfb: [], 18 25 }; 19 26 … … 23 30 24 31 afterAll( async () => { 25 const resultsFilename = getResultsFilename( basename( __filename, '.js' ) ); 32 const resultsFilename = getResultsFilename( 33 basename( __filename, '.js' ) 34 ); 26 35 writeFileSync( 27 36 join( __dirname, resultsFilename ), … … 41 50 42 51 results.wpBeforeTemplate.push( 43 navigationTiming.serverTiming[ 0].duration52 navigationTiming.serverTiming[ 0 ].duration 44 53 ); 45 54 results.wpTemplate.push( 46 navigationTiming.serverTiming[ 1].duration55 navigationTiming.serverTiming[ 1 ].duration 47 56 ); 48 results.wpTotal.push( 49 navigationTiming.serverTiming[2].duration 50 ); 57 results.wpTotal.push( navigationTiming.serverTiming[ 2 ].duration ); 58 59 const ttfb = await getTimeToFirstByte(); 60 const lcp = await getLargestContentfulPaint(); 61 62 results.timeToFirstByte.push( ttfb ); 63 results.largestContentfulPaint.push( lcp ); 64 results.lcpMinusTtfb.push( lcp - ttfb ); 51 65 } 52 66 } ); -
trunk/tests/performance/specs/home-classic-theme.test.js
r55459 r56399 5 5 const { writeFileSync } = require( 'fs' ); 6 6 const { exec } = require( 'child_process' ); 7 const { getResultsFilename } = require( './../utils' ); 7 const { 8 getResultsFilename, 9 getTimeToFirstByte, 10 getLargestContentfulPaint, 11 } = require( './../utils' ); 8 12 9 13 /** … … 17 21 wpTemplate: [], 18 22 wpTotal: [], 23 timeToFirstByte: [], 24 largestContentfulPaint: [], 25 lcpMinusTtfb: [], 19 26 }; 20 27 21 28 beforeAll( async () => { 22 29 await activateTheme( 'twentytwentyone' ); 23 await exec( 'npm run env:cli -- menu location assign all-pages primary' ); 30 await exec( 31 'npm run env:cli -- menu location assign all-pages primary' 32 ); 24 33 } ); 25 34 26 35 afterAll( async () => { 27 const resultsFilename = getResultsFilename( basename( __filename, '.js' ) ); 36 const resultsFilename = getResultsFilename( 37 basename( __filename, '.js' ) 38 ); 28 39 writeFileSync( 29 40 join( __dirname, resultsFilename ), … … 43 54 44 55 results.wpBeforeTemplate.push( 45 navigationTiming.serverTiming[ 0].duration56 navigationTiming.serverTiming[ 0 ].duration 46 57 ); 47 58 results.wpTemplate.push( 48 navigationTiming.serverTiming[ 1].duration59 navigationTiming.serverTiming[ 1 ].duration 49 60 ); 50 results.wpTotal.push( 51 navigationTiming.serverTiming[2].duration 52 ); 61 results.wpTotal.push( navigationTiming.serverTiming[ 2 ].duration ); 62 63 const ttfb = await getTimeToFirstByte(); 64 const lcp = await getLargestContentfulPaint(); 65 66 results.timeToFirstByte.push( ttfb ); 67 results.largestContentfulPaint.push( lcp ); 68 results.lcpMinusTtfb.push( lcp - ttfb ); 53 69 } 54 70 } ); -
trunk/tests/performance/utils.js
r55459 r56399 22 22 */ 23 23 function getResultsFilename( fileName ) { 24 const prefixArg = process.argv.find( ( arg ) => arg.startsWith( '--prefix' ) ); 25 const fileNamePrefix = prefixArg ? `${prefixArg.split( '=' )[1]}-` : ''; 24 const prefixArg = process.argv.find( ( arg ) => 25 arg.startsWith( '--prefix' ) 26 ); 27 const fileNamePrefix = prefixArg ? `${ prefixArg.split( '=' )[ 1 ] }-` : ''; 26 28 const resultsFilename = fileNamePrefix + fileName + '.results.json'; 27 29 return resultsFilename; 30 } 31 32 /** 33 * Returns time to first byte (TTFB) using the Navigation Timing API. 34 * 35 * @see https://web.dev/ttfb/#measure-ttfb-in-javascript 36 * 37 * @return {Promise<number>} 38 */ 39 async function getTimeToFirstByte() { 40 return page.evaluate( () => { 41 const { responseStart, startTime } = 42 performance.getEntriesByType( 'navigation' )[ 0 ]; 43 return responseStart - startTime; 44 } ); 45 } 46 47 /** 48 * Returns the Largest Contentful Paint (LCP) value using the dedicated API. 49 * 50 * @see https://w3c.github.io/largest-contentful-paint/ 51 * @see https://web.dev/lcp/#measure-lcp-in-javascript 52 * 53 * @return {Promise<number>} 54 */ 55 async function getLargestContentfulPaint() { 56 return page.evaluate( 57 () => 58 new Promise( ( resolve ) => { 59 new PerformanceObserver( ( entryList ) => { 60 const entries = entryList.getEntries(); 61 // The last entry is the largest contentful paint. 62 const largestPaintEntry = entries.at( -1 ); 63 64 resolve( largestPaintEntry?.startTime || 0 ); 65 } ).observe( { 66 type: 'largest-contentful-paint', 67 buffered: true, 68 } ); 69 } ) 70 ); 28 71 } 29 72 … … 31 74 median, 32 75 getResultsFilename, 76 getTimeToFirstByte, 77 getLargestContentfulPaint, 33 78 };
Note: See TracChangeset
for help on using the changeset viewer.