How to eliminate render-blocking CSS?

SoundBarrier

Registered Member
Joined
Sep 25, 2016
Messages
50
Reaction score
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.

479e0c758b37d0276b63c750b718ee2b.png
 
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

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

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.
 
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.

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