Upgrade page performace (google Insight) by fragmenting Theme.scss.css

[Bdelucca]

Hello everyone,

Google has decided to base their SEO by page performance, therefore we (our company) would like to improve our page performance.

Cheking the lighthouse tool and Google insight page, it is highly recommended to reduce the size of theme.scss.css (style) to only what is needed per page. Meaning that we will need to fragment the css file and import only the required portion and thus creating more style files. This contradicts what is recommended by most sites (css guidelines and so on). Therefore I wanted to ask what is the opinion of the community here.

Should I fragment theme.scss.css (9000 lines of code) for each page... or ...this will not really improve the performance of our website?

[ManuelKruisz]

Hi,

would you mind sharing the store URL?
Personally, 9000 lines of CSS does not sound like a lot to me. What would that be unminified? About 200kb? Typically, there would be other areas for improvement which provide much greater benefits when it comes to performance and core web vitals. Therefore, I'd be curious to see if there was really any benefit in it for your store.

Theoretically, there are multiple options to improve the performance here and a lot of those depend on the structure of your site. Personally, I wouldn't create one CSS file per page, as this would eliminate the caching meachanism for visitors. However, in case of a huge CSS file,  you could split the files either into modules, where each module represents a typical user journey. The benefit would be that users wouldn't need to download css for pages they most likely won't visit.
Another possibility would be to split the css files into a base css, which contains common css and to just load additional special css on some sites.
Or one could inline the css above the fold. 
But in the end all of this seems like complete overkill 😉

[Bdelucca]

Hi Manuel!

Thanks for your reply, I also thought that it might be an overkill to split the css file or any modification.

This is the url: 

https://uk.joyashoes.swiss/

and

https://eu.joyashoes.swiss/

Please let me know your thoughts after you look at the website.