help center

On this page

Improved CSS Loading – Conditional and inline CSS loading

Last Update: March 7, 2024

We are working constantly on improving the performance of the sites created with Elementor. We have now focused on achieving a faster page load by reducing the amount of unused CSS generated by the pages by adding the Conditional and Inline CSS Loading.


Conditional CSS Load

Until Core v3.3.0 , all the CSS was loaded in the same file: frontend.css (120KB in Elementro core, 225KB in Elementor Pro ). This means CSS assets that are not in use are being loaded anyway, a thing that harms page score and generates render-blocking processes.

Now, we load only the CSS of the widgets that are placed in your page once. This way, we save up to 37KB of render-blocking assets (CSS) in Elementor Core, and save up to 171KB, based on your usage.


Inline CSS Load

In order to prevent multiple requests to the server, we are now loading the CSS files as inline style tags. This will reduce even further the render-blocking processes and should improve the overall performance (only up to 8KB, otherwise – the CSS file will be loaded as an inline link tag).

If the widget is being used more than once, there will not be an additional request or print.

The mechanism of understanding the CSS file size (the “expensive act”) will happen once for a widget.


Conditional Load of the Animations library

The animations.css library will be loaded only if you used it on your page, and will help reduce unused asset loading even further (19KB).

We also added “under the hood” improvements to load the sticky JS (7KB) library per use.

When using Elementor combined with Elementor Pro with the performance experiments active, you should expect a major performance boost and save up to 523KB.


Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article