CLS issues with single post page

[fxground]

Hello,

I’ll include a url in the secure note but i seem to be getting a cls issue on this page with page speed insights and i’m confused why this would be and if you can tell what im doing wrong with the theme (or is it a bug?)

Thank you

[prakash_s]

Hello @fxground,

Thanks for writing to us.

Cumulative Layout Shift measures unexpected movement of page elements as your site loads. This usually happens when images, embeds, sliders, or a cache issue. I would suggest you please purge all the cache temporarily disable any optimization or caching plugins to isolate their impact.

Hope it helps
Thanks

[fxground]

Yes i’ve already done that… i can’t think of anything that would have changed and its effecting every blog post. So yes, just to confirm, i’ve already cleared my cache and took care of cloudflare too, its all showing up as high CLS on my content on each post. Only changes i can think of is upgrading the theme. some recent changes in the release notes can effect cls so not sure what the issue is here?

[tristup]

Hi @fxground,

One possible cause of the issue could be Lazy Loading . Could you try disabling lazy loading temporarily and see if it improves the Cumulative Layout Shift (CLS)? Let us know if that makes a difference.

Thanks

[fxground]

Lazy loading is off… the CLS that is the largest is always the first content section on every blog post page. (yes, cache deleted again, cloudflare cleared).

[prakash_s]

Hello @fxground,

I checked your site and noticed a CLS (Cumulative Layout Shift) issue. Please note that this is not related to the theme or the builder. Upon reviewing your header, I found that the style is being rendered from cached styles.

Currently, the header bar height is set to 80px, and you are also calling a global block in the header where the top and bottom paddings are set to 65px.

To resolve this, you should set the header bar height to auto, which will help eliminate this CLS issue. There are also other CLS instances across the site where proper height, width, and font size need to be defined based on the screen size. This can be addressed by applying responsive styling throughout the site.

If you haven’t seen it yet, I recommend reviewing our documentation on responsive styling for additional guidance.

Responsive Styling | Themeco Docs

Please have a look at this article to learn more about cumulative layout shift

Cumulative Layout Shift (CLS)  |  Articles  |  web.dev

Please note that website performance optimization is beyond the scope of theme support. I suggest contacting a developer or subscribing to Boost, where we specialize in site performance optimization.

Hope it helps
Thanks for understanding