Render blocking resources vs critical css

Hello,

I need a little help with website optimization – render blocking resources.

I’ve achieved almost fantastic results on all sites with Asset CleanUp Pro and FlyingPress. The problem, however, is the render blocking resources on the product page, which lower the PSI results.

My template is Flatsome.

The main problem is the bloated flatsome.css that holds the heart of the website. Steps I have taken to try and fix the critical CSS problem.

1. I have turned on the critical css function for products in ACP
2. From https://pegasaas.com/critical-path-css-generator/, I generated a critical path for one of the products (I chose Dekstop 1920px – I’m not sure if this option is the best among the 4 available)
3. I pasted the content into the critical css for the product in ACP
and here comes a further problem. In page source I can see that critical CSS has been loaded, but what next? All other css’s are loading. In ACP, the modification options available for all css files are to move from HEAD to BODY and possibly disable it altogether. Neither one nor the other solves the matter. There seems to be a defer function, but that doesn’t work. Defer works when switching from HEAD to BODY but then the page layout gets damaged.

I would be very grateful for your tips on how I can take a step forward and try to reduce the bloating of the main flatsome.css file.

Example product page:
https://liveflooring.com/produkt/podloga-sportowa-basic-black/

Thank you in advance

PS: for now I disabled critical css because its generating a bit CLS and additional issues

• This topic was modified 4 years, 8 months ago by cometto.

The page I need help with: [log in to see the link]