title: How to make JQuery and Bootstrap 3 work together in a Google PageSpeed Insights world?
body: <p>Since Google announced last month that it would be taking page speed and load structure into consideration when ranking websites I`ve spent a considerable amount of time trying to find a way to guarantee JQuery and Bootstrap 3 play nice with each other still.</p>
  
  <p>To prevent css and javascript from page blocking I wrote this code to make sure everything gets loaded at the bottom of a site asynchronously.</p>
  
  <pre><code>function loadFirst(filename, filetype) {
      if(filetype == "js") {
          var node = document.createElement('script');
          node.setAttribute("type", "text/javascript");
          node.setAttribute("async", true);
          node.setAttribute("src", filename);
      } else if(filetype == "css") {
          var node = document.createElement("link");
          node.setAttribute("rel", "stylesheet");
          node.setAttribute("type", "text/css");
          node.setAttribute("href", filename);
      }
      if(typeof node != "undefined") {
          var h = document.getElementsByTagName("head")[0];
          h.parentNode.insertBefore(node, h);
      }
  }
  
  /* Load all CSS first and JS files for your site here. */
  window.addEventListener('load', function() {
      loadFirst("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
      loadFirst("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
      loadFirst("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
      loadFirst("//fonts.googleapis.com/css?family=Open+Sans:300&amp;amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
  });
  </code></pre>
  
  <p>But JQuery doesn`t get a chance to finish loading before bootstrap.min.js test for JQuery and fails.  So what I did to partially solve this problem was comment out:</p>
  
  <pre><code>//loadFirst("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
  </code></pre>
  
  <p>and load it above the javascript via:</p>
  
  <pre><code>&lt;script async src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This works most of the time but now I want to use JQuery to help me customise a Bootstrap carousel by placing this code inside the window.addEventListener event to make it auto start:</p>
  
  <pre><code>$('.carousel').carousel({
      interval: 3000,
      pause: false
  })
  </code></pre>
  
  <p>but that generates:</p>
  
  <pre><code>Uncaught ReferenceError: $ is not defined
  </code></pre>
  
  <p>And I`m at my wits end trying to find a way to guarantee JQuery is fully loaded before my subsequent Bootstrap custom code starts running.  If this kind of code is too complicated to write in a couple of lines of code are there any libraries that deal with this problem already?</p>
  
  <p>Here is what I got working sofar:
  <a href="http://jsfiddle.net/2g4tbe72/" rel="nofollow">http://jsfiddle.net/2g4tbe72/</a></p>