The Google PageSpeed [1] test “Eliminate render-blocking JavaScript and CSS in above-the-fold content” propose you to delivers your site’s JS and CSS files after the HTML is fully loaded – and, therefore, do not pause your HTML loading to download them.

In order to defer load of your JS files [2], you can either add the async or defer instruction to your scripts links. Async will not guarantee that they are loaded in the same sequence – therefore, if you have several scripts that should run one after the other, defer is preferable to guarantee the sequence :

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>

For the CSS to be loaded after the full HTML is transmitted, Google proposes [3] this piece of code to add at the end of your HTML, for example after footer closing tag and before body closing tag :

</footer>
    <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = './style.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
</body>

This allowed me to pass the Google PageSpeed [1] test Eliminate render-blocking JavaScript and CSS in above-the-fold content (along with Leverage browser caching [4]) on a website, going up from a score of 51 on mobile (Fig 1) to 72 (Fig 2), and up from 59 (Fig 3) to 79 on desktop (Fig 4).