Running pagespeed on my site to check for performance, and I would like to eliminate the render blocking css in my site. I have 6 css files. e.g, animate.min.css, font-awesome.css and so forth.Doing research I came upon this suggestion by google, so I just wanted to know your guys thoughts on this code and your suggestions.   <head>        <style>          .blue{color:blue;}        </style>        </head>      <body>        <div class=blue>          Hello, world!        </div>        <noscript id=deferred-styles>          <link rel=stylesheet type=text/css href=small.css/>        </noscript>        <script>          var loadDeferredStyles = function() {            var addStylesNode = document.getElementById(deferred-styles);            var replacement = document.createElement(div);            replacement.innerHTML = addStylesNode.textContent;            document.body.appendChild(replacement)            addStylesNode.parentElement.removeChild(addStylesNode);          };          var raf = requestAnimationFrame || mozRequestAnimationFrame ||              webkitRequestAnimationFrame || msRequestAnimationFrame;          if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });          else window.addEventListener('load', loadDeferredStyles);        </script>      </body>
Optimize CSS delivery to eliminate render-blocking CSS in above-the-fold content
performance;css