Google PageSpeed sometimes provides this wonderful error: Remove Render-Blocking JavaScript. Now the solution to this is actually incredibly simple, you add a simple ‘async’ to your script calls. For example:


 

Changes to this:


 

Simples. Except I had a couple of scripts running after, a plugin script and my 'script.js' and the problem was that half the time the jquery due to it being async hadn't loaded before the other scripts triggered. Thus my particular animation was only working half the time and throwing up errors.

So how do we get the jquery to async and then load my script? Well we add an onload function trigger to the async jquery call like this:


 

and then a small snippet to load the script as the 'init' function like this:



    function init() {
    $(document).ready(function() {
                  jQuery.getScript("path-to/script.js")
                .done(function() {
                    //console.log('I'm loaded!');

                })
                .fail(function() {
                //	console.log('not so loaded :(');
            });
    });
  }
 

Leave a Reply