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

I was doing security tests with PageSpeed Insights. The optimization recommendations were:

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking script resources and 3 blocking CSS resources. This causes a delay in rendering your page.
None 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.
Remove render-blocking JavaScript:
Optimize CSS Delivery of the following:


How can I do that?
 
This is for async :

<script async src="script.js">

The async attribute is used only for external scripts, indicate to the browser that the script file can be executed asynchronously.

This for defer :

<script defer src="script.js">

The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.

You can use this to defer external script

Code:
function deferLoadingScript(url, callback) {
  var loadScript = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = url;

    if (typeof callback === 'function') {
      s.onload = s.onreadystatechange = function(event) {
        event = event || window.event;
        if (event.type === 'load' || (/loaded|complete/.test(s.readyState))) {
          s.onload = s.onreadystatechange = null;
          callback();
        }
      };
    }

    document.body.appendChild(s);
  };

  if (window.addEventListener) {
    window.addEventListener('load', loadScript, false);
  } else {
    window.attachEvent('onload', loadScript);
  }
}

However, there is a big bug in all this, do not trust 100% what Google say, the best way is to ask another person how fast is your page.
 
Top Bottom