Optimise CSS Delivery in Wordpress Theme

Question

When using page speed insights I get this alert

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering      your page.
Approximately 3% 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:
http://www.mysite.co.uk/wp-content/themes/mytheme/css/m.min.css

Note: removed the url as it is a working site for my workplace.

I have tried doing what is suggested by google and using

<script>
  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'small.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>

But this did not solve the problem. I have tried removing the css link but it told me to remove the js files and font awesome files as well.

I am currently at 97/100 on page speed insights so I would really appreciate any help.

Answer 1

The best way to eliminate render blocking CSS is to extract just the "above the fold" or "critical" CSS that is required to render the page and then inline it into your HTML. From there you can then asynchronously load the remaining CSS required to load the rest of the page.

The idea behind this is that you get all of the resources that you need in one roundtrip to the server with the HTML page. For any remaining or "non-critical" resources, you then load asynchronously. For more details, see this article on the Google Developers website.

I find that the best tool to use to extract the Critical CSS is actually a Grunt plugin called grunt-critical. If you've never used Grunt before with Wordpress, there is a great tutorial on the tuts+ site that will walk you through it.

Apart from that, you can asynchronously load your JavaScript using the HTML async attribute .

Answer 2

I was able to solve the issue by including the css required for the hero image inline in the of the document.

By doing this, the page is not waiting to be able to load the large image.