- This topic has 15 replies, 5 voices, and was last updated 2 years, 2 months ago by Ying.
-
AuthorPosts
-
February 13, 2021 at 12:15 pm #1657243Derek
Like many in the forums, I’m working to reduce CLS as part of the Core Web Vitals update. I’ve reviewed numerous CLS related threads, but none of them seem to be the same issue I’m experiencing.
Google Search Console is reporting high CLS for 100% of my desktop pages. I am fairly confident the CLS issue is resulting from the mega menu navigation. While using a CLS Chrome Extension to audit the page I am able to load and fully scroll through the page without any CLS. However, when I hover through the any of the menus my CLS shoots through the roof.
One last night – I know there is a CLS issue resulting from my advertisements also. I’m also working on fixing those. If you view the site with an ad-blocker (as I am doing while testing) you can see the exclusive CLS issue on the navigation.
February 13, 2021 at 7:41 pm #1657422LeoStaffCustomer SupportHi there,
I don’t believe mega menu CSS is the issue as mega menu doesn’t actually display on first load.
I just ran the staging site through GTMetrix and CLS is at 0:
https://www.screencast.com/t/HJFIHR2bqA0sFebruary 13, 2021 at 9:02 pm #1657458DerekThe lab results for CLS don’t seem to match up to the field data CLS report from Google Page Speed Insights, which seem to be what Google Search Console uses to determine whether or not you pass CLS validation. As a result, my site is still failing Core Web Vitals due to CLS.
I’m including a screenshot within the private information.
Using Chrome’s Dev Tools within the performance tab you can see the specific CLS issues resulting from the menu. 5 out of the 6 CLS issues are resulting from the mega menu. I’ve highlighted the 2nd (and largest) CLS issue so you can see what CSS classes are being activated on the live page.
February 14, 2021 at 5:45 am #1657691DavidStaffCustomer SupportHi there,
Layout Shifts come in two flavours Unexpected ( bad ) and Excerpted ( Good .. mostly ).
The most common Excepted shifts occur on a user initiated event. Such as opening a menu.The Layout Instability API measures sets the
hadRecentInput
flag if a shift occurred within 500ms of user initiated event. The problem here is it only measures click, tap or key press events… NOT Hover.How much of a contributing factor is CLS on page ranking is unknown, i would expect it to be pretty low. But if it is a concern, it seems the easiest mechanism to fix the issue is to change the Menu Dropdown from Hover to Click.
UPDATE: I run some tests – the issue isn’t actually with the Mega Menu – its with the standard sub menu … can you try adding this CSS and let us know if that fixes the issue:
.main-navigation ul ul { left: unset !important; height: auto !important; }
February 15, 2021 at 1:59 pm #1659589DerekUnfortunately, that CSS snippet did not seem to make any impact on the CLS. I am still seeing the same CLS issues identified within the Performance tab.
February 16, 2021 at 12:57 pm #1660866DavidStaffCustomer SupportThat CSS should improve the CLS on the non-mega-menu drop down.
For the Mega Menus – i cannot see why your site is experiencing that issue.
I set up a clean install and tested out a mega menu – and i did not get any CLS Issues:Anychance you can disable any 3rd party scripts on the Staging site ?
February 16, 2021 at 2:01 pm #1660936DerekWell…that is indeed further perplexing.
Per your suggestion, I progressively disabled all remaining customizations on the staging server.
1) I started by disabling everything I had added via elements. Still CLS issue.
2) Then I disabled all my CSS. Still CLS issue.
3) Then I disabled GP Premium plugin. Still CLS issue.
4) Then I disabled my child GP theme and just activated the default GP theme. Still CLS issue.All other plugins are still disabled. This is as default as it gets. I really am completely lost as to what to even try next at this point.
February 16, 2021 at 2:16 pm #1660950DavidStaffCustomer SupportCan you add in the Mega Menu CSS to the staging site – so we can check that ?
February 16, 2021 at 4:05 pm #1661030DerekI added the mega menu CSS and the CSS fix included above. No changes.
Including screenshot in the private info.
February 16, 2021 at 4:59 pm #1661075DavidStaffCustomer SupportCan you switch the Customizer > General > Structure to FlexBox.
And use the updated Mega Menu CSS here:https://docs.generatepress.com/article/building-simple-mega-menu/
February 18, 2021 at 3:06 pm #1663781DerekThat seemed to fix the CLS issue with the navigation. However, it broke other CSS for the nav we had. In any case, I’ll try to resolve that secondary CSS issue on my own.
Thank you very much for your help David & Leo. Appreciate your time and attention to help get this fixed!
February 19, 2021 at 3:07 am #1664195DavidStaffCustomer SupportGlad to hear we fixed the main issue.
If you need help with correcting the other issue – then raise a new topic and we can take a look!February 19, 2021 at 9:00 am #1664758DerekWill do. Thanks, David.
February 19, 2021 at 9:21 am #1664789DavidStaffCustomer Support🙂
February 27, 2022 at 10:39 am #2135646NicoleHi,
I’m having the same problem with my navigation causing CLS issues and I am trying this solution but I can’t find:
Customizer > General > Structure to FlexBox.Do I need to enable a module to see this?
Thanks in advance!
-
AuthorPosts
- You must be logged in to reply to this topic.