I was facing issue related with speed optimization of the web page. When there are many css on a single page, or have large size of css file then it makes your website slow. I am using Google PageSpeed insights to improve my site's performance. So the solution to this problem is to load the css when the content of the page has been loaded successfully. Suppose we have to load styles.css after the page is loaded, then we have to use the following script that will load just after the body has been loaded. Write this code in the footer.

<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      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('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

So all done, now you have successfully implemented render blocking css.

Thanks for reading