延迟折叠的CSS渲染器突然无法通过Google Pagespeed Insight Test

Question

Can someone tell me why the following working render delay scripts suddenly fails to pass Google Pagespeed Insight Test ?

<script>
function loadCSS(href){
var ss = window.document.createElement('link'),
ref = window.document.getElementsByTagName('head')[0];
ss.rel = 'stylesheet';
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll
// fetch without blocking render
ss.media = 'only x';
ref.parentNode.insertBefore(ss, ref);
setTimeout( function(){
// set media back to `all` so that the stylesheet applies once it loads
ss.media = 'all';
},0);
}
loadCSS('link.css');
</script>

<noscript>
<!-- Let's not assume anything -->
 <link rel="preload" href="link.css" as="style" onload="this.rel='stylesheet'">

</noscript> 

The page is http://www.landshoppe.com/

I am using

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript" async></script>

at the footer

Answer 1

Finally I found the answer. This answer could be useful for someone who is breaking his head over how to get the Google pagespeed score right !

I think I have almost cracked it. I have got a 98 in Desktop and 94 in Mobile. Moving to clinch the perfect 100 soon ! :)

Optimization of CSS that blocks render 'Above the Fold' (ATF) basically means having all 'Above the Fold' styles to be 'inlined' before the 'head' and inside 'style' tags (Don't leave even one ATF class or id in the .css file) ! And stuff everything else into the external css file and dump it at the footer, or defer it with javascript or any other method you like and Google Pagespeed Insight will be happy to ignore it ! :) If you leave even one class or Id inside the css file, GPS will simply make your perfect-score life miserable by tirelessly yelling 'Render Blocking CSS' ! Even after you do everything to defer it !

Forget everything you learnt about not inlining any CSS and putting it all in an external file ! :)

Cheers !