Separate non-critical javascript into separate files and delay them from loading until user interaction to negate their performance impact

[jazir555]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

Currently Elementor loads a lot of unnecessary javascript on the first render of the page which could be prevented from loading until user interaction. Much of the code loaded initially is unneeded and only utilized once a user begins to interact with the page

Describe the solution you'd like.

Non-critical javascript moved into separate files and those non-critical files are loaded after a timeout/not loaded until user interaction

Describe alternatives you've considered.

Delaying Elementor's javascript using Perfmatters/Debloat/Flyingpress etc. Unfortunately Elementor bundles critical js with non-critical js inside whole files, which makes delaying any of Elementor's javascript impossible as functionality breaks immediately. This is the case for every Elementor javascript file I've tried to delay in the waterfall request tree.

Additional context

The javascript doesn't need to be entirely removed (although that would be the best solution) to remove its performance impact. If the code is simply delayed until user interaction, it speeds up the load time for the user to view and interact with the site, while retaining all of the functionality bestowed by the code loaded after a delay.

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.

[nicholaszein]

Hi @jazir555,

can you give an example of the scripts that are unnecessary?

[jazir555]

I'm referring to non-critical javascript functions included in the javascript files served by Elementor with other critical code. I frequently will see warnings for Elementor on pagespeed tests about unused javascript code which adds quite a bit of page weight. If you could put the non-critical functions in separate files and then delay them from loading until user interaction (mouse movements, scrolling, tapping, clicking, etc), it would significantly improve initial load time/rendering of the site. The code doesn't need to be removed, just have all functions not immediately necessary in a separate file.

Elementor's javascript cannot be delayed with a javascript delay plugin because all of them are dependencies for each other. Delaying any individual Elementor javascript file breaks most functionality. So it's effectively not possible to mitigate the performance impact of the unused code for now.

[nicholaszein]

@jazir555 I'm not sure of what type of unnecessary or non-critical code you're talking about. If you could be more specific, it would help evaluate this feature, and give proper feedback to our Devs. Can you share an example of the warnings you're getting from speed test, and which files or functions are unnecessary, or non-critical?

Elementor already loads scripts (from widgets that have scripts to load) only when they are in use. So I'm really confused to what other non-critical or unnecessary scripts you're referring to.

If you can share a link to the page speed report pointing to the unused code, it would be super helpful.

[jazir555]

@nicholaszein

Sure, you can see the amount of code used from each file on each page by opening the coverage tab in chrome:

https://developer.chrome.com/docs/devtools/command-menu

Search "coverage" and the coverage tab will open, then refresh the page and it will identify how much code is used.

[jazir555]

Every file has unused code regardless of page, there must be some of that code that can segmented into separate files and that code would only loaded once a user has begun to interact with a page.

For examples of plugins that delay javascript until user interaction, there are many examples of plugins with that functionality, but Flyingpress and Perfmatters both have that feature.