CLS after place wooblocks on page

Hi there,

can you disable your cache and optimization plugins as the film strip in provided in the PSI reports shows the content is first being loaded without any styles.

In the film strip you also see the banner image appearing after the category blocks are displayed... this image has no width/height attributes so the browser cannot make space for it before its loaded. Fix the missing height/width attributes and also make sure that Image is NOT Lazy loaded when you re-enable your optimzations.

Thanks David. I've deactivated everything now.

The issue with that main image is that if I put dimensions on the block element in the html editor it gives me an error. It just doesn't like it there. And the image block doesn't give me an option to set dimensions. I'm not sure how else, aside from a whole new CSS class just for that.

Oh gawd, and then after I added a custom class (home-banner) to the container there's so many levels I don't know how to write that in the css. Any help on that would be greatly appreciated.

If you set the Block Image to Full size ( no dimensions in the fields provided ) then WP should output the width / height attributes by default. But you're using some plugin/function that is also generating a webP image - maybe that is interfering with the HTML?

That did the trick for the CLS on the main image. Thank you.
Not that the numbers are big but any suggestions on the remaining CLS?

Couple of things:
1. The logo is being lazy loaded - use the is-logo-image class in the lazy loaders exclusions to stop that.
2. The content ticker loads a after initial load. But... the bigger problem with that is on mobile devices the tickers height changes regularly - each time it changes it will register CLS which will add up over time in your google console.

I saw that with the ticker. I'm not sure how to approach that and sort it out.

Might be best to remove it on mobile - not sure how long a time a user will see that element at the top of the page.

You say that like I'm as knowledgeable as you wizard master. :)

Could you tell me or point to something to achieve that?

I am having issues accessing your site - its timing out....
How was the element added ? Any HTML involved - if so you can add a hide-on-mobile CSS class to the element - see here:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Sorry David I was moving the site.

You helped me build it. It's a block element.
https://generatepress.com/forums/topic/cls-after-place-wooblocks-on-page/

No problems :)
Ok so edit the Block element - select the Grid Container the ticker is inside - go to the sidebar > Advanced > Additional CSS Class(es) field and add: hide-on-mobile

Perfect. Thank you once again.

Closing