Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Track new front-end metric: LCP-TTFB #48288

Merged
merged 6 commits into from
Feb 22, 2023
Merged

Track new front-end metric: LCP-TTFB #48288

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
88a00ea
Remove percentile calculation
oandregal Feb 21, 2023
eb51a4b
New metric: LCP-TTFB
oandregal Feb 21, 2023
16a4a64
Front end block theme: simplify tests and calculate LCP-TTFB
oandregal Feb 22, 2023
f4fc4c5
Front end classic theme: simplify tests and calculate LCP-TTFB
oandregal Feb 22, 2023
8b548fa
Adapt perf command to calculate the LCP-TTFB median from the given re…
oandregal Feb 22, 2023
9309f15
Fix typo
oandregal Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 35 additions & 52 deletions bin/plugin/commands/performance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,37 +50,36 @@ 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=} largestContentfulPaintMedian Represents the time when the main content of the page has likely loaded (median).
* @property {number=} largestContentfulPaintP75 Represents the time when the main content of the page has likely loaded (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.
* @property {number=} timeToFirstByte Represents the time since the browser started the request until it received a response.
* @property {number=} largestContentfulPaint Represents the time when the main content of the page has likely loaded.
* @property {number=} lcpMinusTtfb Represents the difference between LCP and TTFB.
* @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.
*/

/**
Expand Down Expand Up @@ -109,19 +108,6 @@ 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.
*
Expand All @@ -147,15 +133,12 @@ function curateResults( testSuite, results ) {
testSuite === 'front-end-classic-theme' ||
testSuite === 'front-end-block-theme'
) {
const timeToFirstByte = median( results.timeToFirstByte );
const largestContentfulPaint = median( results.largestContentfulPaint );
return {
timeToFirstByteMedian: median( results.timeToFirstByte ),
timeToFirstByteP75: percentile75( results.timeToFirstByte ),
largestContentfulPaintMedian: median(
results.largestContentfulPaint
),
largestContentfulPaintP75: percentile75(
results.largestContentfulPaint
),
timeToFirstByte,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the gist, the rest are docs changes:

  • rename timeToFirstByteMedian to timeToFirstByte
  • remove timeToFirstByteP75
  • rename largestContentfulPaintMedian to largestContentfulPaint
  • remove largestContentfulPaintP75
  • add lcMinusTtfb

I presume this is going to need to codevitals.run config changes to gather the existing metrics we report for the updated fields. If renaming is problematic for codevitals, I can revert that and leave the *Median fields while still removing the *P75 ones.

Can we also should the new one lcpMinetTtfb as LCP - TTFB (classic or block), @youknowriad ?

largestContentfulPaint,
lcpMinusTtfb: largestContentfulPaint - timeToFirstByte,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see this is only computed here, meaning it won't be part of the logged results when you run the tests manually using npm run test:performance ... should we make the computation in the spec files directly instead and add a log to the performance logger as well?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

};
}

Expand Down