Report Web Vital metrics on every chance

[inancgumus]

First commit explanation

Note: We've decided to remove the first commit as the second commit already fixes the issue. Here's the changes from the first commit in case we need it again.

func (p *Page) Close(opts goja.Value) error {
	p.logger.Debugf("Page:Close", "sid:%v", p.sessionID())

	// forcing the pagehide event to trigger web vitals metrics.
	v := p.vu.Runtime().ToValue(`() => window.dispatchEvent(new Event('pagehide'))`)
	_ = p.Evaluate(v)
	...
}       

The first commit forces the Web Vital metrics to get triggered on page.Close. The page is closing anyway, so there should be no harm in hiding it before it gets closed. Please see this description and this comment for the details. It turns out that using pagehide is the recommended way here. What they really recommend is to batch the events instead of processing them one by one. Anyway, this can shed light on why this fix works.

Note: see the Page Lifecycle guide for an explanation of why visibilitychange and pagehide are recommended over events like beforeunload and unload.

Second commit explanation

Additionally, CLS should/can be called multiple times.

(CLS) callback is always called when the page's visibility state changes to hidden. As a result, the callback function might be called multiple times during the same page load.

This 2nd commit uses this advice and sets the callbacks to report metrics all the time. See this link for more information.

Results

Before:

browser_web_vital_fcp.......: avg=1.99s    min=1.99s    med=1.99s    max=1.99s    p(90)=1.99s    p(95)=1.99s   
browser_web_vital_ttfb......: avg=1.81s    min=1.81s    med=1.81s    max=1.81s    p(90)=1.81s    p(95)=1.81s 

After:

browser_web_vital_cls.......: avg=0.000057 min=0.000057 med=0.000057 max=0.000057 p(90)=0.000057 p(95)=0.000057
browser_web_vital_fcp.......: avg=1.99s    min=1.99s    med=1.99s    max=1.99s    p(90)=1.99s    p(95)=1.99s   
browser_web_vital_lcp.......: avg=1.99s    min=1.99s    med=1.99s    max=1.99s    p(90)=1.99s    p(95)=1.99s   
browser_web_vital_ttfb......: avg=1.81s    min=1.81s    med=1.81s    max=1.81s    p(90)=1.81s    p(95)=1.81s 

I used the same script from this comment, but without page.reload()! So here it is again.

Test script

import { browser } from 'k6/x/browser';

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
            type: 'chromium',
        },
      },
    },
  },
};

export default async function () {
  const page = browser.newPage();

  try {
    await page.goto('https://test.k6.io/');
  } finally {
    page.close();
  } 
}

[ka3de]

LGTM.

[ankur22]

Thanks for @inancgumus. I'm happy to trial this out with #950 to ensure that the measurements are still accurate 👍 LGTM 🙂