Significant CLS on mobile with cookie banner

Hi @igor4wp,

As the cookie banner will appear after the content is loaded, there will be a layout shift, due to the pop-up. I see it should be below 0.1, we’re now at 0.104.

Maybe we can disable the transition with some CSS:

.cc-window {
    opacity: 1;
    transition: none!important;
}

I did a quick test on a low-budget WordPress sandbox, to see how much affect Complianz has on layout shifts, which isn’t much https://snipboard.io/78lziB.jpg

As this won’t affect layout directly, it might not count the pop-up, only the transition, but I have to test a bit more to see what the real effects are.

regards Aert

Thanks @aahulsebos

Unfortunately, his CSS didn’t change the CLS value

What is the impact with safe mode enabled (complianz/settings)?

As the cookie blocker will stop some scripts from executing, and runs them when the page is loaded (unless consent is revoked), this may affect the cls if enough scripts are blocked.

Hi @rogierlankhorst

Unfortunately, the same .104

Hi @igor4wp,

I got https://s-qvb6yvh9mah7.eu1.wpsandbox.org/ (available 24h) to 0 with the CSS:

.cc-window {
transition: none!important;
}

Could you try under Appearance -> Customize -> Additional CSS.

The transition will be most likely an issue, but without it, there would be no lay-out shit as it overlays the content. I can’t get it above 0.1 myself.

regards Aert

Thanks @aahulsebos!

I’ve added the CSS (https://prnt.sc/vooc5j), but the CLS remains .104 (https://prnt.sc/vooczs) despite all caching/minification off

Hi @igor4wp,

Although I find these metrics interesting, they are also pretty hard to pinpoint. You see a difference when Complianz is enabled, even without transition and we can’t find any issue with our banner, with the transition enabled.

https://snipboard.io/o6AaWp.jpg

When I visit your website on mobile, I don’t see any lay-out shift which might cause this issue. The banner uses the transform property as explained here https://web.dev/cls/ as is recommended.

On https://www.a-hr.website/contact/ CLS jumps to 0.149. And I can’t see why, nor does Google specify which element.

5 minutes later..and some investigation…

When you do a Lighthouse audit, in the Chrome browser, you will get the latest performance metrics, as others might be cached or based on an earlier crawl.

With Lighthouse:

https://snipboard.io/VGvS9D.jpg

Hope this ramble helped,

regards Aert

It’s kind of black magic to me.

I switched off all caching/minification, purged all the cache (you can see it in downgraded performance here https://prnt.sc/vp2vt2), but CLS is still too high, even in Lighthouse ??

Hi @igor4wp,

My lighthouse audit stays the same as shown above. I can’t explain magic, unfortunately. Could you try an empty page with Complianz enabled and see what the CLS is without content? I think CLS might be very specific per page, and therefore website overall.

regards Aert

Hi @aahulsebos

I’ve created a test page and CLS results are exactly the same https://prnt.sc/vp5l8j

??

Hi all,

As we couldn’t find the solution here, I had to change the cookie banner plugin and that resolved the issue.

Please close the topic.
Thanks everyone who tried to help.
Igor