Fragment CSS for each Elementor element so only the necessary CSS is loaded.

[Nazrinn]

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..

Hello there!

When it comes to optimisation, it's no secret that Elementor could use a little push. Something I'm very surprsed about and that Elementor doesn't seem to do is dynamic CSS loading (similar to how JS framework do it).

The Problem

Currently, Elementor loads all possible styles in the front-end bulk. For instance:

• Swiper styles are loaded on all pages, regardless of if there is slider present anywhere on the website.
• /wp-content/uploads/elementor/css/global.css, /wp-content/plugins/elementor/assets/css/frontend.css and /wp-content/plugins/elementor-pro/assets/css/frontend.css contain styles for elements that might not be even used to the website, such as icon lists, video widgets, dividers, lightboxes, so on and so forth. Elementor Pro's frontend.css even contains styles for WooCommerce, which is not installed on most WordPress websites.

The presence of those extra styles significantly impact page load and rendering times, and really shouldn't be loaded at all if they are not necessary. Additionally, given HTTP2 (and above), loafing 1 big file for all styles is not great when loading multiple smaller files might be quicker.
Due to Elementor's nature, some of those bulk styles might also be render-blocking, forcing you to load the whole style file before being able to display the page, worsening FCP times.

Although yes, most big caching plugin can attempt to remove unused CSS, it often results in removing essential styles for elements triggered via interractions, such as lightboxes; redering this solution non-viable.

Describe the solution you'd like.

The solution

Breaking it down:

1. Fragment styles for each Elementor Element. E.G.: Custom Code elements has its style stored in /element/customcode.css, Icon Box elements has its style loaded in /element/iconbox.css, so on and so forth. This will allow:

• The user to dequeue styles they are not using on a specific page; this can be done via the theme's fuction.php or eventually Elementor's element manager;
• All elementor style to also be loaded in parallel on page load;
• The user to set specific style as critical CSS which should be render-blocking.

2. Only load styles of elements that are used on the page by registering the style whenever the Element is used. For example, /element/customcode.php would contain wp_enqueue_style for /element/customcode.css. No element manager needed!

This is something I do on my own locally developped themes (using Webpack and all that jazz). I'm sure that's something Elementor can pull off.

Describe alternatives you've considered.

Using caching plugin by setting up critical CSS, removing unused CSS using a caching plugin, disabling Elementor styles, making my own elements (modules) using Elementor's saved block function combined with a shortcode that load my element's CSS.

Additional context

Reference Lighthouse CSS performance on a very very barebone Elementor website that only contains a Svelte App on the homepage (no caching):

Full Lighthouse report (PDF).

Agreement

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

[jazir555]

+1000

I use Debloat's Remove Unused CSS feature, but the way you've described it sounds much more efficient and would result in further improved load times. Debloat already makes a massive difference, so if this was implemented natively that would be fantastic.

[Nazrinn]

Haven't heard of Debloat before. Might give it a shot in the meantime as the other optimisation plugins I've used were suboptimal to remove unused Elementor code.

[jazir555]

Definitely do, completely negates the unused css's impact.

[jazir555]

@Nazrinn Lmk if you do try it, eager to hear your results. It completely solves the unused css issue for me.

[Nazrinn]

It doesn't seem to do anything better than my current cache plugin at first glance. Do you use it to remove unused CSS and your lightboxes still work?