How to eliminate render-blocking CSS?

SoundBarrier · Nov 3, 2016

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.

validseo · Nov 3, 2016

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

SoundBarrier · Nov 4, 2016

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

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?

validseo · Nov 4, 2016

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

SoundBarrier · Nov 4, 2016

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

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.

validseo · Nov 4, 2016

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.

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

How to eliminate render-blocking CSS?

SoundBarrier

Registered Member

validseo

Senior Member

SoundBarrier

Registered Member

validseo

Senior Member

SoundBarrier

Registered Member

validseo

Senior Member

Main Menu

Marketplace

Making Money

BlackHatWorld

Other