Community Forums › Forums › General Genesis Framework Discussions › Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro
Tagged: CLS, core web vitals, Magazine Pro
- This topic has 77 replies, 34 voices, and was last updated 1 year, 1 month ago by Maarklarius.
-
AuthorPosts
-
June 4, 2021 at 6:22 am #504210AnitaCKeymaster
@thenerdynurse You have your settings in WP-Rocket locking the code down too tightly. It's stopping the Javascript from running. You'll need to do some testing with WP Rocket. I have Wellness Pro on a site right now and that's not happening. So check the settings.
Need help with customization or troubleshooting? Reach out to me.
June 4, 2021 at 10:12 pm #504214thenerdynurseParticipantI have excluded the Javascript for this menu, but I've noticed that it's not loading the responsive menu at all when I am testing in the page speed tool. It's shifting a wrapped desktop menu and never actually loading at all.
Specifically, I am noticing the responsive menu will not load in the chrome incognito browser.
Any ideas what could be causing that? I'm assuming this is the real issue.
Patient, Nurse, and Technology Advocate at The Nerdy Nurse.
June 23, 2021 at 9:02 am #504277jtwillia2ParticipantIf there are any developers in here, I'm willing to pay someone to help me get a good CLS score for my website, which is on the Magazine Pro theme. I'm not even sure if the inherent Genesis menu issue described here is what's causing mine, and investigating it properly is beyond my skill set.
Based on the scans I've run, it's at about 0.14, right above Google's threshold of 0.1, and thus gets a "Needs Improvement" in Search Console.
June 25, 2021 at 7:52 pm #504283AnitaCKeymaster@thenerdynurse I get a 98 on Performance for your website and the CLS is zero. This is with Chrome Incognito running the test at the recommended network throttle and mobile size 340 x 640 viewport.
@jtwillia2 from my first test on your site, your Google Ads are the biggest issue you have. The loading of those is taking forever and it's shifting once they do load. Are you using Google Auto Ads?
Need help with customization or troubleshooting? Reach out to me.
July 14, 2021 at 1:41 am #504329MiyaParticipantHello Anita,
My website doesn't work the way you suggest.
I install plugin and add css code.
Do I need to edit the code?
Please tell me how to deal with this problem.Website: https://moukegaku.com/blog/
post page sample: https://moukegaku.com/internal-links-for-seo/
Theme: Monochrome Pro
CLS: not pass
plugin: WP-RocketSorry if I have made any errors in my English writing!
August 2, 2021 at 1:14 pm #504364jtwillia2Participant@Anita, the main site I've been focusing on now is https://www.optimizedportfolio.com/.
August 23, 2021 at 10:15 am #504410Mike1019ParticipantHas Studiopress resolved this issue yet? I'm using the eleven40 Pro child theme and have the same issues.
August 24, 2021 at 12:01 pm #504411builderkpParticipantGenesis sample has a similar issue when using Autooptimize.
March 2, 2022 at 7:41 am #504781familyfocusblogParticipantI have magazine pro and I am experiencing the CLS issue on both mobile and desktop on my site https://familyfocusblog.com/
I tried code that was suggested to me by Studiopress, almost identical to Anita's solution. It seemed to improve desktop performance but not mobile. Also, oddly, if I run two page speed insight tests in a row, it can have wildly different results. I can get a 38 on mobile and and 85 on desktop then a 75 on mobile and 98 on desktop. Also, I fail core web vitals on desktop.
Any insight would be greatly appreciated.
Thank you!March 3, 2022 at 6:18 am #504789thenameoftaste1ParticipantI am also facing the same issue at my brand site whats on sale today . I used many plugins to solve this but badly failed. I am using metro pro theme. Can someone tell me how to fix CLS.
March 5, 2022 at 9:20 am #504797familyfocusblogParticipant@jtwillia2 Since you also have magazine pro, I thought I would ask if you ever got the issue resolved so you could pass CLS. Thanks!
@anita From looking at this thread you seem very knowledgable so I would be most appreciative of your advice. Thanks!March 11, 2022 at 7:28 am #504826familyfocusblogParticipantLooks like I should have tagged @anitac, any suggestions for me? Thanks!
March 29, 2022 at 11:40 pm #504907robertscott11ParticipantAlso core web vitals and page experience components are now major part in layouts engaging for user experience as a ranking factor. So these themes are also fully optimized on mobiel menu for CLS and other intentions.
April 9, 2022 at 7:14 am #504999GlofiishParticipantThank you very much, I was just looking for a solution to this problem
August 9, 2022 at 9:50 am #505657EatDrinkDealsParticipantThe menu is still causing me to get poor CLS scores for mobile. So I'd like to try moving the menu to the bottom of my web pages. However, when I go into Customize -> Menus I am only allowed two menu locations, Before Header and After Header. How can I move my menu to the bottom of the page (for Mobile only)?
August 11, 2022 at 11:34 am #505666AnitaCKeymasterSorry I've missed your posts. How is everyone testing their themes for Core Web Vitals? Some older themes will naturally need to have their code tweaked. As you know, a lot of the StudioPress themes have been retired and only about 10 are still offered. The fix for Core Web Vitals and CLS is going to be different for everyone - on a case-by-case.
The best way to find out what is actually causing the issues is use Chrome > Incognito Mode.
And the best blog I've seen on this is here - https://www.shaytoder.com/how-to-improve-cls-cumulative-layout-shift/.
You can find a ton of information on Shay's site. I only use Chrome > Incognito with my settings configure how described there.
Need help with customization or troubleshooting? Reach out to me.
August 11, 2022 at 3:11 pm #505669captainjhoniParticipantIt is something in its core framework. I don't believe it is child theme specific. I think it is something else entirely.I’m sure you’ve experienced this as well. When using the Amazon Echo Show or other Alexa enabled devices, you get a brief flash of the menu before it disappears. It can be a little annoying because you have to click on the screen to continue, but fortunately there is an easy solution for this. While the use of the CSS property display: none; to hide the menu in the above example might make sense to avoid any additional page loads on the user's first-time visit to the site, it's not intended to work as it does.
The navigation element has a display: none property by default waiting for the CSS class that is needed to be added to add the style. That's what I was thinking. But I haven't tested it yet. is there any workaround for this? I was wondering whether it's for the sake of SEO and user experience, because the design feels pretty lazy when an unwanted menu item is shown disappearing all of a sudden which should not be shown at all unless the menu toggle is touched.
August 13, 2022 at 11:42 am #505680EatDrinkDealsParticipantTo fix my CLS issue with the Magazine Pro menu I just removed the menu and replaced it with simple HTML links. My mobile CLS score went from .34 (poor) to .0001 (passed). I added the HTML links by using: Customize -> Widgets -> Header Right -> Add a Widget -> Custom HTML.
My site is http://www.seniordaily.comAugust 16, 2022 at 2:27 pm #505687captainjhoniParticipantIt is something in its core framework. I don't believe it is child theme specific. I think it is something else entirely.I’m sure you’ve experienced this as well. When using the Amazon Echo Show or other Alexa enabled devices, you get a brief flash of the menu before it disappears. It can be a little annoying because you have to click on the screen to continue, but fortunately there is an easy solution for this. While the use of the CSS property display: none; to hide the menu in the above example might make sense to avoid any additional page loads on the user's first-time visit to the site, it's not intended to work as it does.https://apkswalk.com/walk-band-mod-apk/
August 19, 2022 at 6:51 am #505708familyfocusblogParticipantI have the most recent version of Magazine Pro. As I mentioned before, the desktop is fine but the mobile is not. CLS is at .497. I tested using page speed insights. It said there were 5 DOM elements but the highest two are:
<div class="site-inner">
0.214<header class="site-header">
0.186Thanks for any advice on this.
-
AuthorPosts
- You must be logged in to reply to this topic.