Performance suite: track Time To First Byte in the front-end #47037
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,6 +30,7 @@ const config = require( '../config' ); | |
| /** | ||
| * @typedef WPRawPerformanceResults | ||
| * | ||
| * @property {number[]} timeToFirstByte Represents the time since the browser started the request until it received a response. | ||
| * @property {number[]} serverResponse Represents the time the server takes to respond. | ||
| * @property {number[]} firstPaint Represents the time when the user agent first rendered after navigation. | ||
| * @property {number[]} domContentLoaded Represents the time immediately after the document's DOMContentLoaded event completes. | ||
|
|
@@ -48,33 +49,35 @@ const config = require( '../config' ); | |
| /** | ||
| * @typedef WPPerformanceResults | ||
| * | ||
| * @property {number=} timeToFirstByteMedian Represents the time since the browser started the request until it received a response (median). | ||
| * @property {number=} timeToFirstByteP75 Represents the time since the browser started the request until it received a response (75th percentile). | ||
| * @property {number=} serverResponse Represents the time the server takes to respond. | ||
| * @property {number=} firstPaint Represents the time when the user agent first rendered after navigation. | ||
| * @property {number=} domContentLoaded Represents the time immediately after the document's DOMContentLoaded event completes. | ||
| * @property {number=} loaded Represents the time when the load event of the current document is completed. | ||
| * @property {number=} firstContentfulPaint Represents the time when the browser first renders any text or media. | ||
| * @property {number=} firstBlock Represents the time when Puppeteer first sees a block selector in the DOM. | ||
| * @property {number=} type Average type time. | ||
| * @property {number=} minType Minimum type time. | ||
| * @property {number=} maxType Maximum type time. | ||
| * @property {number=} typeContainer Average type time within a container. | ||
| * @property {number=} minTypeContainer Minimum type time within a container. | ||
| * @property {number=} maxTypeContainer Maximum type time within a container. | ||
| * @property {number=} focus Average block selection time. | ||
| * @property {number=} minFocus Min block selection time. | ||
| * @property {number=} maxFocus Max block selection time. | ||
| * @property {number=} inserterOpen Average time to open global inserter. | ||
| * @property {number=} minInserterOpen Min time to open global inserter. | ||
| * @property {number=} maxInserterOpen Max time to open global inserter. | ||
| * @property {number=} inserterSearch Average time to open global inserter. | ||
| * @property {number=} minInserterSearch Min time to open global inserter. | ||
| * @property {number=} maxInserterSearch Max time to open global inserter. | ||
| * @property {number=} inserterHover Average time to move mouse between two block item in the inserter. | ||
| * @property {number=} minInserterHover Min time to move mouse between two block item in the inserter. | ||
| * @property {number=} maxInserterHover Max time to move mouse between two block item in the inserter. | ||
| * @property {number=} listViewOpen Average time to open list view. | ||
| * @property {number=} minListViewOpen Min time to open list view. | ||
| * @property {number=} maxListViewOpen Max time to open list view. | ||
| */ | ||
|
|
||
| /** | ||
|
|
@@ -103,6 +106,19 @@ function median( array ) { | |
| : ( numbers[ mid - 1 ] + numbers[ mid ] ) / 2; | ||
| } | ||
|
|
||
| /** | ||
| * Computes the 75th percentile from an array of numbers. | ||
| * | ||
| * @param {number[]} array | ||
| * | ||
| * @return {number} 75th percentile of the given dataset. | ||
| */ | ||
| function percentile75( array ) { | ||
| const ascending = array.sort( ( a, b ) => a - b ); | ||
| const position = Math.floor( ( 75 / 100 ) * array.length ); | ||
| return ascending[ position ]; | ||
| } | ||
|
|
||
| /** | ||
| * Rounds and format a time passed in milliseconds. | ||
| * | ||
|
|
@@ -118,11 +134,22 @@ function formatTime( number ) { | |
| /** | ||
| * Curate the raw performance results. | ||
| * | ||
| * @param {string} testSuite | ||
| * @param {WPRawPerformanceResults} results | ||
| * | ||
| * @return {WPPerformanceResults} Curated Performance results. | ||
| */ | ||
| function curateResults( testSuite, results ) { | ||
| if ( | ||
| testSuite === 'front-end-classic-theme' || | ||
| testSuite === 'front-end-block-theme' | ||
| ) { | ||
| return { | ||
| timeToFirstByteMedian: median( results.timeToFirstByte ), | ||
| timeToFirstByteP75: percentile75( results.timeToFirstByte ), | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| serverResponse: average( results.serverResponse ), | ||
| firstPaint: average( results.firstPaint ), | ||
|
|
@@ -173,7 +200,7 @@ async function runTestSuite( testSuite, performanceTestDirectory ) { | |
| `packages/e2e-tests/specs/performance/${ testSuite }.test.results.json` | ||
| ) | ||
| ); | ||
| return curateResults( testSuite, rawResults ); | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -344,7 +371,12 @@ async function runPerformanceTests( branches, options ) { | |
| // 4- Running the tests. | ||
| log( '\n>> Running the tests' ); | ||
|
|
||
| const testSuites = [ | ||
| 'post-editor', | ||
| 'site-editor', | ||
| 'front-end-classic-theme', | ||
| 'front-end-block-theme', | ||
| ]; | ||
|
|
||
| /** @type {Record<string,Record<string, WPPerformanceResults>>} */ | ||
| const results = {}; | ||
|
|
@@ -379,78 +411,25 @@ async function runPerformanceTests( branches, options ) { | |
|
|
||
| // Computing medians. | ||
| for ( const branch of branches ) { | ||
| /** | ||
|
There was a problem hiding this comment. This change is just a way of making the command independent from the test suite data points. 859e453 |
||
| * @type {string[]} | ||
| */ | ||
| let dataPointsForTestSuite = []; | ||
| if ( rawResults.length > 0 ) { | ||
| dataPointsForTestSuite = Object.keys( | ||
| rawResults[ 0 ][ branch ] | ||
| ); | ||
| } | ||
|
|
||
| const resultsByDataPoint = {}; | ||
| dataPointsForTestSuite.forEach( ( dataPoint ) => { | ||
| // @ts-ignore | ||
| resultsByDataPoint[ dataPoint ] = rawResults.map( | ||
| // @ts-ignore | ||
| ( r ) => r[ branch ][ dataPoint ] | ||
| ); | ||
| } ); | ||
| const medians = mapValues( resultsByDataPoint, median ); | ||
|
|
||
| // Format results as times. | ||
| results[ testSuite ][ branch ] = mapValues( medians, formatTime ); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { createURL } from './create-url'; | ||
| import { isCurrentURL } from './is-current-url'; | ||
|
|
||
| /** | ||
| * Performs log out. | ||
| * | ||
| */ | ||
| export async function logout() { | ||
| // If it is logged and in a page different than the dashboard, | ||
| // move to the dashboard. Some pages may be in full-screen mode, | ||
| // so they won't have the log-out button available. | ||
| if ( ! isCurrentURL( 'wp-login.php' ) && ! isCurrentURL( 'wp-admin' ) ) { | ||
| await page.goto( createURL( 'wp-admin' ) ); | ||
| } | ||
|
|
||
| await Promise.all( [ | ||
| page.hover( '#wp-admin-bar-my-account' ), | ||
| page.waitForSelector( '#wp-admin-bar-logout', { visible: true } ), | ||
| ] ); | ||
|
|
||
| await page.click( '#wp-admin-bar-logout' ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { basename, join } from 'path'; | ||
| import { writeFileSync } from 'fs'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils'; | ||
|
|
||
| describe( 'Front End Performance', () => { | ||
| const results = { | ||
| timeToFirstByte: [], | ||
| }; | ||
|
|
||
| beforeAll( async () => { | ||
| await activateTheme( 'twentytwentythree' ); | ||
| await logout(); | ||
| } ); | ||
|
|
||
| afterAll( async () => { | ||
| await activateTheme( 'twentytwentyone' ); | ||
| const resultsFilename = basename( __filename, '.js' ) + '.results.json'; | ||
| writeFileSync( | ||
| join( __dirname, resultsFilename ), | ||
| JSON.stringify( results, null, 2 ) | ||
| ); | ||
| } ); | ||
|
|
||
| it( 'Time To First Byte (TTFB)', async () => { | ||
| // We derive the 75th percentile of the TTFB based on these results. | ||
| // By running it 16 times, the percentile value would be (75/100)*16=12, | ||
| // meaning that we discard the worst 4 values. | ||
| let i = 16; | ||
| while ( i-- ) { | ||
| await page.goto( createURL( '/' ) ); | ||
| const navigationTimingJson = await page.evaluate( () => | ||
| JSON.stringify( performance.getEntriesByType( 'navigation' ) ) | ||
| ); | ||
| const [ navigationTiming ] = JSON.parse( navigationTimingJson ); | ||
|
Comment on lines
+38
to
+41
There was a problem hiding this comment. Nit:
const [ navigationTimeing ] = await page.evaluate( () =>
performance.getEntriesByType( 'navigation' )
);In addition, we already have some performance utils available, and this probably belongs in the |
||
| results.timeToFirstByte.push( | ||
| navigationTiming.responseStart - navigationTiming.startTime | ||
| ); | ||
| } | ||
| } ); | ||
| } ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { basename, join } from 'path'; | ||
| import { writeFileSync } from 'fs'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createURL, logout } from '@wordpress/e2e-test-utils'; | ||
|
|
||
| describe( 'Front End Performance', () => { | ||
| const results = { | ||
| timeToFirstByte: [], | ||
| }; | ||
|
|
||
| beforeAll( async () => { | ||
| await logout(); | ||
| } ); | ||
|
|
||
| afterAll( async () => { | ||
| const resultsFilename = basename( __filename, '.js' ) + '.results.json'; | ||
| writeFileSync( | ||
| join( __dirname, resultsFilename ), | ||
| JSON.stringify( results, null, 2 ) | ||
| ); | ||
| } ); | ||
|
|
||
| it( 'Time To First Byte (TTFB)', async () => { | ||
| // We derive the 75th percentile of the TTFB based on these results. | ||
| // By running it 16 times, the percentile value would be (75/100)*16=12, | ||
| // meaning that we discard the worst 4 values. | ||
| let i = 16; | ||
| while ( i-- ) { | ||
| await page.goto( createURL( '/' ) ); | ||
| const navigationTimingJson = await page.evaluate( () => | ||
| JSON.stringify( performance.getEntriesByType( 'navigation' ) ) | ||
| ); | ||
| const [ navigationTiming ] = JSON.parse( navigationTimingJson ); | ||
| results.timeToFirstByte.push( | ||
| navigationTiming.responseStart - navigationTiming.startTime | ||
| ); | ||
| } | ||
| } ); | ||
| } ); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will these downgrade the theme if it has a more recent version?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, the idea was to keep the theme version consistent across the tests so the themes couldn't influence the results. It's unlikely, but I think it's still good to keep things as consistent as possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah. The rationale for this is to be able to control the environment so that only the Gutenberg PR affects the metrics. At some point, we should manually update the themes, but at least this will be an intentional change and won't affect any unrelated PR.