how to fix high CLS on generate press theme (both mobile & desktop)

Hi there,

you have several above the fold elements being lazy loaded.
The main one is the Logo Image - most lazyloaders have an option to exclude images using a CSS Class you can use is-logo-image

I suggest you also do this for the custom account icon image.

can you suggest more where i need to add this CSS Class to ?
which image ?

Thanks.

What plugin are you using for Lazy Loading images ?

Hi Dave

i'm using WProcket for lazy load

WP Rocket provides a field that you can add the CSS Class to:

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

so what i need to adding into CSS class for this block ?
can you suggest more i'm quite new for this.

Thanks

because from image that i've captured.
it's not mention about images but it's saying about CLS class with grid-container
not sure what i've to fixing it ?

The PSI Report tells the main element that is moving.
But it is the Logo image that is causing that element to move.

If you can add is-logo-image in the field WP Rocket provides - as mentioned here:

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

so i need to put it like this ??

this having issue on both mobile and desktop actually.
another working great except this CLS issued.

I can't see the image you uploaded - can you only submit JPEG or PNG images in the forum.

at my dummy site. i tried to exclude desktop logo , mobile logo , add friend icon.
but it still high CLS , can you please help to check more ?

Thanks.

i also try to exclude preloaded by WP-CLASS

put this 2 line into exclude image because it's mention that i can put CSS class there also

but no luck it's not help

wp-block-image
wp-block-columns

I just tested that URL and I'm not seeing any CLS coming from the logos anymore. I'm seeing 0.005 CLS now.