Archived topic
CLS issue on Desktop
6 replies · Started by Tom on July 21, 2021
I have a problem with CLS on desktop - I'm getting a CLS of .21 mainly caused by this element:
It goes away if I disable WP Rocket and Autoptimize, but that makes performance terrible.
I've tried installing the local Google Fonts plugin as suggested in one of your previous support responses but that doesn't help.
I've put the site link in the private information area.
That element was stripped out - it's this: <div id="page" class="site grid-container container hfeed grid-parent">
Hi there,
generally its not wise to use 2 x optimzation plugins unless you make sure that each plugin is not doing the same thing. For example: if one plugin is optimizing CSS then the other should not.
Looking at the site, i see you have the Optimized CSS Delivery option enabled on WP Rocket. This, unless properly configured is a common cause of CLS. I would begin by removing that option.
Thanks David. I've turned that off but it doesn't make any difference.
In WP Rocket, 'Remove Unused CSS' appears to be the problem. But turning it on gives me very good performance scores (100% on Pagespeed Insights for mobile).
Is there an easy way to identify CSS used by GeneratePress that should be omitted from 'Remove Unused CSS'?
I am not sure thats going to help, on initial load the major CLS shift i see is caused by the Uber Menu missing its styles.
You may want to ask WP Rocket support for some guidance
I also notice that when i hover over images there is a layout shift - this won't be picked up in the Google PSI Lab Data as that only measures on load, but those hover event triggered shifts are going to be gathered in Field Data by google search console. I am not sure what its meant to be doing or what it is causing them - i assume theres a plugin at play.
Hi David
Thanks, that's really helpful.
You're welcome
