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.

Site Performance – Leverage browser caching & Eliminate render-blocking resources

How do i fix these to get a high score on PageSpeed?

  • amazon pay is from built-in magento 2 payment methods.

    Leverage browser caching for the following cacheable resources: (expiration not specified) (expiration not specified) 

    (55 seconds) (1 minute 24 seconds) (5 minutes) (10 minutes) (10 minutes) (20 minutes) (20 minutes) (2 hours)

Eliminate render-blocking resources

Eliminate render-blocking resources 0.88 s Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more. URL Size Potential Savings …mage/calendar.min.css( 2 KB 70 ms …css/styles-m.min.css( 67 KB 470 ms …css/blog-m.min.css( 2 KB 150 ms …css/blog-custom.min.css( 1 KB 150 ms …css/styles-l.min.css( 11 KB 230 ms …requirejs/require.min.js( 8 KB 190 ms …en_US/requirejs-min-resolver.min.js( 1 KB 70 ms …requirejs/mixins.min.js( 2 KB 70 ms …en_US/requirejs-config.min.js( 4 KB 70 ms …f/cfg.css( 6 KB 110 ms /css?family=Bitter|Open+Sans:300,400,600,700( 1 KB 230 ms …mailchimp/slim.css( 1 KB 70 ms 

How can I Eliminate render-blocking JavaScript and CSS in above-the-fold content?

I am using drupal 7 and Page speed in 82 for desktop on Google Page Insights. I am having some issues regarding eliminating render blocking js and css. How can I do this for aggregated js/css ? I know we cannot enable Leverage browser caching for external js. I have used following modules: 1. Minify 2. Advanced CSS / JS Aggregation.

Please see the attached screenshot of Google Page Insights.

enter image description here