async=true for css link tag

Question

In HTML5 script tags can be loaded async via async=true

<script src="index.js" type="text/javascript" async="true"></script>

Is there any equivalent for CSS resources? something like:

<link rel="stylesheet" type="text/css" async="true" href="style.css">

The rationale is to make the browser to load the css, and cache it, for later requests, but let the rest of the process unblocking. On, say, a splash screen.

css is applied as the page loads how would async even work? – serakfalcon Jun 03 '14 at 16:28 — serakfalcon, Jun 03 '14 at 16:28
I guess it would apply the styles as they become available. – clyfe Jun 03 '14 at 18:39 — clyfe, Jun 03 '14 at 18:39
@serakfalcon is not. google fonts blocks render page – Vasilii Suricov Feb 04 '22 at 17:33 — Vasilii Suricov, Feb 04 '22 at 17:33

Gal Margalit · Answer 1 · 2021-06-15T16:08:36.650

33

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:

edited Jun 15 '21 at 16:08

answered Aug 28 '15 at 10:03

Gal Margalit

5,525
6
52
56

1

the link is dead – a14m May 17 '21 at 11:36
Fixed, url moved – Gal Margalit Jun 09 '21 at 22:33
When reading the article, the `lazyload` attribute seems to be an IE 11 thing only, though? – Otto G Aug 18 '23 at 14:48

score 26 · Accepted Answer · edited May 23 '17 at 12:02

26

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.

edited May 23 '17 at 12:02

Community

1
1

answered Jun 03 '14 at 16:38

Vedant Terkar

4,553
8
36
62

3

This absolutely has no nothing to do with the question. – Ryan Jun 03 '14 at 16:40
13

@RPM How? according to OP he wants to load `css` async ie, with rest of `html` and this js `script` is also doing same, Also op tagged `javascript` in question. correct me if am wrong. – Vedant Terkar Jun 03 '14 at 16:43
2

Thanks. This is what I ended up doing and it works for my case (eager load to have it cached). – clyfe Jun 03 '14 at 18:40
3

Thanks a lot! +1 for using native javascript – Gregordy Jul 09 '15 at 23:18

score 9 · Answer 3 · answered Jun 18 '19 at 14:37

9

load css without render blocking

<link rel="preload" media="(min-width:801px)" href="styledesk.css" as="style">
<link rel="stylesheet" media="(min-width:801px)" href="styledesk.css">

more info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

answered Jun 18 '19 at 14:37

Asim

401
1
5
17

Interesting, but as mentioned in https://codepen.io/tigt/post/async-css-without-javascript it won't help if you're targeting old browsers, because this feature doesn't exist there. – Vadorequest Feb 07 '20 at 08:36
3

@Vadorequest If that is the constraint I agree, but this seems like a perfect case of if you are using an older browser it works, but it works way better on current browsers. In almost all cases that is a better choice in my work than trying to maintain a solution that tries to accommodate all old browsers. – Matthew Nichols Mar 24 '23 at 11:23
Oh yeah, just wanted to point out the raw edges. But yeah, it's a valid approach nowadays. – Vadorequest Mar 24 '23 at 18:34

score 1 · Answer 4 · answered Mar 27 '18 at 22:01

for asynchronous stylesheet loading that doesn't block page render that worked for me very well ((considering pageSpeed insights))...

var stylesheet = document.createElement('link');
stylesheet.href = 'fontawesome.min.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {stylesheet.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(stylesheet);

I was able to load the source of fontawesome icons in an asynchronous way without the page slowing down or waiting for requests.

score 0 · Answer 5 · answered Aug 21 '20 at 18:18

My two cents:

All external files to be downloaded using src or href inside body are async by default.

So, instead of putting your link tag for stylesheets (which you wish to download as async) in the head tag, put them somewhere in the body, preferably at the top. Example:

<body>
    <link rel="stylesheet" href="path/to/your/file">
    <!--body content-->
</body>

Same is true of script tags, if you wish to download a script async, instead of putting the script tag in head tag, put it anywhere in the body. Use of async attribute in script tags which are inside the body is redundant, you may use the defer tag if you wish to execute the script after DOM load.

<body>
    <script src="path/to/your/file"></script>
    <!--body content-->
</body>

Another thing, async and defer attributes don't have a value, like true or false, they are used as follows:

<script src="index.js" type="text/javascript" async></script>
<script src="index.js" type="text/javascript" defer></script>
<script src="index.js" type="text/javascript" defer></script>

All of this has been tested on Chrome 83.0

score -3 · Answer 6 · answered May 22 '19 at 14:08

-3

What do you think about a solution using jQuery?

jQuery('head').append('<link rel="stylesheet" type="text/css" href="path/to/cssfile.css" />');

answered May 22 '19 at 14:08

Krzysztof Kubacki

75
2
6

async=true for css link tag

6 Answers6