4

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

Vijay Panneerselvam
  • 41
  • 1
  • 1
  • 2
  • Have your found a solution? – bernhardh Feb 11 '15 at 08:51
  • Are you using wordpress? I found someone can get 100/100 with wordpress. Check the PageSpeed score [*here*](https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.webdesignerland.com&tab=mobile). In details he explained [*here*](http://kaspars.net/blog/wordpress/page-speed-score-100) what he has done to achieve it. – eQ19 Apr 13 '15 at 16:33
  • Look here https://stackoverflow.com/questions/18013648/eliminate-external-render-blocking for more ideas on this issue. – lafeber Jul 06 '17 at 11:09

1 Answers1

6

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>
Tui Popenoe
  • 2,098
  • 2
  • 23
  • 44
  • This only optimize CSS on the home page. All other pages on the site still has render-blocking issue. – Jonas T Oct 12 '16 at 00:27