Breadcrumbs causing CLS issues

Hi there,

can you share a link to a post where i can see the CLS issue ?

Hi David. Sure, any post on my site has the issue. See below for some samples. As you will notice, (under the CLS section in PageSpeed Insights), the breadcrumbs are the culprit for failing the CLS portion.

https://www.urbanorganicyield.com/repotting-snake-plants/
https://www.urbanorganicyield.com/how-to-water-succulent-plants/
https://www.urbanorganicyield.com/best-grub-killer/

Hi there,

I've checked the page and it seems the CLS is coming from the lazy loaded images and Critical CSS.

Generally, lazy loaded images above the fold causes CLS issues. Your sample posts has 5 on them.

Consider disabling lazy load (at least on the logo and the featured image) and see if it improves.

Consider disabling critical CSS as well as this can contribute as well if it's not finely tuned. It's quite tricky to implement this because CSS added there should be the right ones as they can cause shifts when the rest of the CSS of the page loads.

Hi. Thanks for checking. However, after disabling the lazy load there was no improvement in CLS. Do you have any other suggestions?

Can you try disabling critical CSS as well and check again? (and let us recheck too for observation)

Ok. Disabled.

Hi there. Disabling critical CSS definitely solved the CLS issue. But the consequence is that it caused issues with FCP and LCP.

Hi again. It's all good now. Thank you for the suggestions on disabling critical CSS. FYI, I turned on 'Remove unused CSS' in WPRocket and that solved the remaining issues. Thank you again.

Nice one.

Yeah, critical CSS is real tricky to deal with. It's definitely beneficial but it can be detrimental as well if the CSS added to it isn't refined.

Glad you got it sorted. :D