javascripthtmlcssperformanceprogressive-enhancement

Deferring CSS load, why is including preload <link> faster?

I'm testing out preloading and I'd like to know why including a preload link before a preload script is faster by a tenth of a second.

rel="preload" tells the browser to start downloading the stylesheet to not block loading. The script creates a stylesheet from the URL and applies it to the page. Why is the stand-alone-script not as performant?

<link rel="preload" href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css" as="style" onload="this.rel='tachyons.min.css'">


<script type="text/javascript">
  //<![CDATA[
  if(document.createStyleSheet) {
    document.createStyleSheet("https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css");
  }
  else {
    var styles = "@import url('https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css');";
    var newSS=document.createElement('link');
    newSS.rel='stylesheet';
    newSS.href='data:text/css,'+escape(styles);
    document.getElementsByTagName("head")[0].appendChild(newSS);
  }
  //]]>
  </script>

Preload + Script: https://codepen.io/JulianNorton/full/GvxpVr/

Script only: https://codepen.io/JulianNorton/pen/vJRLBK

Solution

  • The answer can be found in the MDN

    preload has other advantages too. Using as to specify the type of content to be preloaded allows the browser to:

Prioritize resource loading more accurately.

    The browser priorities this resource during pre-rendering, marking it as a "stylesheet" required for the critical rendering path, while the inline element's priority is lower.