I have run my website into Google Pagespeed and it returned
"Eliminate render-blocking JavaScript and CSS in above-the-fold content"
The problem is that those "render blocking" assets are required for the rendering. As in:
I am confused. How can I render my page without my css.css file, the bootstrap files and the google fonts?
Waste of time... more often than not... insight... not required.
Matrix's and Google's Pagespeed Insights is not mandatory and will not reward you with any secret squirrel level 9 Google rankings.
Google, Bing and your users do not care about page scoring matrix's since why would they? ultimately it boils down to how fast the page loads and that is what users and search engines reward sites for.
The biggest impact of website speed is decent hosting...
Good hosting has the biggest impact on page speed assuming that you have no fundamental issues... things like render blocking, expires and other things often reported are not fundamental issues, most do not bring the page speed down to an unacceptable level.
In fact if you look at the top 100 sites in the world they are FAST but score extremely low in terms of pageSpeed insights.
Use a testing tool with real meaning...
I recommend that you using a proper testing tool and WebPagetest using multiple passes with multiple servers in your target region. Aim for under 2 seconds, ideally below 1.5 seconds and under 1 second is extremely good.
What is Render Blocking?
Render blocking is where a resource is called for before the actual content, waiting for a resource to download can slow the test of the page down, this is often known as loading resources 'above the fold' and resolving the issue is placing that resource 'below the fold' (after the content).
To get around this problem you need to asynchronous load the fonts which means not within the <head> </head>, for a solution see the next chapter below.
Resolving Google Fonts Render Blocking
If you want to get to closest 100/100 within Google insight or other Matrix based websites then you can get over the render blocking issue with Google fonts by using their Webfont Loader.
Which looks something like this:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
Other CSS files
If you have any other resources such as CSS or JS files that are loaded either internally or externally then they need to be loaded at the bottom of page, this does not include essential JavaScripts (e.g modernizr or the main base CSS to your site (e.g style.css). Most vendors will provide some kind of API for loading CSS via JavaScript below the fold.
Sadly, Not all CSS vendors have an API or provide a elegant solution therefore you normally have to develop and deploy your own JavaScript that will load the CSS resource at the bottom of the page.
Example of loading CSS files at the bottom of the page using JavaScript
Below is a script that will pretty much load any CSS file you want at the bottom, should it be internal or external, its no problem. Place it before </body>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("path/to/font-awesome/css/font-awesome.min.css");
//]]>
</ Script>
