title: How do I eliminate render-blocking JavaScript and CSS in above-the-fold content
body: <p>I have built out a Jekyll blog with AngularJS and have used it exclusively except for the slick slider that is in above-the-fold content. The slider requires JQuery so I have added that into my application as well but have referenced it bellow my angular scripts. Since it is the first thing people see I want it to load first but I'm not too sure how to do that because it wont work if I place it before the Angular scripts. My scripts go as follows:</p>
  
  <pre><code>&lt;script src="{{ site.baseurl}}/bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="{{ site.baseurl }}/bower_components/angular-animate/angular-animate.min.js"&gt;&lt;/script&gt;
  &lt;script src="{{ site.baseurl }}/bower_components/angular-aria/angular-aria.min.js"&gt;&lt;/script&gt;
  &lt;script src="{{ site.baseurl }}/bower_components/angular-material/angular-material.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="{{ site.baseurl }}/bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="{{ site.baseurl }}/bower_components/slick-carousel/slick/slick.min.js"&gt;&lt;/script&gt;
  &lt;script src="{{ site.baseurl }}/bower_components/angular-slick/dist/slick.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="{{ site.baseurl }}/js/app.module.js"&gt;&lt;/script&gt;
  &lt;script src="{{ site.baseurl }}/js/app.controller.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have added a script for deferred loading and placed it just above the closing body tag that looks like:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "/js/defer.js";
  document.body.appendChild(element);
  }
  if (window.addEventListener)
  window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
  window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
  &lt;/script&gt;
  </code></pre>
  
  <p>In my defer.js file I have been able to add a few small scripts to help with deferred loading of social buttons but I am still stuck on how to use it so that my slider is the first thing that loads. I would greatly appreciate any help or tips that anyone has for this kind of problem. If you need a look into the source code my Github is Glasser88 and the website is hosted on Github Pages as www.lifeofglass.com. Thank you in advance! </p>