Avoid relying on DOM events to measure the loading time (#25288)

WordPress · Sep 14, 2020 · 7196307 · 7196307
1 parent 1702ef0
commit 7196307
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 42 deletions.
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
@@ -28,7 +28,6 @@ const config = require( '../config' );
  * @typedef WPRawPerformanceResults
  *
  * @property {number[]} load             Load Time.
- * @property {number[]} domcontentloaded DOM Contentloaded time.
  * @property {number[]} type             Average type time.
  * @property {number[]} focus            Average block selection time.
  */
@@ -37,7 +36,6 @@ const config = require( '../config' );
  * @typedef WPPerformanceResults
  *
  * @property {number} load             Load Time.
- * @property {number} domcontentloaded DOM Contentloaded time.
  * @property {number} type             Average type time.
  * @property {number} minType          Minium type time.
  * @property {number} maxType          Maximum type time.
@@ -49,7 +47,6 @@ const config = require( '../config' );
  * @typedef WPFormattedPerformanceResults
  *
  * @property {string=} load             Load Time.
- * @property {string=} domcontentloaded DOM Contentloaded time.
  * @property {string=} type             Average type time.
  * @property {string=} minType          Minium type time.
  * @property {string=} maxType          Maximum type time.
@@ -106,7 +103,6 @@ function formatTime( number ) {
 function curateResults( results ) {
 	return {
 		load: average( results.load ),
-		domcontentloaded: average( results.domcontentloaded ),
 		type: average( results.type ),
 		minType: Math.min( ...results.type ),
 		maxType: Math.max( ...results.type ),
@@ -164,7 +160,6 @@ async function runTestSuite( testSuite, performanceTestDirectory ) {
 	const medians = mapValues(
 		{
 			load: results.map( ( r ) => r.load ),
-			domcontentloaded: results.map( ( r ) => r.domcontentloaded ),
 			type: results.map( ( r ) => r.type ),
 			minType: results.map( ( r ) => r.minType ),
 			maxType: results.map( ( r ) => r.maxType ),

diff --git a/packages/e2e-tests/config/performance-reporter.js b/packages/e2e-tests/config/performance-reporter.js
@@ -28,16 +28,13 @@ class PerformanceReporter {
 		}
 
 		const results = readFileSync( filepath, 'utf8' );
-		const { load, domcontentloaded, type, focus } = JSON.parse( results );
+		const { load, type, focus } = JSON.parse( results );
 
 		if ( load && load.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
 ${ title( 'Loading Time:' ) }
-Average time to load: ${ success( round( average( load ) ) + 'ms' ) }
-Average time to DOM content load: ${ success(
-				round( average( domcontentloaded ) ) + 'ms'
-			) }` );
+Average time to load: ${ success( round( average( load ) ) + 'ms' ) }` );
 		}
 
 		if ( type && type.length ) {

diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -75,7 +75,6 @@ describe( 'Post Editor Performance', () => {
 	it( 'Loading, typing and selecting blocks', async () => {
 		const results = {
 			load: [],
-			domcontentloaded: [],
 			type: [],
 			focus: [],
 		};
@@ -105,21 +104,10 @@ describe( 'Post Editor Performance', () => {
 
 		// Measuring loading time
 		while ( i-- ) {
-			await page.reload( { waitUntil: [ 'domcontentloaded', 'load' ] } );
-			const timings = JSON.parse(
-				await page.evaluate( () =>
-					JSON.stringify( window.performance.timing )
-				)
-			);
-			const {
-				navigationStart,
-				domContentLoadedEventEnd,
-				loadEventEnd,
-			} = timings;
-			results.load.push( loadEventEnd - navigationStart );
-			results.domcontentloaded.push(
-				domContentLoadedEventEnd - navigationStart
-			);
+			const startTime = new Date();
+			await page.reload();
+			await page.waitForSelector( '.wp-block' );
+			results.load.push( new Date() - startTime );
 		}
 
 		// Measuring typing performance

diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -35,7 +35,6 @@ describe( 'Site Editor Performance', () => {
 	it( 'Loading', async () => {
 		const results = {
 			load: [],
-			domcontentloaded: [],
 			type: [],
 			focus: [],
 		};
@@ -51,21 +50,10 @@ describe( 'Site Editor Performance', () => {
 
 		// Measuring loading time
 		while ( i-- ) {
-			await page.reload( { waitUntil: [ 'domcontentloaded', 'load' ] } );
-			const timings = JSON.parse(
-				await page.evaluate( () =>
-					JSON.stringify( window.performance.timing )
-				)
-			);
-			const {
-				navigationStart,
-				domContentLoadedEventEnd,
-				loadEventEnd,
-			} = timings;
-			results.load.push( loadEventEnd - navigationStart );
-			results.domcontentloaded.push(
-				domContentLoadedEventEnd - navigationStart
-			);
+			const startTime = new Date();
+			await page.reload();
+			await page.waitForSelector( '.wp-block' );
+			results.load.push( new Date() - startTime );
 		}
 
 		const resultsFilename = basename( __filename, '.js' ) + '.results.json';