Reduce the size of hello-elementor-theme-style-css by splitting the CSS and only loading the relevant parts

[Nazrinn]

Hey there,

So, something I noticed a lot with my Elementor websites and using Hello Theme is that only a small part of the hello-elementor-theme-style-css file code is used on each page.

Here is an example:

As you can see, only around 5% of the file's code is used.

This extra code seems to impact Google Lighthouse metrics in a signaficant way, and I can't seem to be able to get rid of it.

Would there be a way for hello-elementor-theme-style-css to be composed only of the styles that are used within the page/theme? Not every page has a dialog box or uses swiper code for instance (in fact, this is pretty much most of my pages).

Thanks!

[rami-elementor]

Hi @Nazrinn

While trying to optimize the theme, we came to a similar conclusion.

In Hello theme version 3.0.0 we plan to split the theme.css file, removing unused CSS. Moving some styles to a separate file which will load only if the functionality is active.

This change should reduce the file size by 60% - 85%, depends on different factors.

Ref: https://github.com/elementor/hello-theme/pull/341