CLS Problem

P.S.

The problem was solved, I set a constant height to the header, preventing the CLS.
But just to understand, how can it be that part of the CSS is affecting late, it can still damage the CLS in other paces less noticeable.

Hi there,

CLS can occur for many reasons. Ranging from:

1. Font Display Swap being applied to fonts - the browser displays the system font whilst the font is still loading.

2. Images missing width and height attributes or are being badly lazy loaded.

3. Optimizations that defer CSS to after page load.

4. Javascript files injecting content or deferring the loading of content ( eg. Lazy Loader ).

The list is quite long.
Best thing to do is first disable any optimization plugins / lazy loaders and retest the site. If the CLS goes away then you know its one of those plugin settings that is causing the issue.

You can also Right click inspect the site - go to the Performance tab, change the Network speed to Slow 3G and within the Performance panel click the reload icon - you can then see what is actually moving.

Looking at the site - you have logo lazyloaded - best to exclude above the fold images from lazy loading. Most lazy loaders provide the option to exclude images uses a CSS class: you can use is-logo-image

I also notice that the brand images are loading later causing a shift....

Thank you David for this serious answer,
I really enjoy your theme and the great support!

You're welcome