Large layout shifts/ DOM elements

Hi there,

Can you disable your caching plugin and see if the issue still exists?

Let me know :)

Hello!

I disabled the plugin and it's removed that problem — but thrown up another :)

https://www.screencast.com/t/bu4AUYUoMyR5

What should I do to combat this?

Thanks for your help :)

Hi there,

Does the optimization plugin you use have some Critical CSS set up? That may cause layout shifts if it's not properly configured.

We recommend checking it out and disable it if it's activated. :D

Hello! I'll have a look now and disable if so! Will report back :)

Hello! There's a section to disable 'Remote critical CSS generation' which I've turned off but the CLS is still happening.

I can add exclusions to the 'Minify CSS section — would you be able to tell me which settings — and what is safe to exclude — to avoid the CLS happening? Is there a CSS url that I can add?

https://www.screencast.com/t/9pfdzefG7Sip

Hi there,

the issue is the lazyloader/image optimizer being used, its not reserving any space for the image, so after loading the image appears and pushes all the content down.

You might want to exlude that image from lazyloading considering its above the fold.
But you should raise the issue with whatever image optimizer plugin/service you're using, as it 'should' be adding a relevant sized placeholder. But before that....

The other potential problem with the lazyloader could be the use of the Full Width option you're using on that container block.

I personally rarely use that option.
When building pages with Full Width content, set the Content Container to Full Width:

https://docs.generatepress.com/article/content-container/

Then you have a full width page, and you can stop using the fullwidth option in the block toolbar.
Then split your page up with Container Blocks, to create full width and contained sections where you need them.

I would fix that first, and if there is still an issue with the lazyloading image. have a chat with optimization plugin support.