Support » Theme: Kontrast » Problem: new mobile menu too slow

  • Resolved webbeetle

    (@webbeetle)


    Hello, Alexander!

    I have the problem that the new mobile menu slows down my site!

    Every time one loads any page of my site on mobile, first the menu flashes up in its fully expanded state – before the page shows! I guess this gives me the issue with the “Cumulative Layout Shift”, which I didn’t use to have before…

    Could there be any caching option I might have missed?
    After all, the menu doesn’t change very often. I’m using WP-Rocket as cache plugin.

    You can see this live on my site or on this capture of the PageSpeedInsights by Google (the small screen captures): https://snipboard.io/S6fj1b.jpg

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Theme Author Alexander Agnarson

    (@alxmedia)

    Hi! Sorry for an extremely late reply.

    The new menu css should hide the menu before it loads. Are you sure your phone isn’t using some cached version of the site? Try using a private/incognito tab to load the page with on the phone.

    I see your site without issues now, so perhaps you already solved it?

    Thread Starter webbeetle

    (@webbeetle)

    No, Alexander,

    this unfortunately is not solved!

    If you run my page through Google’s PageSpeed Insights test, the preview thumbs come up exactly as they do on my mobile screens (my phone, my wife’s phone, both Android, and my sister in law’s iPhone). First 2 screens blank, then 3 screens with nothing but menu, then the page. This didn’t use to be like this with previous versions.

    Here’s a capture from a test from RIGHT NOW:
    https://snipboard.io/P2IoHB.jpg

    Theme Author Alexander Agnarson

    (@alxmedia)

    Okay, sorry for not looking into this earlier.

    Here is the CSS we are dealing with that should hide the menu before it loads:

    
    /* menu hide and display */
    @media only screen and (min-width: 720px) {
    	.mobile-menu #wrap-nav-mobile { display: none; }
    }
    @media only screen and (max-width: 719px) {
    	.mobile-menu #wrap-nav-topbar,
    	.mobile-menu #wrap-nav-header,
    	.mobile-menu #wrap-nav-subheader { display: none; } 
    	#nav-mobile,
    	#nav-topbar,
    	#nav-header,
    	#nav-subheader,
    	#nav-footer { display: none; }
    	.mobile #nav-mobile,
    	.mobile #nav-topbar,
    	.mobile #nav-header,
    	.mobile #nav-subheader,
    	.mobile #nav-footer { display: block; }
    }
    

    These:

    
    #nav-mobile,
    #nav-topbar,
    #nav-header,
    #nav-subheader,
    #nav-footer { display: none; }
    

    Should hide everything until the nav js loads.

    It adds these when loaded:

    
    .mobile #nav-mobile,
    .mobile #nav-topbar,
    .mobile #nav-header,
    .mobile #nav-subheader,
    .mobile #nav-footer { display: block; }
    

    So I am really confused as to what is going on here. I need to look into this more and perhaps ask a friend what could be going on.

    Theme Author Alexander Agnarson

    (@alxmedia)

    I see now when viewing your site that the nav appears broken for a short time on desktop screens as well when changing page. Not just mobile then. Investigating.

    Theme Author Alexander Agnarson

    (@alxmedia)

    There is a lot of custom css running on the site – do you have any test site to try a clean version of Kontrast to see if you run into the same issues there? Just no plugins and no custom css, to pinpoint where the issue may come from.

    Or, try this: http://demo.alx.media/kontrast/ – any issues there?

    Thread Starter webbeetle

    (@webbeetle)

    This is all my custom CSS from the child theme, which is related to the nav-bar:

    #nav-topbar-nav.nav-menu:not(.mobile){
    font-size: 16px;
    font-weight: normal;
    }
    
    #wrap-nav-topbar {
        background: #fff;
        border-bottom: 2px solid #088198;
    }
    

    I can’t see how this would influence it.

    Could it be cache related (WP-Rocket)?
    It creates a separate mobile cache – see settings screen capture:
    https://snipboard.io/8Egrhm.jpg

    Thread Starter webbeetle

    (@webbeetle)

    Sorry, I’m on terribly slow internet (E mobile) and I think the above screen shot didn’t finalise. The link below is okay, my WP-Rocket settings:
    https://snipboard.io/2C5dEQ.jpg

    Thread Starter webbeetle

    (@webbeetle)

    When I test on GTMetrix I also receive a complaint about lay-out shift, which is related to the first few <div>. Screen capture:
    https://snipboard.io/rKijfq.jpg

    Theme Author Alexander Agnarson

    (@alxmedia)

    Hm, what happens if you disable WP Rocket just as a test?

    Theme Author Alexander Agnarson

    (@alxmedia)

    Do you still have issues or were they resolved when you deactivated some plugin?

    Thread Starter webbeetle

    (@webbeetle)

    Sorry, Alexander @alxmedia

    I’m currently in contact with WP-Rocket support but very seldomly online with my laptop, so things take much longer than they should.

    Yes, WP-Rocket has confirmed that this is caused by deferring critical CSS and are trying to fix it for me. I just replied to them a few minutes ago (they needed login-credentials). Some things are just beyond my self-tought capabilities and current online time restraints.

    I’ll let you know about the outcome.

    Thread Starter webbeetle

    (@webbeetle)

    Okay, fixed by WP-Rocket. They excluded the theme’s css from deferred loading.

    Theme Author Alexander Agnarson

    (@alxmedia)

    Great to hear you fixed it.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Problem: new mobile menu too slow’ is closed to new replies.