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.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Additional Reference: http://scottjehl.github.io/CSS-Download-Tests/

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: https://caniuse.com/link-rel-preload), 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';" /> 

versus:

<link rel="stylesheet" href="/my-non-critical-styles.css" media="print" onload="this.media='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:  https://coin.amazonpay.com/cs/uedata (expiration not specified) https://coin.amazonpay.com/rb/checkStatus (expiration not specified) https://v1.addthisedge.com/live/boost/ra-xxxxxxxxxx/_ate.track.config_resp 

    (55 seconds) https://chimpstatic.com/mcjs-connected/js/users/xxxx/xxxxxx.js (1 minute 24 seconds) https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit (5 minutes) https://hello.zonos.com/api/country?siteKey=xxxxxxx (10 minutes) https://hello.zonos.com/api/translation?c=CA&siteKey=xxxx (10 minutes) https://static-na.payments-amazon.com/OffAmazonPayments/us/js/Widgets.js?nomin (20 minutes) https://static-na.payments-amazon.com/v2/login.js (20 minutes) https://www.google-analytics.com/analytics.js (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(www.mystore.com) 2 KB 70 ms …css/styles-m.min.css(www.mystore.com) 67 KB 470 ms …css/blog-m.min.css(www.mystore.com) 2 KB 150 ms …css/blog-custom.min.css(www.mystore.com) 1 KB 150 ms …css/styles-l.min.css(www.mystore.com) 11 KB 230 ms …requirejs/require.min.js(www.mystore.com) 8 KB 190 ms …en_US/requirejs-min-resolver.min.js(www.mystore.com) 1 KB 70 ms …requirejs/mixins.min.js(www.mystore.com) 2 KB 70 ms …en_US/requirejs-config.min.js(www.mystore.com) 4 KB 70 ms …f/cfg.css(www.mystore.com) 6 KB 110 ms /css?family=Bitter|Open+Sans:300,400,600,700(fonts.googleapis.com) 1 KB 230 ms …mailchimp/slim.css(www.mystore.com) 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