Improve page loading speed by preventing unused scripts and CSS from being loaded

[JohnMulderFrance]

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

This request is going to enable a much faster page loading speed.

One of the biggest drawbacks of elementor is the amount of assets loaded on every page. e.g. i have a page with just one button and one shortcode widget, here elementor loads 1411,1 KB of scripts and CSS. There are tools like "asset cleanup" or "perfmatters" that enable you to prevent specific assets from being loaded. From above page i was able to prevent 289,7 KB from loading by preventing all icon related assets and the swiper.min.js script, because i am sure no icon, carousel or slider is used. But there must be more unused assets. I tried by trail and error to identify scripts and CSS i could do without, but that leaves you with a uncertain feeling, because you do not exactly know what you are doing. Anyone wanting to prevent unused assets from being loaded, would be helped with just a simple list where each asset is associated with a widget it is used in or for.
Like e.g.
/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css FONTAWESOME ICONS
/wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js CAROUSEL, SLIDER widget

In fact this is no real feature request, since it involves no intervention or coding whatsoever, but i can think of nothing more important to me than this list and i guess i am not alone. I could be wrong, but i think it would be something simple to do for a developer deeply engrained in elementor.
And imagine that this would enable elementor users to reduce their page size of 50% or even more.

Best,
John

[JohnMulderFrance]

P.S. I am aware that you can find unused assets with Chrome dev tools and the coverage tab. However when using that on a page without carousel or slider, so no need for swiper.min.js (The page works fine with swiper diabled) of the 139153 bytes loaded 124962 bytes are labelled "unused". So it does not indicate for 100% that you can do without, which in this case is true, but it might not be with another asset.

[jhorn70]

I have been thinking about this issue and I think it might be worthwhile if the elementor developers don't want to spend the cycles developing the ability to unload unused Javascript and CSS as it is very interconnected, there may be a middle ground.

If there were certain CSS and JS files that were copied on a per page bases and served instead of the base plugin files we could edit them on a per page basis reducing code that is not used. This would be an advanced capability and would need to be redone when a page was updated, but it would give us a lot of power in reducing the overhead in a lot of places. Might be easier to implement for the development team.

[DorShahar]

Merged issue

I merged this issue with #8572, which is on the same subject so we could deal with it more efficiently.
Please feel free to continue the conversation there.
Thanks for your feedback!