Web-en

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

The Googleicon 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, Googleicon 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 Googleicon 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).

Google Page Speed - Score before eliminating render-blocking JS and CSS in above-the-fold content of 51 on mobile
Fig 1 : Google Page Speed – Score before eliminating render-blocking JS and CSS in above-the-fold content of 51 on mobile
Google Page Speed - Score after eliminating render-blocking JS and CSS in above-the-fold content of 72 on mobile
Fig 2 : Google Page Speed – Score after eliminating render-blocking JS and CSS in above-the-fold content of 72 on mobile
Google Page Speed - Score before eliminating render-blocking JS and CSS in above-the-fold content of 59 on desktop
Fig 3 : Google Page Speed – Score before eliminating render-blocking JS and CSS in above-the-fold content of 59 on desktop
Google Page Speed - Score after eliminating render-blocking JS and CSS in above-the-fold content of 79 on desktop
Fig 4 : Google Page Speed – Score after eliminating render-blocking JS and CSS in above-the-fold content of 79 on desktop