Nitropack breaks Side Menu (Layout Shift)

  • Resolved rodentooth

    (@rodentooth)


    2 years, 7 months ago

    Hi
    I use nitropack to speed up my site. However, I want to use your UE-Side menu as well. but when a user loads the site for the first time in this setting, the side menu first loads in a ul li format (unformatted) which is shown to the user. only after jQuery is loaded, this style changes to the real styling and the menu disappears, showing the user the real website content.

    This results in a large google pagespeed “layout shift”, and also does not look pretty for the end user.

    how can I avoid this?
    With other menu widgets I tried, this does not happen, but unfortunately UE-Sidemenu is what fulfills my design needs.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Unlimited Elements

    (@unitecms)

    Hi. Generally if nitropack breaked they need to fix. But please write us support ticket from our site, show us your site with the bug and we check if there is something we can do from our side.

    Thread Starter rodentooth

    (@rodentooth)

    Thanks for your help. Turns out your plugin is great!
    because jquerly loads at a later point to serve a visible page to the user ASAP, the “closed” property of the menu is not loaded (which is margin-left: -300px;)

    Steps I did to fix, for future me and others:

    1. edited Side Menu HTML (great feature!) as following:
    1.1 Set the margin-left property of the sidebar element to -300px (closed state)
    1.2 set an unique id to the side menu, such as “sidemenu-id-ue-1”

    2. added a global js snippet to the page (which gets loaded at the same time as jquery, and thus works):
    2.1 set the marginLeft property of “sidemenu-id-ue-1″ to EMPTY ( ” ) with js

    Works like a charm, Layoutshift is zero now ??

    • This reply was modified 2 years, 7 months ago by rodentooth.
    • This reply was modified 2 years, 7 months ago by rodentooth.
    • This reply was modified 2 years, 7 months ago by rodentooth.
    Plugin Author Unlimited Elements

    (@unitecms)

    Ok happy that you did it and it worked for you. Good luck!

    Thread Starter rodentooth

    (@rodentooth)

    A suggestion to the devs: maybe hide the nav bar without relying on jquery, such as I did? deferred loading is a real thing! but the fact that your plugin allows me to do such changes on my own is just fantastic.

    Plugin Author Unlimited Elements

    (@unitecms)

    There are many widgets that relying on jquery. Avoid using it not logical. Nitro pack should handle.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Nitropack breaks Side Menu (Layout Shift)’ is closed to new replies.