Archived topic
Navigation is Creating a Layout Shift
7 replies · Started by Derek on April 7, 2021
Hi Team GP,
A couple of months ago I opened this similar thread - https://generatepress.com/forums/topic/mega-menu-navigation-desktop-creates-high-cls/ - I implemented the fixes you suggested and they appeared to make an impact on the CLS issue.
In March, I took a more extreme step I removing ads from my site so as to have a 0 CLS baseline to build from (and better determine what ads, CSS, and other elements were creating CLS issues on my site).
After implementing your changes from the previous thread and removing ads-site wide I re-ran the validation in Google's Search Console using the Core Web Vitals validation tool. While the score was improved, it's still reporting CLS in the 0.10 to 0.20 range, putting me in the yellow "Needs Improvement" range.
The only remaining CLS issue I can find is on mobile devices. The GeneratePress sub-menu seems to create a layout shift when clicking through the menu. The more items you click, the more layout shifts occur.
I've been under the impression that objects you click don't create a layout shift, since the user is taking the action. Even so, I am really at a loss as to how to proceed here. I don't see any other potential sources of layout shift on my site beyond this one.
Including a screenshot of Chrome's Dev tools, performance menu, experience row (which indicates the specific layout shifts) in the private info.
Thank you in advance for your help.
Hi there,
first off i checked the site on PSI and both the Lab data and the Origin Summary data are displaying 0 CLS.
Then i ran a performance test in Chrome Dev Tools. On Load shows no CLS.
Now looking closer at the CLS events that are triggered when opening the off canvas sub menus.
The LayoutShift API returns several properties including hadRecentInput.
And each of the CLS events all have this property set as True (Yes). Which means Google will exclude this from the CLS data it collects.
So it looks to me as the site is all clear - unless there is something else i have missed ?
Hey David,
The following URL has info directly from Google regarding CLS and the Core Web Vitals update.
https://www.seroundtable.com/google-updates-core-web-vitals-page-experience-faqs-31174.html
Last week Google confirmed that lab data is more or less irrelevant, as is on load. Google is assessing CLS during the full experience of the page for real users. So only the field data and what is reported in Google Search Console is being used as the benchmark on whether or not the site can validate.
Today, most of the remaining desktop URLs on Search Console validated. Indicating to me that the problem is exclusively on mobile (see screenshot in private in).
I've audited numerous pages looking for any layout shift at all. The only remaining shift in any capacity is the mobile menu.
But as you say, it's covered by the hadRecentInput.
I guess I'm really at a loss here. This mobile menu is the only remaining issue I can find. Can you think of any other reason why Google would fail to validate these pages?
I guess I’m really at a loss here. This mobile menu is the only remaining issue I can find. Can you think of any other reason why Google would fail to validate these pages?
Since the mobile logo is part of the mobile menu it's getting flagged with an issue. I'd try addressing that.
Your mobile header's logo is being flagged with "Image elements do not have explicit width and height".
And img elements not having attributes are actually mentioned as a possible cause of CLS. That said, we can try adding these missing attributes and see if it improves.
Check the PHP snippet here:
https://docs.generatepress.com/article/generate_mobile_header_logo_output/#setting-a-width-and-height
Replace 999 with your preferred image width and height attribute.
Thanks, Elvin.
I've implemented that function. It seems to be working. Now to just hold my breath and validate with Search Console again.
Thank you for your help.
No problem. Glad to be of any help. Let us know how it goes. :)
Well, some combination of some things seems to have made the final different. All pages, both mobile and desktop are now reporting as "good URLs" in search console, and fully passing all Core Web Vitals validation.
Over the last week I:
1) Implemented the logo fix you suggested here
2) Removed Amazon ads from my site (which didn't appear to be causing issues, but I am getting desperate enough to try anything)
Many pages still are reporting non-zero CLS in the 0.07 and 0.08 range, so it's clearing the 0.10 threshold, but only barely.
In any case, hopefully my experience can help others resolve their similar CLS issues.
Thank you again.
Nice one! Thank you for sharing it with us. :)
