PageSpeed Insights low score. 1 blocking CSS resource

Question

I get the below error in PageSpeed Insights. I went into Minify "manual" mode and added the below CSS. But Google still complaints about the CSS . I only have score of 64/100. Please help.

Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Optimize CSS Delivery of the following: https://www.northfloridacricket.com/wp-content/cache/minify/000000/4799b/default.include.4feacd.css

Answer 1

Merely minifying the CSS is often not enough for page-speed insights. Page speed prefers CSS that involves content "Above the fold" (top 600px) to be internal (i.e. loaded in a tag). All the rest of the CSS should be deferred to load after the most important ATF content.

See this example from giftofspeed

• Q: Which CSS files should I defer load?
• A: You should defer load all CSS files that are blocking the rendering of your page.
• A: Do not defer load a small or medium sized CSS script. You’ll benefit more, in the page speed sense, from inlining all your CSS instead.

Javascript snippet for deferring CSS files:

<script type="text/javascript">
/* First CSS File */
var giftofspeed = document.createElement('link');
giftofspeed.rel = 'stylesheet';
giftofspeed.href = '../css/yourcssfile.css';
giftofspeed.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(giftofspeed, godefer);

/* Second CSS File */
var giftofspeed2 = document.createElement('link');
giftofspeed2.rel = 'stylesheet';
giftofspeed2.href = '../css/yourcssfile2.css';
giftofspeed2.type = 'text/css';
var godefer2 = document.getElementsByTagName('link')[0];
godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>

<noscript>
<link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" />
<link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" />
</noscript>