Archived topic
CLS issue caused by featured image on post page
5 replies · Started by Tony on August 10, 2022
Hi David,
I’m getting high CLS values caused by the featured image on post pages. My Customizer > Layout > Blog –> Featured Images width and height fields are empty.
The Media Attachment Size is set to “full”.
I tried disabling lazy loading for the image with the code you posted in another thread, but it still persists.
When I throttle my connection, I can see there is no reserved space for the image and once it loads, it shifts down all content below it.
Thanks for your help.
Hi Tony,
I can’t seem to replicate the CLS in the link provided.
See: https://share.getcloudapp.com/BluG9w9q
Also tested in pagespeed.web.dev: https://share.getcloudapp.com/yAu1ONdx
Can you try testing again?
Hi Fernando,
Please have a look at the link I added in the private section. Our users use mobile devices with slower connections. There the CLS is more visible. You need to throttle your connection to 3G or similar.
https://share.getcloudapp.com/Wnu7Ogep
I also see it in pagespeed.web.dev https://share.getcloudapp.com/KoujPb0g
Hi there,
see here:
https://www.screencast.com/t/5Kh1WspejVo
The green boxes show that the width and height attributes are present on the image. Which is what the browser requires to reserve the space. So that is Good!
But the Red box shows that Cloudflare mirage scripts are being used to load the image. And that looks to be the cause of the problem. Other users have reported this issue:
https://community.cloudflare.com/t/mirage-setting-may-trigger-massive-cls-on-mobile/278418
You should check with Cloudflare support or disable that function.
You're the man! Thanks a lot.
Glad to be of help!
