WP Rocket delay JS execution interrupted click event

[kartikpotenza]

Describe the bug
I am facing one issue i don't know how to find solution for the same i am using the WP rocket with the "Delay JavaScript execution" enabled and also exclude some JS files to prevent the bugs.

Now what happening is all the delayed JS loads first then my code that i added on click event executes. For example when i click on mobile filter button it opens the filters popup but since Delay JS Execution enabled on that click all the JS loads first then my code ( on click event ) fires in the Mobile. So due to that it takes 5-6 seconds to open the popup instead of quick open.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://woocommerce-762794-2848808.cloudwaysapps.com/
2. Open it in mobile view or in actual mobile
3. Click on the benefit - https://prnt.sc/roL9KH8O475i it will take time to load
4. Now click again it will load faster

Expected behavior
It should first execute Click event code then load all the JS, I hope that there is some hook or something that i can use to exclude my code completely from this delay same issue i am facing with the Mobile menu.

Here is the sample video - https://screenrec.com/share/KLQ6ep9YTF

[piotrbak]

Helllo @kartikpotenza could you tell me which version of WP Rocket are you using?

EDIT I checked and this is not related to the latest release.

[kartikpotenza]

I am using the 3.18 - https://prnt.sc/-cf4DQ87mqKv

[kartikpotenza]

I have updated to latest version ( 3.18.1.4 ) and facing the same issue.

[WalrusSoup]

i think that we need to have another mode for delay-js where user action events are fired earlier in the lifecycle. Right now it queues up all the JS and that is executed before the saved user events are dispatched. This is kind of a chungus.

Kinda wish there was a way to tell it to dispatch user events then do all that extra work so responsiveness is not impacted as badly. The only caveat would be that element you're clicking would need to have nowprocket or white-listed JS so it actually can handle the event.

Edit: Realizing I added this without much contextual help to the original poster - sorry about that. I would say added nowprocket to your chunk of JS handling the menu click and make sure it accounts for TouchDown. If you have profiling enabled, make sure there is not a massive script crawling the dom on insert which will create a huge delay before your userEvents fire. In the inspector, you can set a breakpoint on the backed up events in the sources tab (it will be at the top where WPRocket adds it's handlers). This could help in combination with the network tab stop JS execution so you can see what's piled up in front of your click.

Under performance you should be able to see the stack of JS being piled on, you can try taking out the large offenders.

[kartikpotenza]

I Have tried it with this code which all added in nowprocket JS just to test if i can intercept the JS and execute script before any script but It doesn't work.

window.addEventListener( 'click' , function ( event ) {
event.preventDefault();
console.log( 'clicked' );
console.log( event );
});

And it's not about MENU it's about the first click. It's happening on first click only currently i have added the age verification popup for new users so Now issue now shift to the popup. Now popup takes time to close. It's like that issue is with the first click event. On first click all Delayed JS loaded first then any click event code fires. The JS that handles the filters is already excluded from the delay setting in WP rocket.

Also let say some how i managed to fix that what about the other feature i need to add patch for all click event which it not fissile, Only solution it that first any click event should fire Because it's already excluded from the delayed from the execution setting. Still the JS load first then code executes.

First there was issue like had to click twice because all the JS put in the delayed JS. Now it's works in first click but it's takes up tp 10 seconds which is not good users will thing it's not clicked and it will keep clicking and it stake that event and misbehave when it fires. It even worst than that.

[astbarc]

I'm having the same problem with the latest version of the plugin.

For example, if I click on a drop-down menu as soon as the site loads, it waits for a few seconds instead of launching immediately.

This is not happening with a page that is not cached.

[WalrusSoup]

I wonder if its possible for the JS code fire after the original event? I think that would likely solve the problems here.

[kartikpotenza]

I don't think they have solution for this issue they indirectly said no, Here is the response from theme. I really disappointed with them this one is second issue that i have faced which just ignored without any solution.

This happens, especially because WooCommerce and Elementor have a lot of scripts with dependencies, I tested even excluding a long list of inline scripts, but unfortunately it was not possible to get everything working perfectly without any delays.

As this exclusion is likely to affect the score, due to too many excluded scripts, Elementor, Theme and Woocommerce, you would have to decide, if this error is essential.

The intention is not to ignore this problem, but generally, mobile users do not tend to open the hamburger menu in the first interaction with your website, usually (we/they) tend to browse first and then all the scripts are loaded, so this is an incentive to keep Delay JavaScript Execution active.

I hope all goes well with your website despite this error.
wishing the best,

[Garnet-Fox]

A strange decision. Nothing should interfere with the user's interaction with the page. With such delayed loading of scripts, sites in slow networks or on slow devices will sometimes seem broken. This is unacceptable for commerce. There are many sites on woocommerce, and many on constructors. These sites need significant performance and optimization, but it turns out that they do not meet the requirements :(

[Garnet-Fox]

I will add that the version of the delay script 1.2.6 will also not allow the action to be executed until the delay scripts are loaded. Here, it seems that wrapping heavy non-critical scripts in a zero settimeout works well, scripts like Google Analytics. And another not very good property of the new version of delay scripts was noticed. When loading a site on mobile devices, if the actions have not yet been performed and if we start quickly scrolling down the page, we can get Violation Handling of 'touchmove' input event was delayed for ХХХ ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive. Which has a very bad effect on INP.