SoundBarrier
Registered Member
- Sep 25, 2016
- 50
- 0
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/fundamentals/performance/critical-rendering-path/render-blocking-css
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
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.