Archived topic
Website desktop CLS more than 0.1 suddenly and It used to be good url before
3 replies · Started by edward on February 4, 2023
our website: https://leelinesourcig.com
You can check the details repoart by this link: https://pagespeed.web.dev/report?url=https://leelinesourcing.com/is-temu-legit/&utm_source=search_console&form_factor=desktop&hl=en
40% of the cls is good, and 40% needs to be improved
https://paste.pics/04619c649cec4b398fbfd3504dd5fc5b
Before January 15, 2023, the website desktop cls is good, and the website has not been modified, and the cls desktop is greater than 0.1 suddenly. I don’t know where the specific problem is. Please help me find the specific reason and how to fix it. Thanks very much.
Hi there,
the webpagetest.org is much better for diagnosing issues such as this - see the test i ran here with focus on CLS:
https://www.webpagetest.org/vitals.php?test=230205_BiDc98_9F5&run=1#cls
By hovering over those images you can see the CLS shift.
There are 2 main issues:
1. Your google font plugin is adding display: swap to the fonts CSS.
This means the browser displays a system font then swap it to the actual font once it is loaded. Which results in CLS.
Disable that option.
2. Your navigation is prone to reflow. This is semi-related to the #1 font issue. On initial load, there isn't room for all the menu items on one row causing the layout to shift.
Fix the font issue first.
Then check the site on webpagetest again to see if the nav is still reflowing.
If it is, look to makes some space in your nav. eg. reduce the logo size, reduce the menu item font sizing or spacing.
Thanks for your help. We have reduce the logo size and desktop cls testing is ok now.
Glad to hear that!