Cumulative Layout Shift (CLS)

[a-d-w-s]

I have a problem with google core web vitals, it points to a possible problem with the cookie list. Is there a solution to the list being displayed with a delay to avoid a CLS error?

Google refers to the problem https://web.dev/non-composited-animations/

Is there a solution?

[orestbida]

The plugin appends the HTML markup to the DOM once, in a hidden state to avoid CLS.
I need a demo example to inspect, since I cannot reproduce this issue.

[a-d-w-s]

I send image from PageSpeed Insights

[orestbida]

Oh, you're talking about the visibility property. I don't know other ways to animate elements with a fadeIn/fadeOut transition without using the visibility property.

Animations which are not composited can be janky and increase CLS

It is true that visibility cannot be transitioned, and that's why you see that message. This however should not affect your CLS score since visibility transitions are not janky.

An example of a junky transition would be to animate the width or height props. The message is just an information for a potential issue.

[a-d-w-s]

I apologize for the accuracy. Is it possible to make some minor delay in setting cookies bar so that it appears to be needed in 5s? Maybe that would solve the CLS problem.

[orestbida]

I don't think this would fix it, since PageSpeedInsight/Lighthouse are able to detect timeouts/delays and would wait until there is no more javascript code to execute. The timeout/delay may also impact the Time to Interactive metric.

There are 2 possible “solutions”:

1. remove all CSS transitions
2. remove the visibility prop. from the transition, but use JavaScript to add display: none; at the end of the transition and display: block at the beginning of the transition in order to properly hide/show the modals.

Unless you can demonstrate that this issue effectively impacts the CLS score (it does not, on my end) I wouldn't worry too much.

[AWqxKAWERbXo]

afaik it still affects Google Pagespeed Insights. A server-side rendered Cookie-Manager HTML may solves this as it can be drawn without executing Javascript.

As this is a JavaScript solution, the only idea I'd have is to export the rendered HTML (e.g. into a cache file) and the server checks if the modal needs to be inside the output. cookieconsent checks for existence in the source code and updates the DOM.

For example delivering the interactive buttons and the close x icon disabled statically but reactivates them on load if needed.

That's a very complex solution to make PageSpeed happy.

How I tested the impact: I ran CookieConsent with the default url in PageSpeed and a second url with ?cc=hidden to skip initializing (also on the server side)