Site showing CLS on navigation

Hi there,

there could be a few things at play here.
But to begin - the Logo image has no width and height attributes so the browser cannot reserve space for it which causes CLS.

Not sure if this is due to the Pinterest code attached to it.
Try excluding the logo from pinterest, the plugins generally have an option to exclude images with a specific class and you can use: is-logo-image

Thanks. I disabled the pin button plugin totally but it doesn't seem to have solved the problem.

Any other suggestions?

Can you clear any caches, including WP Rockets - as Google Pagespeed is still loading the image without the attributes, whereas i see them in the browser.

That happened to me too. I think I have cleared the cache about 20 times already from WP rockets and on host.
I'll disable WP-rocket until we sort this out.

Thanks again.

Ok if i test your site now, the CLS plummets to an acceptable 0.03 and the logo is no longer being flagged for missing width and height attributes....

What did you change lol :)

Thanks, but it looks like the problem just moved to mobile :)
Initially, the desktop had a CLS problem and the mobile was ok.
I removed the Pinterest plugin that you mentioned was causing issues but then the desktop has no CLS and the mobile suddenly has a shift.
What went wrong?

If i test the site with WP Rocket disabled by adding the ?nowprocket query string to the URL, then CLS is almost 0 on mobile. So there is something in the WP Rocket settings thats causing the issue.

Aside from deselecting some of its options, most likely CSS optimization, to find out the culprit you may want to check with WP Rocket support so see if they can spot the issue.

Ok, thanks so much for your help!

I am just adding a note here in case anyone has the same problem.

Once I disabled "optimize CSS delivery" there was no CLS shift anymore.

Thanks for pointing me in the right direction.

Glad to hear you found the issue - and thanks for sharing it here!