Dealing with (non)critical CSS, the progressive enhancement way

## index.html
<!doctype html><!-- This is a valid HTML5 document. -->
<meta charset=utf-8><!-- Better(?) to include encoding before the <title>. -->
<title>Test template</title><!-- Required to make a valid HTML5 document. -->
<link rel=icon href="data:;base64,iVBORw0KGgo="><!-- Blank gif, avoids an extra query. -->
<style>
  /* Critical CSS only: above the fold, positionning and so on. */
  p { background-color: red; }
</style>
<!-- Preload the not critical CSS for future usage. -->
<link rel=preload href=not-critical.css as=style onload="this.rel='stylesheet'">
<!-- In case JS is not activated/blocked, we fallback on regular CSS declaration. -->
<noscript><link rel=stylesheet href=not-critical.css></noscript>
<!-- That's it, we can fire our content right away! -->
<p>Hello World!
<script>
/* Progressive enhancement: cutting the mustard.
See https://sixtwothree.org/posts/cutting-the-mustard-revisited */
if ('devicePixelRatio' in window) {
  /* Credits: https://github.com/filamentgroup/loadJS */
  function loadJS (src, callback) {
    const ref = document.getElementsByTagName('script')[0]
    const script = window.document.createElement('script')
    script.src = src
    script.async = true
    script.onload = callback
    /* You may wonder why not simpler `document.head.appendChild(script)`
    See https://www.paulirish.com/2011/surefire-dom-element-insertion/ */
    ref.parentNode.insertBefore(script, ref)
  }
  /* Credits: https://github.com/filamentgroup/loadCSS */
  loadJS('https://unpkg.com/fg-loadcss@1.3.1/src/loadCSS.js', _ =>
    loadJS('https://unpkg.com/fg-loadcss@1.3.1/src/cssrelpreload.js', _ =>
      console.log('Non-critical CSS loaded via loadCSS.')
    )
  )
}
</script>