How to eliminate render-blocking CSS?

I have tried to inline the CSS which is directly tied to the layout of the website. It didn't work. In fact, it was so much code that it lowered my score and did not solve the render blocking issue.

The short answer is to put render blocking CSS into different files and load them situationally with media queries. Here is an explanation of the problem and solutions from Google: https://developers.google.com/web/f...e/critical-rendering-path/render-blocking-css

validseo said:

The short answer is to put render blocking CSS into different files and load them situationally with media queries. Here is an explanation of the problem and solutions from Google: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Click to expand...

I still don't see how I should solve this. The media queries don't help much to be honest. I want to minimize the .css requests, hence why I only use one .css file which is being called in the head of the HTML. Will it work if I put the most vital CSS inline in the head and then make the call for the .css file in the bottom of the HTML?

If you don't have a lot of conditional CSS then you have to look at your use of imports and you should try to minimize the amount of CSS used where you can. This article has good tips on doing that:

https://varvy.com/pagespeed/render-blocking-css.html

validseo said:

If you don't have a lot of conditional CSS then you have to look at your use of imports and you should try to minimize the amount of CSS used where you can. This article has good tips on doing that:

https://varvy.com/pagespeed/render-blocking-css.html

Click to expand...

I took every single visible div from the webpage and inserted the CSS for those divs inline. It was only about 10-20 CSS elements. It did not solve the problem, I have spent too many hours on this, I really need more direct help. I have tried and failed.

SoundBarrier said:

I took every single visible div from the webpage and inserted the CSS for those divs inline. It was only about 10-20 CSS elements. It did not solve the problem, I have spent too many hours on this, I really need more direct help. I have tried and failed.

Click to expand...

PM me the URL... I'll see if anything stands out... no promises though. ;-)