async=true for css link tag

I don't think that will work.

But We can do that using JS:

  var resource = document.createElement('link'); 
  resource.setAttribute("rel", "stylesheet");
  resource.setAttribute("href","path/to/cssfile.css");
  resource.setAttribute("type","text/css");      
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(resource);

I think That it'll achieve what you're trying to do.

If you don't want javascript have a look at: How to load CSS asynchronously without using JavaScript?

Hope it'll help.


2021 edit: Original link moved - async CSS without JavaScript https://codepen.io/tigt/post/async-css-without-javascript

"It seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets."

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> 
  <![endif]-->
</head>
<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

The article also contains benchmarks:

alt text

Tags:

Javascript

Html

Css

Dom

Recent Posts