OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

PerformanceObserver On Page Refresh

  • Thread starter Thread starter harsha.cs
  • Start date Start date
H

harsha.cs

Guest
I have been using PerformanceObserver API with PlayWright to capture several metrics in my application which. My application has multiple browser instances on Button/link clicks. Metrics like FCP, LCP, TTFB are getting captured while the pages are navigated for first time. Metrics like LongTask and CLS are getting updated whenever the page is reloaded.

For example once I login to the application, for the home page I have captured FCP, LCP and TTFB. There is a link on the home page on clicking it, another browser window opens, after filling details in that page and clicking on Finish button the home page refreshes. Here is the real problem. When I access the Metrics again in the home page, all the metric values are same apart from LongTask and CLS. So in this case how can I avoid capturing the metrics again if there is no change in their values?

I have created fixture in PlayWright to capture metrics which has all metrics to be captured. Below code is inside the function and gets called whenever a new page is opened or closed.

Code:
const perfMetrics = new PerformanceMetrics(page.mainFrame());
const pageLevelTotalBlockingTime = await perfMetrics.totalBlockingTime(transactionName);
const pagePaintTiming = await perfMetrics.paintTiming(transactionName);
const pageLevelLargeContentfulPaint = await perfMetrics.largestContentfulPaint(transactionName);
const pageNavigationTime = await perfMetrics.navigationTime(transactionName);
const resourceTiming = await perfMetrics.resourceTime(transactionName);
const pageLevelCLS = await perfMetrics.cumulativeShift(transactionName)

<p>I have been using <code>PerformanceObserver</code> API with <code>PlayWright</code> to capture several metrics in my application which. My application has multiple browser instances on Button/link clicks. Metrics like <code>FCP</code>, <code>LCP</code>, <code>TTFB</code> are getting captured while the pages are navigated for first time. Metrics like <code>LongTask</code> and <code>CLS</code> are getting updated whenever the page is reloaded.</p>
<p>For example once I login to the application, for the home page I have captured <code>FCP</code>, <code>LCP</code> and <code>TTFB</code>. There is a link on the home page on clicking it, another browser window opens, after filling details in that page and clicking on Finish button the home page refreshes. Here is the real problem. When I access the Metrics again in the home page, all the metric values are same apart from <code>LongTask</code> and <code>CLS</code>. So in this case how can I avoid capturing the metrics again if there is no change in their values?</p>
<p>I have created <code>fixture</code> in <code>PlayWright</code> to capture metrics which has all metrics to be captured. Below code is inside the function and gets called whenever a new page is opened or closed.</p>
<pre><code>const perfMetrics = new PerformanceMetrics(page.mainFrame());
const pageLevelTotalBlockingTime = await perfMetrics.totalBlockingTime(transactionName);
const pagePaintTiming = await perfMetrics.paintTiming(transactionName);
const pageLevelLargeContentfulPaint = await perfMetrics.largestContentfulPaint(transactionName);
const pageNavigationTime = await perfMetrics.navigationTime(transactionName);
const resourceTiming = await perfMetrics.resourceTime(transactionName);
const pageLevelCLS = await perfMetrics.cumulativeShift(transactionName)
</code></pre>
 
Top