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 Load Experiment.
Activating The Experiment
In order to use this feature, you must navigate to Elementor > Settings > Experiments and activate it in the dropdown. Save your changes at the bottom of the screen.
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, when you activate the Improved CSS Loading experiment, 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 addition to this experiment, and 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.