Archived topic
Cumulative Layout Shift > 0.1 on Mobile
10 replies · Started by Colby on March 10, 2022
Hello,
I am seeing some high CLS numbers on my mobile pages according to Lighthouse and Pagespeed.web.dev. Desktop appears to be good at 0, but mobile returns a CLS of 0.12.
Screenshot of the contributing areas: https://imgur.com/5KlI3VF
I can't really think of anything I've done to create this issue. I have another site running the same theme with no issue.
Site URL is in the private information section.
Thanks for your help!
Hi there,
Can you disable Breeze Cache and any other caching/optimization plugins or server cache you might be using first?
Let me know :)
Sure, Breeze disabled. No other optimizations enabled. Same result.
Can you try adding this CSS?
.site-content {
margin-left: auto;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Adding this CSS did not change the CLS. I had actually tried that before, because I previously had a CLS issue on another site with just desktop version. It fixed my issue that time, but does not have an effect in this case.
Just ran the mobile Lighthouse test and CLS is showing 0 to me:
https://www.screencast.com/t/37qhfEqR8r4
I tried clearing my browser cache. I'm logged out of WP, using private browsing mode when running the test. Still showing 0.12 for me:
Something weird is going on, I just noticed it's showing the wrong logo in mobile on the test preview. Live site is correct logo. Maybe that has something to do with it. Let me try to figure out what's going on with that.
Hi Colby,
I ran 2 tests, the first with the wrong mobile logo has 0.12s CLS, the 2nd with the correct mobile logo and mobile header, it gets 0 CLS:
https://www.screencast.com/t/wkhPWl8xJPd
When the header on mobile occupies too much space, it creates CLS, so keep using mobile header :)
Ok, we're good now. I removed and added the site logo's again because I noticed lighthouse was picking up the wrong logo file, from the GeneratePress export from another site. Not sure if that's even possible, but that's the only link I can think of between the two sites. Anyway, doing that to the logo's fixed that and as a result the CLS is now 0 again.
Thank you for your time and help!
Glad we could help :)
