Does a ` with a non-matching media value download sync or async, render-blocking or non-render-blocking?

I’m looking for an authoritative reference with regard to whether <link rel="stylesheet"> with a non-matching media attribute value downloads synchronously or render-blocking or neither.

MDN helpfully draws attention to Scott Jehl’s experiments from several years ago:

A style sheet with a media query attached to its tag will still download even if the query returns false.


Additional Reference:

So far, so good.

But is that download-which-is-happening-anyway:

  • synchronous or asynchronous ?
  • render-blocking or non-render-blocking ?

I’m going to guess that it’s asynchronous, non-render-blocking and low priority.

But I’d really like to confirm this via an authoritative source – and I’ve been unable to find one.

Background to this question:

Now that Firefox (as of Jan 2021) supports <link rel="preload"> (see:, I’ve been running some experiments to see whether I am happiest with the behaviour of:

<link rel="preload" href="/my-non-critical-styles.css" as="style" onload="this.onload=null; this.rel='stylesheet';" /> 


<link rel="stylesheet" href="/my-non-critical-styles.css" media="print" onload="'all';"> 

I can see that they do behave differently – a speed/performance tool like GTMetrix shows very clearly that the rel="preload" approach prioritises loading the non-critical stylesheet over images, while the media="print" approach prioritises loading images over the non-critical stylesheet – but I also want to be certain that the two approaches are alike in all other respects.