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

2018-07-09 2019-04-28 International Consulting Web

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).

Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content : Fig 2 : Score after eliminating render-blocking JS and CSS in above-the-fold content of 72 on mobile

Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content : Fig 3 : Score before eliminating render-blocking JS and CSS in above-the-fold content of 59 on desktop

Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content : Fig 4 : Score after eliminating render-blocking JS and CSS in above-the-fold content of 79 on desktop

How to eliminate render-blocking resources in WordPress

To eliminate render-blocking resources in WordPress, it is necessary to install a plugin such as JetPack.

Then, go to the options, for which you must be an administrator, and go to JetPack options > Writing > Performance and Speed > check Enable site accelerator, speed up image load times, speed up static file load times, and enable lazy loading for images.

This will eliminate render-blocking resources in WordPress and load pages faster by allowing JetPack to optimize your images and serve your images and static files (like CSS and JavaScript) from their global network of servers.

How to Eliminate render-blocking JavaScript and CSS on WordPress