make first css file blocking if using loadCSS or first 12kb of data inline.

Looks like this is technically possible
http://stackoverflow.com/questions/4957446/load-external-css-file-in-bod...
http://stackoverflow.com/questions/8033622/css-stylesheets-at-top-or-bot...

Noted that advagg uses filamentgroup/loadCSS
https://gist.github.com/scottjehl/87176715419617ae6994

You want to inline the critical css https://www.fourkitchens.com/blog/article/use-grunt-and-advagg-inline-cr.... Another option I've been thinking of is to make the first css file blocking.

Makes loadCSS usable on any site now.

Just tried setting a cookie to get around the jarring effect that happens when using defer so it doesn't defer on second load but that doesn't work. Going to go with just this.

This works but the browser still ends up downloading the JS first.

if (document.cookie.match(/^.*?advaggmod_css=1.*?$/)) {
  var sheets = document.querySelectorAll('link[rel=preload]');
  for (i = 0; i < sheets.length; ++i) {
    sheets[i].setAttribute('rel', 'stylesheet');
    sheets[i].removeAttribute('onload');
    sheets[i].removeAttribute('as');
  }
}
else {
  window.onload = function() {
    document.cookie = 'advaggmod_css=1'
      + '; expires=' + new Date(new Date().getTime() + 86400 * 1000).toUTCString()
      + '; domain=.' + document.location.hostname
      + '; path=/';
  };
}