waitForUserAction OR timeout

[morvy]

Hi,
would it be somehow possible to extend the default behavior of waitForUserAction so if there is no interaction in limit, it will still load the script/css/dom ?

I noticed that on a page where I have waitForUserAction enabled, some users only open in new tab and leave it there for a while, then come back and the page starts loading (or they close the tab and scripts don't trigger at all).

[shinsenter]

Hello @morvy

Can you give me more specific details on how to use the library with your idea?

I'm wondering if you need to use the waitForUserAction option when you want your resources to load or execute even without user interaction on your website. You can certainly load or execute certain scripts without the waitForUserAction option, such as tracking scripts, for example.

I think it would be better if you give some specific examples, so I can consider whether it's necessary to implement your idea versus keeping my library small and lean.

[morvy]

Hello :)

currently I use a script to load iframe (which then loads tons of styles, fonts..) on homepage above footer.
It looks like this:

if (typeof Defer === 'function') {
	Defer(loadWidgetScript, 400, true);
} else {
	loadWidgetScript();
}

But this means it waits 400ms and executes. As there is waitForUserAction set to true, it waits forever and no widget is loaded. If I set it to false, widget is loaded after 400ms but that won't help with page speed.
Maybe if there was a 3rd option to set the timeout without breaking backwards compatibility, something like this?

if (typeof Defer === 'function') {
	Defer(loadWidgetScript, 400, 5000);
} else {
	loadWidgetScript();
}

So there are 3 things that can happen (I hope):

1. 400ms + false - waiting and executing - it's like standard setTimeout.
2. 400ms + true - waiting and then waiting for user.
3. 400ms + 5000ms - waiting and then waiting for user action, but if that doesn't happen in 5000ms, execute anyway.

OR .. 2nd option could behave as I originally understood the function. If 400ms + true, waits for user action but execute after 400ms if there was none.

[shinsenter]

Hi @morvy

I have tried implementing the idea based on the third option you suggested. Could you please help me evaluate whether it is working as you expected?
https://github.com/shinsenter/defer.js/blob/d6bf9a4ae5086cced24942210bcd8cc9a8a5daac/dist/defer.min.js

README: https://github.com/shinsenter/defer.js/blob/develop/README.md#Defer.lazy

Since the library size has increased significantly (nearly 100 more bytes), I am considering ways to reduce the size before the official release.

Best regards

[morvy]

@shinsenter it works great.

Just a note to the behavior. When I first tried the script I was under impression that it loads a script from src, waits for 500ms and if lazy=false, executes always after 500ms. If lazy=true, executes anytime between 0ms and 500ms, depending if user interacts instantly or not.

With 2 timeouts, this can handle cases when user interacts instantly, but there are scripts that can be loaded a bit later, so they don't overload the browser with irrelevant stuff in the footer etc.

Thanks a lot!

[shinsenter]

@morvy
Thanks for the feedback on the results after modifying the script. I need your help to adjust or provide additional explanations for these changes so I can finalize the documentation for the library's upcoming release. Would you mind assisting me with that?

[morvy]

Not sure what you mean by adjusting the explanations as these 2 points explain everything.

Note: (2) Lazy loading behavior changed since v3.0 when you set Defer.lazy=true or waitForUserAction=true. A <script> tags with type="deferjs" will not execute unless the user starts interacting with your page.
Note: (3) Since v3.8.0, you can set a timeout period in milliseconds for the Defer.lazy variable or any waitForUserAction argument. If no user interaction occurs within this timeout period, the scripts will still execute.

Maybe I'd add a use-case. Like:

A typical scenario might involve an iframe, chat window, or event tracking scripts.

• Consider utilizing an iframe for a newsletter form, loading it either upon user interaction or after a 5-second delay. This approach is beneficial in cases where a user exits a page, closes the browser, and later returns without interacting. Often, the page is scrolled to its last known position, and not all resources are loaded immediately.
• Implementing a chat window that can initiate a conversation with customers is another possibility. Some chatbots are JavaScript-heavy, so deferring them can aid in page load speed. However, it's crucial to ensure the chatbot starts promptly, as it actively engages with customers upon opening the window.
• Utilizing tracking scripts (besides GTM or GA4) can monitor if a user remains on a page for a certain duration. Without a delay, if a user simply opens the window and leaves it in the background, no data is captured. However, implementing a 5000ms delay allows tracking to confirm that the page was opened and not instantly closed.

[shinsenter]

Thank you so much!

[shinsenter]

Hey @morvy

Thank you so much for your donation to my project. I really appreciate your support and generosity. Your donation means a lot and will go a long way. Thanks again for backing my work.