Archived topic
CLS high because of the expandable submenus on mobile
3 replies · Started by Laurentiu on June 30, 2021
I have this website that started to have high CLS on Google Search Console. I checked it and the only part I found to have high CLS is the menu, when I open the submenus.
Do you have any idea about how can I solve this? I noticed on GeneratePress website you show the submenus already expanded but on this website there are a lot of submenus so can't do that.
Any help is really appreciated.
THe First Contentful Paint and Largest Contentful Paint are also a little bit higher, so any idea about how to lover those would be great.
Thank you!
Hi there,
i don't believe that is the issue.
CLS only gets counted if a the Browser Layout Instability API records an unexpected shift ie. not triggered by a user action ( such as clicking a submenu to open ). If a user event occurred within 500ms of the shift then it doesn't get counted. The API records the user event with the hadRecentInput Flag. If that is true (YES) then no CLS is counted. I tested your site in browser dev tools and as expected you can see the LS Had Recent Input is YES when opening a menu:
https://www.screencast.com/t/yWcxc21k
If this wasn't the case we would expect to see considerably higher CLS values as mobile sub menus opening shift the entire page content down.
So unless something is interfering with the API data they shouldn't return a CLS value.
You can try excluding this as an issue by using the Off Canvas Panel for mobile - any false positive CLS values would be smaller as the canvas panel is a fixed element so it won't affect the page layout when a menu is open.
So what else could it be - I see a Chat Bot element that appears without any user input which does register CLS. And if i wait long enough and rather randomly a chat message auto opens which also registers CLS. You may want to raise this with the Chat Bot author.
Onto the other metrics - i ran a PSI test:
And i have never seen this before - "Over the previous 28-day collection period, field data shows that this page cannot be assessed due to missing required"
And there are also NO opportunities being listed for improving the Lab Metrics.
Very odd - the only Diagnostic issue that gets flagged is the Avoid an excessive DOM size - which is due to the large amount of content on the post.... and running a webpagetest org we can see the initial HTML request accounts for the largest amount of time to load the page:
I can't really advise on how to improve that without reducing the content on the page or using page breaks to paginate the content.
Thank you very much, David!
I will check the resources you've sent and also try to do something with the chat, maybe set it up to load when the page loads.
Glad to be of help
