Extension vs Real Measures

[nunoperalta]

Hi,

First of all - THANK YOU for this extension. It helped me figure out why my website continues to have a bad CLS score, when Lighthouse and PageSpeed always gives Green CLS.
I've fixed most of the issues I could find, but there's still one that I'm not sure what to do about.

My website uses ajax navigation, which keeps the Header/Footer and triggers pushState() with the new URL, to avoid having to do a full page load every time.

Using this extension, I'm seeing two patterns when performing an Ajax navigation:

1. Sometimes CLS resets, sometimes it appears to be "combined" with the previous page. I haven't figured out why when does it decide to reset or when does it decide not to reset.

2. When the user is scrolled to the bottom and the footer is visible, it seems that CLS increases, because the Footer is pushed up/down when the main contents are updated with the new page contents.

I would like to know if the above points are things that can affect my website score, and that CrUX reports bad score on the pages, or if this behavior is only seen with this extension and that I can "ignore" it.

If the case is that this extension is reporting the same CLS score that CrUX also reports, do you have any idea how I can go around these two issues and reset CLS score when navigation fully finishes?
It would be bad to have to give up ajax navigation, just because it affects my website's CLS score.

Thank you!

[nunoperalta]

Just want to add (I know it's not the extension's fault),

This CLS algorithm really needs to be easier on Ajax requests overall.

For example, think about Comments on a Post.
And users can reply to the comments (nested replies).
We do something similar to Facebook/Instagram, where we show the last 3 nested comments, but you can "View X more comments".
Clicking on that button, we do an ajax request to load the previous 10 comments (between the Parent and the already-loaded comments).
Since this is an async behavior, it causes CLS issue by default (as it moves the DOM below, to load the new comments).

No problem, I can reserve some space on the screen. The problem is that the system needs to know in advance how much space those comments (to be loaded) need... otherwise, if we reserve too little space, CLS will be an issue after the comments load; but if we reserve too much space, then there will be empty/blank space in between the new comments and the old comments.
If we reserve some space and then remove the excess after the comments load, CLS is an issue again.

How can we make Google happy here? I hope you understand my position here.
Our users have NEVER complained about "layout shifting" here. It's a user action, but because it's an async request, it causes CLS in Google's view.

[rviscomi]

Just to close out this thread, the CLS metric was improved so that it doesn't adversely affect long-lived apps like SPAs.

See https://web.dev/better-layout-shift-metric/ for more info.