Burger Menu JS click action is deferred by WP-Rocket

Hey El,
Thinkjarvis shared this thread: The best settings for Enfold and WP-Rocket which you may find helpful.
But I believe this this thread is what you are looking for: Wp Rocket broke my hamburger menu, tags and accordion
The issue was the user was using the REMOVE UNUSED CSS option so the solution was to add these classes in the CSS safelist in the Wp Rocket REMOVE UNUSED CSS option:

.main_menu
.menu-item-avia-special
.av-hamburger
.av-hamburger-box
.av-hamburger-inner
.av-burger-overlay
.av-burger-overlay-scroll
.av-burger-overlay-inner
.av-active-burger-items
.av-burger-overlay-active
.av-burger-overlay-active-delayed
.av-hamburger--spin
.av-js-hamburger
.avia_hidden_link_text
.av-burger-menu-main
#av-burger-menu-ul
#avia-menu
.av-width-submenu 
.av-active-burger-items
.current_page_item 
.current-menu-item
.av-active-burger-items
.avia-menu 
.av-main-nav-wrap
.menu
.av-main-nav
.av-width-submenu 
.sub-menu
.av-burger-overlay-bg
.inner-container
#header_main

Best regards,
Mike

Hi,
Did you try the first link that I posted with the javascript files to exclude?

/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.js
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/dynamic_avia/avia-footer-scripts-(.*).js
/enfold/js/avia.js
/enfold/js/shortcodes.js
/enfold/js/avia-compat.js

Best regards,
Mike

Hi,

\js\avia-snippet-hamburger-menu.js
\js\avia-snippet-hamburger-menu.min.js

are you using the REMOVE UNUSED CSS option in wp-rocket?

Best regards,
Mike

Hi,

Thank you for the info.

The avia-hamburger-menu-js script still has the defer attribute when we checked the site. Have you tried using the absolute or full URL in the exclusion?

<script type="text/javascript" src="https://w2n9d6m2.rocketcdn.me/wp-content/themes/enfold/js/avia-snippet-hamburger-menu.min.js" id="avia-hamburger-menu-js" defer=""></script>

Try to add the following lines in the excluded javascript files field.

https://w2n9d6m2.rocketcdn.me/wp-content/themes/enfold/js/avia-snippet-hamburger-menu.min.js
https://aerobis.com/wp-content/themes/enfold/js/avia-snippet-hamburger-menu.min.js
/wp-content/themes/enfold/js/avia-snippet-hamburger-menu.min.js
https://w2n9d6m2.rocketcdn.me/wp-content/themes/enfold/js/avia-snippet-hamburger-menu.js
https://aerobis.com/wp-content/themes/enfold/js/avia-snippet-hamburger-menu.js
/wp-content/themes/enfold/js/avia-snippet-hamburger-menu.js

Best regards,
Ismael

Hi,
Strange, I would imagine that the other thread would have lead to the solution as it seemed to be the same situation.When I check your site with the inspector emulating a mobile device and view the scripts loaded and then click the burger menu 20 additional scripts are loaded:

most of which I don’t think apply, such as FB, YT, reputation badge, but a few WordPress core scrips load from /wp-includes/js/ like wp-polyfill.min.js which sometimes is used as a “bridge” between scripts, so perhaps this is part of the issue.
Try looking at these scripts and see if this helps.
I also note that if you look at the DOM in the inspector you can see all of the scripts that get the data-rocket-status=”executed” attribute when you click the burger menu, and one that stood out to me was the variables for the avia_framework_globals

I’m not sure how you could allow these variables in wprocket but perhaps this is related.
I tried to search for other threads with this issue for possible clues, but the only other one I found was the one I linked to and you have already followed those steps.
Your not using any other plugins like Autoptimize and you tried disabling Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression right? It looks like you are using a CDN, perhaps try disabling it for now to ensure that there is on conflict.
The only other thing that I can think of is to disable all of the wprocket settings so the burger menu is working correctly and then enable one at a time, clearing the cache with the CDN disabled until it breaks again and reviewing it. Or perhaps try adding all of the known js files from WordPress and Enfold until the burger menu works correctly and try removing them one at a time until it breaks and you find the combination that you need.

Best regards,
Mike

Hi,
I have asked the rest of the team for any advice, and either I or they will reply with further ideas, Thank you for your patience.
It looks like your CDN is still activate, please disable this for now so we can be sure there are no conflicts and try the other steps above.

Best regards,
Mike

Hi,
I have not heard any feedback yet. Perhaps if you could create a staging site we could examine closer, if you do please try to disabled the CDN for it, because often when testing the CDN will skew the results so that the cached is not cleared when you think it is. Often it is these little things that turn out to be the issue.
It seems that this be related to something locally as we are not seeing this issue with other sites, other than the one we linked to above.

Best regards,
Mike

Hi,
Thanks for the link to the WP Rocket bug report, the “solution” at the bottom leads to a 404 page, and the very last post from Nov 30, says it is not a working solution so perhaps WP Rocket is still working on this?
Nonetheless I will look at your staging site, please include an admin login in the Private Content area to the staging site so we can examine closer.

Best regards,
Mike

Hi,
Thanks for the login, when I test your page above with the Dev Tools inspector for mobile device (425px) and am not logged in I see the delay when clicking the burger menu, but when I am logged in for the same page there is no delay when clicking the burger menu, even when I clear my browser cache with a hard reload.
I also tested on my real Android device and had the same results.
Do you also experience this also? Please try.

Best regards,
Mike

Hi,
Ok, its solved, please ensure to clear your mobile browser cache, please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike