Archived topic
Featured image causes CLS issue
5 replies · Started by Sunil on August 23, 2022
Hello there
I'm having a CLS issue for my featured image and am assuming that setting minimum height CSS can help solve it (having a placeholder set can make it work better).
Can you suggest the correct CSS for all the screens to improve the score?
Hi Sunil,
Can you try disabling the Thrive form that appears on top of the header? Not sure if it’s causing the CLS but it’s pushing down everything once it loads.
Hey
Tried that. It isn't causing the issue (doesn't load at all on mobile and only on exit intent on desktop). Google pagespeed shows the featured image causing the issue. I honestly can't see the CLS through manual detection but no idea why google thinks the featured image is the issue.
Tried manually checking as well, and couldn’t see any CLS aside from the Thrive form.
Can you try temporarily disabling WP Rocket and Perfmatters, and then test just to check if an optimization setting is causing this?
Got this report when checked on webvitals.dev
https://webvitals.dev/cls/93GPMCgtECHbWuDFaeU5
Looks like lightweight social icons are causing the main CLS issue. Can you help with that?
Hi there,
the Lightweight social icons, try adding:
.lsi-social-icons {
min-height: 160px;
}However the issue that Fernando mentions is something you will probably want to address. See here:
https://www.screencast.com/t/oLRgnY6rPky
Thats a mobile PSI report. In the diagnosis for initial load the mobile has 0 CLS. But in the user experience it is 0.24.
User experience data will capture CLS that happens after load, and that Subscribe form appears without a user interaction and it shifts the entire page down ( by adding Top Margin to the Body ). Its a text book cause of hidden CLS issues.
