Open DahmaniAdame opened 2 years ago
Exclusions are heavily affecting the performance.
Alternatively, it is possible to disable "sticky" menu in Elementor:
Full-screen image: https://i.imgur.com/Oow9nr0.png
This way, only jQuery script would need to be excluded from the Load JavaScript Deferred option. No exclusions would be needed for the Delay JavaScript Execution, so performance is not affected as much.
UPDATE: after further testing, the Delay JS exclusions were still needed, so only disabling sticky menu did not help much in improving performance for the above-mentioned case.
It took me 3 weeks to figure out the fix for this while still keeping my sticky to the top button on each page. The submenus werent working, the submenu dropdown arrow wasnt showing, and the mobile menu toggle icon was not showing up correctly and instead of three stacked horizontal lines, it was just showing an empty box as a placeholder.
Even though no errors were showing in the browser developers console, I was able to identify the elements themselves and add them to the CSS Safelist under the File Optimization tab/page. Now my menu works flawlessly on mobile and desktop. The following are what ended up on my CSS Safelist:
/wp-content/themes/hello-theme-child-master/style.css elementor-nav-menu-main elementor-nav-menucontainer elementor-nav-menu--layout-horizontal elementor-menu-toggleicon--open.eicon-menu-bar elementor-menu-toggle elementor-nav-menu--dropdown
I also had to exclude many JavaScript files from delay execution. These were the URLS and keywords: /jquery-?0-9.(.min|.slim|.slim.min)?.js /jquery-migrate(.min)?.js /header-footer-elementor/inc/js/frontend.js js-(before|after) (?:/wp-content/|/wp-includes/)(.) /elementor/ /elementor-pro/ /wp-includes/js/imagesloaded.min.js /wp-includes/js/underscore.min.js /wp-includes/js/jquery/ui/core.min.js /wp-includes/js/backbone.min.js /elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js /elementor-pro/assets/js/preloaded-elements-handlers.min.js /essential-addons(-for)?-elementor(-lite)?/(.)(.min)?.js elementorAdminBarConfig elementorCommonConfig elementorWebCliConfig elementorDevToolsConfig elementorProFrontendConfig elementorFrontendConfig /ele-custom-skin(.*)/assets/js/
Hope this helps anyone else experiencing this issue.
Hi, In my case it was enough to add these exclusions https://nimb.ws/1YocO2 Text below if you want to copy/paste:
First textarea: /wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.9.2
Second textarea: /wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.9.2 /jquery-?0-9.(.min|.slim|.slim.min)?.js js-(before|after) (?:/wp-content/|/wp-includes/)(.*)
Kind regards, Pirenko
@CarlPotak @Pirenko, both of you are excluding the compatibility pattern:
js-(before|after)
(?:/wp-content/|/wp-includes/)(.*)
They include Elementor's JS files that would cause the issue.
I suggest you test without the above pattern, as using them will only delay external scripts :)
If you experience any errors after removing them, refer to https://docs.wp-rocket.me/article/1560-delay-javascript-execution-compatibility-exclusions to see if you have are using any of the theme/plugins on the list and apply their respective exclusions.
If you can't find your theme/plugins or the errors persist after apply the recommended exclusions, open a support ticket so we can have a closer look :)
Hi @DahmaniAdame, Thanks for your reply! If I remove that pattern I get a scripting error on the console. Most likely because jQuery is not loaded yet. But you are right... So I went ahead and adjusted the second textarea setting... Here's what I have now: /wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.9.2 /jquery-?0-9.(.min|.slim|.slim.min)?.js
It still works just fine like this! Thanks, Pirenko
Thank you @NataliaDrause
Before submitting an issue please check that you’ve completed the following steps:
3.11.5
Describe the bug When Elementor sticky element is enabled with Defer JS, it might cause the following console error:
In addition to the sticky state not working, it will also break other frontend functions, like the submenu for example.
https://drive.google.com/file/d/1mdPwuvV8Wa0dxykVJvK_fj18tVCQHI3Y/view?usp=drivesdk
Excluding the following fixes the issue:
Possibly the root cause of - https://github.com/wp-media/wp-rocket/issues/4648
In such a case, the same exclusions need to be added to Delay JavaScript Execution as well.
I will leave it to the QA to dig in and confirm the random aspect + the fix.
To Reproduce Steps to reproduce the behavior:
Expected behavior There shouldn't be any errors when the sticky state is used with Defer JS.
Screenshots If applicable, add screenshots to help explain your problem.
Additional context Ticket - https://secure.helpscout.net/conversation/1966571981/359434/
Backlog Grooming (for WP Media dev team use only)