Fix Google PageSpeed Eliminate render-blocking JavaScript and CSS in above-the-fold content
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).
Links and credits
- [1] – PageSpeed Insights – developers.google.com
- [2] – Remove Render-Blocking JavaScript | PageSpeed Insights | Good Developers – developers.google.com
- [3] – Optimize CSS Delivery | PageSpeed Insights | Good Developers – developers.google.com
- [4] – Fix Google PageSpeed leverage browser caching in htaccess – Yoann Bierling, International SAP/Web Consultant – www.ybierling.com
Images
- Fig1 : Google Page Speed – Score before eliminating render-blocking JS and CSS in above-the-fold content of 51 on mobile
- Fig2 : Google Page Speed – Score after eliminating render-blocking JS and CSS in above-the-fold content of 72 on mobile
- Fig3 : Google Page Speed – Score before eliminating render-blocking JS and CSS in above-the-fold content of 59 on desktop
- Fig4 : Google Page Speed – Score after eliminating render-blocking JS and CSS in above-the-fold content of 79 on desktop