Mikael-Sundstrom
10/13/2017 - 10:00 AM

Deferred styles

defer-style.html
content_copyfile_download
<head>
  <style>
    /* Inline styles that will be loaded directly when page is loaded */
    h1.example {
      font-size: 28px;
    }
  </style>
</head>
<body>

  ...
  ...

  <noscript id="deferred-styles">
    <link rel="stylesheet" type="text/css" href="site.css" />
  </noscript>
  <script>
    var loadDeferredStyles = function() {
      var addStylesNode = document.getElementById("deferred-styles");
      var replacement = document.createElement("div");
      replacement.innerHTML = addStylesNode.textContent;
      document.body.appendChild(replacement)
      addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
  </script>
</body>