How To Overcome Eliminate Render-Blocking CSS in PageSpeed Insight

Question

I performed PageSpeed Insights testing of my website which created by using WordPress.

It displays Eliminate render-blocking JavaScript and CSS in above-the-fold content

The error message disappeared when I remove style.css file which is my core CSS file that contains 7000 line of codes.

Referring to the Optimize CSS Delivery , I applied this line of coding into my <script>

<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>

Apply this method leads to more blocking resources.

May I know how to overcome this issue? Thanks.

P/S: Please provide a reason if you downvote. So I can improve my quality of question next time.

Answer 1

Can you load the CSS asynchonously or are there media queries that are necessary?

The best thing to do is inline some of the media query stuff so that each query is done from the HTML - this will eliminate the render blocking.

I will state however that Pageinsights can be ignored if your page load speeds are showing lower in chrome. It's not 100%. That is where you really want to focus because Google gives you more credit for user feedback than it's bot's quality score. And users WILL bounce less if you can shave it down to 0.5 seconds load.