• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › General Genesis Framework Discussions › Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro

This topic is: not resolved

Tagged: CLS, core web vitals, Magazine Pro

  • This topic has 62 replies, 24 voices, and was last updated 3 months, 1 week ago by patricklm.
Viewing 20 posts - 41 through 60 (of 63 total)
← 1 2 3 4 →
  • Author
    Posts
  • June 4, 2021 at 6:22 am #504210
    Anita
    Keymaster

    @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.


    Love coffee, chocolate and my Bella!

    June 4, 2021 at 10:12 pm #504214
    thenerdynurse
    Participant

    I 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 #504277
    jtwillia2
    Participant

    If 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 #504283
    Anita
    Keymaster

    @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?


    Love coffee, chocolate and my Bella!

    July 14, 2021 at 1:41 am #504329
    Miya
    Participant

    Hello 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-Rocket

    Sorry if I have made any errors in my English writing!

    August 2, 2021 at 1:14 pm #504364
    jtwillia2
    Participant

    @Anita, the main site I've been focusing on now is https://www.optimizedportfolio.com/.

    August 23, 2021 at 10:15 am #504410
    Mike1019
    Participant

    Has 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 #504411
    builderkp
    Participant

    Genesis sample has a similar issue when using Autooptimize.

    March 2, 2022 at 7:41 am #504781
    familyfocusblog
    Participant

    I 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 #504789
    thenameoftaste1
    Participant

    I 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 #504797
    familyfocusblog
    Participant

    @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 #504826
    familyfocusblog
    Participant

    Looks like I should have tagged @anitac, any suggestions for me? Thanks!

    March 29, 2022 at 11:40 pm #504907
    robertscott11
    Participant

    Also 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 #504999
    Glofiish
    Participant

    Thank you very much, I was just looking for a solution to this problem

    August 9, 2022 at 9:50 am #505657
    EatDrinkDeals
    Participant

    The 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 #505666
    Anita
    Keymaster

    Sorry 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.


    Love coffee, chocolate and my Bella!

    August 11, 2022 at 3:11 pm #505669
    captainjhoni
    Participant

    It 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 #505680
    EatDrinkDeals
    Participant

    To 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.com

    August 16, 2022 at 2:27 pm #505687
    captainjhoni
    Participant

    It 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 #505708
    familyfocusblog
    Participant

    I 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.186

    Thanks for any advice on this.

  • Author
    Posts
Viewing 20 posts - 41 through 60 (of 63 total)
← 1 2 3 4 →
  • You must be logged in to reply to this topic.
Log In

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble