AO cached css is render-blocking in above the fold content

Google PageSpeed Insights marks the auto optimize cached css files as render-blocking. Is there a way around it to optimize this even further?

absolutely; “inline all CSS” or “inline & defer”, cfr. the FAQ for more info on this.

have fun,
frank

Oops overlooked that (crucial) one. Thanks for the quick answer. It seems to work though the effect on the overall score is not that great. Guess I have to tweak and squeeze a bit more.
Heel erg bedankt ??

Graag gedaan wim ??

Concerning the impact of “inline all” on pagespeed score; if you have lots of CSS inlined, GPI will complain about multiple roundtrips needed to render the above-the-fold page. In that case “inline & defer” clearly is preferable, although that is considerably more complicated to get right.

frank

hi

I have same problem i have tried all the function but its showing same error in render blocking in autooptimize css

Please reply asap .Please hep me guys if you have any solution

Hi Sumiti;
If you can share the URL to your site, I can have a quick look at what’s going on.

frank

https://audiosparksforart.com/

checkthe google page also
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Faudiosparksforart.com%2F

have you checked the link.My client is waiting but i don’t know how to solve this problem

Wow, you’re really eager aren’t you? ??

As per the FAQ; either “inline all CSS” or “inline & defer” it. In your case “inline & defer” is better, as there’s a lot of CSS.

hope this helps,
frank

yes i am waiting to solve this problem but i tried this inline or defer but is not working..

“inline all” might indeed not work, as you have a lot of CSS (you’ll probably get the “multiple roundtrips needed to render the above-the-fold page”-warning,, but not the render blocking CSS warning).

but if you “inline & defer” and if you provide the “above the fold CSS”, then I’m 100% sure it will work.

frank

how i can do this please hep me is there any function to do this

add_filter(‘autoptimize_js_include_inline’,’readme_ao_js_include_inline’,10,1);
function readme_ao_js_include_inline() {
return false;
}

i have css inline css but its not work

Well, from the FAQ;

What is the use of “inline and defer CSS”?
CSS in general should go in the head of the document. Recently a.o. Google started promoting deferring non-essential CSS, while inlining those styles needed to build the page above the fold. This is especially important to render pages as quickly as possible on mobile devices. As from Autoptimize 1.9.0 this is easy; select “inline and defer CSS”, paste the block of “above the fold CSS” in the input field (text area) and you’re good to go!

But how can one find out what the “above the fold CSS” is?
There’s no easy solution for that as “above the fold” depends on where the fold is, which in turn depends on screensize. There are some tools available however, which try to identify just what is “above the fold”. This list of tools is a great starting point and esp. https://jonassebastianohlsson.com/criticalpathcssgenerator/ is an easy solution if you’re not into node.js yourself.

I’ve also pointed others to this alternative tool to identify the above the fold content; https://gist.github.com/PaulKinlan/6284142.

There’s also another wordpress plugin that will try to identify the above the fold CSS automatically, but I don’t have experience with that (it requires node.js be available)

frank

the “autoptimize_js_include_inline” filter is for an entirely different problem, it has nothing to do with “render blocking CSS”.