Missing Cumulative Layout Shift (CLS) metric when batching multiple reports together in a single network request

[eduardvalentin0007]

Hello everyone,

After upgrading the web-vital plugin from 3.5.2 to 4.1.1, we noticed a problem with the Cumulative Layout Shift (CLS) metric.
We are seeing a rapid decrease in about 99% of the CLS counts.

Our implementation is very similar to your recommendation batch-multiple-reports-together, so we report all available metrics when the page is in the background or unloaded (document.visibilityState === 'hidden').

But if we compare the file src/lib/onHidden.ts in versions (3.5.2 and 4.1.1), we can see that we used to use the pagehide or visibilitychange event (event.type === 'pagehide' || document.visibilityState === 'hidden') and now only the visibilitychange event.

Our current problem now is that the flushQueue() visibilitychange listener in js is called earlier than the visibilitychange listener from src/lib/onHidden.ts, and unfortunately it is too late to pass the cls metrics.

Is there a workaround to get all the Web Vitals metrics and then call the flushQueue() function?

Thanks in advance.
Vasili and Edu

[philipwalton]

Our implementation is very similar to your recommendation batch-multiple-reports-together, so we report all available metrics when the page is in the background or unloaded (document.visibilityState === 'hidden').

Try updating your implementation to not use pagehide and just use visibilitychange. We should update the snippet in the README to match the logic in the library.

Note that all of the bugs that used to require pagehide in addition to visibilitychange have now been fixed, so pagehide is not really needed anymore.

[philipwalton]

Updated the README in #501.

[eduardvalentin0007]

Thank you for your reply.

We are currently utilizing the visibilitychange implementation exclusively to invoke the flushQueue() function.

I believe this is due to both the visibilitychange event listener from src/lib/onHidden.ts for cls metrics and our js file utilizing the same event.

The intriguing question would be: How can I ensure that the listener in src/lib/onHidden.ts is triggered before the one in the js file?

[mikep-dev]

I haven't noticed your issue when I was posting a very similar one here #502
Long story short, you are probably attaching your event listener to document which might lead to issues with order of execution. Try to use window.addEventListener or addEventListener instead.

[eduardvalentin0007]

This was exactly our problem. After switching to window.addEventListener, the CLS metric is now being collected on time.

Thanks for your support!