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

[Diesan Romero]

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:

• http://www.somostuzona.ninja/js/xf/preamble-compiled.js?_v=b0ab9f5f

Optimize CSS Delivery of the following:

• http://www.somostuzona.ninja/…351c37d60e053d406263dc601ba55533b3618c49
• https://fonts.googleapis.com/css?family=Nunito:400,600,700
• http://www.somostuzona.ninja/…1e4d3531dcbef26db53c293ed235ec2f9e92aa84

How can I do that?

 

[dondomainer]

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

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.