[Feature] Performance measurement

[mh-ka]

Hi there,

is there a way to access the browser performance logging? I tried the puppeteer example, but no luck with that: puppeteer/puppeteer#309 (comment)

I saw another discussion here about performance metrics but wasn't sure if it is the same topic: #590

[pavelfeldman]

Could you share more about what exact information you are after? We are collecting the feedback for the dedicated performance api.

[mh-ka]

Currently I am prototyping and trying to collect all information that is available to evaluate the possibilities of tracking performance in the browser. The original requirement: 'Testing some main use cases between product increments to check if the page is getting slower'.

Maybe it would be good to get request metrics

• Which requests were fired and how long did their responses take?

and basic metrics for the page load

• Which were the elements with the longest loading time? (probably hard to measure?)
• How long was the full page load and render time?

Some further notes

• When testing in webdriverio which presumably uses puppeteer I can read the data from the website (attached below for comparison and inspiration).
• Actually, reading these browser metrics leads to timeout issues in my case. Not sure, why it behaves like that, maybe because of the number of connections which are made during the page load. Setting browser as headless does not help. Could be related to this issue: devtools-service trace always timesout after some action is performed on the page webdriverio/webdriverio#4963

Diagnostics

{
"numRequests":10,
"numScripts":1,
"numStylesheets":3,
"numFonts":1,
"numTasks":494,
"numTasksOver10ms":6,
"numTasksOver25ms":3,
"numTasksOver50ms":2,
"numTasksOver100ms":1,
"numTasksOver500ms":0,
"rtt":0.565,
"throughput":1511652.494862303,
"maxRtt":0.565,
"maxServerLatency":570.8729999999999,
"totalByteWeight":2806969,
"totalTaskTime":595.2999999999995,
"mainDocumentTransferSize":1005
}

Metrics

{
"estimatedInputLatency":16,
"timeToFirstByte":566,
"domContentLoaded":4034,
"firstVisualChange":4048,
"firstPaint":4080,
"firstContentfulPaint":4080,
"firstMeaningfulPaint":4080,
"lastVisualChange":12892,
"firstCPUIdle":4749,
"firstInteractive":4749,
"load":19263,
"speedIndex":8752
}

Thread

[
{"group":"other","duration":325.39899999999994},
{"group":"styleLayout","duration":171.787},
{"group":"scriptEvaluation","duration":39.52100000000002},
{"group":"paintCompositeRender","duration":32.209},
{"group":"parseHTML","duration":17.083},
{"group":"garbageCollection","duration":5.284},
{"group":"scriptParseCompile","duration":4.017}
]

PageWeight

{
"pageWeight":2811258,
"transferred":2802623,
"requestCount":10,
"details":{
"Document":{"size":929,"encoded":0,"count":1},
"Stylesheet":{"size":6833,"encoded":2596,"count":3},
"Image":{"size":2735984,"encoded":2735984,"count":2},
"Script":{"size":4580,"encoded":1448,"count":1},
"XHR":{"size":722,"encoded":385,"count":1},
"Font":{"size":56780,"encoded":56780,"count":1},
"Other":{"size":5430,"encoded":5430,"count":1}}
}

[mh-ka]

Hi there, do you have any news on that topic?

[ludeknovy]

@pavelfeldman any updates on this? Having the above-described metrics would be really useful. Thanks.

[metacurb]

Hey, I hope I can help regarding the performance timing. Here's what I've come up with. I think this methods covers the metrics you're asking for @mh-ka, but I'm sure you could perform similar for the other data points that you're looking to collect.

const getMetrics = async function getmetrics(
  page: Page
): Promise<{
  format: 'PerformanceNavigationTiming' | 'PerformanceTiming'
  data: PerformanceNavigationTiming | PerformanceTiming
}> {
  return JSON.parse(
    await page.evaluate(() => {
      const [timing] = performance.getEntriesByType('navigation')
      return JSON.stringify({
        format: timing ? 'PerformanceNavigationTiming' : 'PerformanceTiming',
        data: timing || window.performance.timing,
      })
    })
  )
}

PerformanceTiming is deprecated, but if you take a look at the links below you'll notice that the processing model is almost identical to that of the experimental PerformanceNavigationTiming. This means you should be able to interchangeably use them with little issue. Be aware however, that PerformanceTiming returns a timestamp, whereas PerformanceNavigationTiming will return milliseconds since startTime.

PerformanceTiming processing model
PerformanceNavigationTiming processing model

I can give you a heads up though, that window.performance.memory looks to be a non-standard.

[mh-ka]

Thanks a lot!