<script>
/* Ref: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp
 * domInteractive: marks when DOM is ready.
 * domContentLoaded: typically marks when both the DOM and CSSOM are ready.
 *     If there is no parser blocking JavaScript then documentContentLoaded
 *     will fire immediately after domInteractive.
 * domComplete: marks when the page and all of its subresources are ready.
*/
function measureCRP() {
  var t = window.performance.timing;
  var interactive = t.domInteractive - t.domLoading;
  var dcl = t.domContentLoadedEventStart - t.domLoading;
  var complete = t.domComplete - t.domLoading;
  console.log('interactive: %sms, dcl: %sms, complete: %sms', interactive, dcl, complete);
}
</script>

<!-- blocking -->
<link href="style.css" rel="stylesheet">

<!-- non-blocking -->
<link href="print.css" rel="stylesheet" media="print">

<!-- conditionally blocking -->
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">

<script>
  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'small.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>