Archived topic
CLS Disparity and I cannot resolve it.
5 replies · Started by Ben on October 10, 2021
Dear support team
I have encountered the following issue,
When I use the PageSpeed Insight to test my main page (or any other individual page or post) I can get a perfect loading, no CLS at all, but if I go check the CrUX Dashboard from goolge, it shows huge CLS for my entire site. Refer to below Image:
Also I can not seem to pass the core web vital test, refer to below image,
I tried to edit layout and avoid any possible plugin affects CLS, have no clue.
Can any one can help me?
Best Regards
Ben
Hi Ben,
I've checked the site and the most visible CLS is the WPSP list placed above the fold with images being lazy loaded and not having any image height and width attribute.
Here's a few things to try out.
1.) On WPSP, don't use image height and width field.
It's an obsolete feature. Tom actually removed it on the beta because it's causing this flag - https://share.getcloudapp.com/wbu8ZGlz - on Google PSI.
The image height and width field removes the attribute, causing the flagged issue.
2.) Disable lazy load on images above the fold.
Images above the fold (images that are immediately visible on the page when it loads) can cause CLS if lazyloaded because lazy loading it causes it to load late, causing a shift when it finally loads.
Thanks Elvin
I have just deleted the height and width from WPSP.
For point 2, I us WP Rockets to lazy load image, i just disabled it and see how it goes.
Many Thanks !
Ben
I've checked again and I see that the image height and width field issue flagged is gone.
Now I think what's left is to replace the image with a more appropriate sized one.
Consider using an image optimization plugin to compress the files you're using.
Also, it would be nice if you can replace the image files being uploaded to a lighter/compressed version of it. Uploading an image with 2560px width is a unnecessarily large in most cases. Consider replacing it with a smaller file size version of it. :D
Hi Elvin
It seems that I may have found the shifting（CLS） issue, when I use Edge browser to browse the webiste, it apearing flashing and flickers, which means it firstly shows plain content and then reorder the content. Could you please advise if this is becuase the theme or other plugins?
Many Thanks
Ben
Yes that's because the assets (scripts, stylesheets, images, etc) isn't being served in an efficient manner.
You'll need optimization plugins for this. (Example/s: WP Rocket, Autoptimize, Litespeed cache)
Once you have it activated, for starters, set the setting to minify CSS so the stylesheet file size being loaded is smaller.
You then tweak things by enabling a few more settings like aggregating or merging CSS/JS files so the number of requests made decreases.
