How to load CSS Asynchronously

Question

I m trying to eliminate 2 CSS files that are render blocking on my site - they appear on Google Page Speed Insights  I have followed different methods  none of which were a success  But  recently  I found a post about Thinking Async and when I applied this code   lt script async src  https   third-party com resource js  gt  lt  script gt it did eliminate the problem   However  after publishing  the page lost the styling  I m not too sure as to what is going on because the code works but it s the styling after upload that doesn t work  Would appreciate your help with this  Thanks

User · Answer

Using media  quot print quot  and onload The filament group recently  July 2019  published an article giving their latest recommendation for how to load CSS asynchronously  Even though they are the developers of the popular Javascript library loadCSS  they actually recommend this solution that does not require a Javascript library   lt link   rel  quot stylesheet quot    href  quot  path to my css quot    media  quot print quot    onload  quot this media  all   this onload   null quot   gt   Using media  quot print quot  will indicate to the browser not to use this stylesheet on screens  but on print  Browsers actually do download these print stylesheets  but asynchronously  which is what we want  We also want the stylesheet to be used once it is downloaded  and for that we set onload  quot this media  all   this onload   null quot    Some browser will call onload twice  to work around that  we need to set this onload   null    If you want  you can add a  lt noscript gt  fallback for the rare users who don t have Javascript enabled  The original article is worth a read  as it goes into more detail than I am here  This article on csswizardry com is also worth a read

User · Answer

The trick to triggering an asynchronous stylesheet download is to use a  lt link gt  element and set an invalid value for the media attribute  I m using media  none   but any value will do   When a media query evaluates to false  the browser will still download the stylesheet  but it won t wait for the content to be available before rendering the page    lt link rel  stylesheet  href  css css  media  none  gt    Once the stylesheet has finished downloading the media attribute must be set to a valid value so the style rules will be applied to the document  The onload event is used to switch the media property to all    lt link rel  stylesheet  href  css css  media  none  onload  if media   all  media  all   gt    This method of loading CSS will deliver useable content to visitors much quicker than the standard approach  Critical CSS can still be served with the usual blocking approach  or you can inline it for ultimate performance  and non-critical styles can be progressively downloaded and applied later in the parsing   rendering process   This technique uses JavaScript  but you can cater for non-JavaScript browsers by wrapping the equivalent blocking  lt link gt  elements in a  lt noscript gt  element    lt link rel  stylesheet  href  css css  media  none  onload  if media   all  media  all   gt  lt noscript gt  lt link rel  stylesheet  href  css css  gt  lt  noscript gt    You can see the operation in www itcha edu sv    Source in http   keithclark co uk

User · Answer

2020 Update    The simple answer  full browser support     lt link rel  stylesheet  href  style css  media  print  onload  this media  all   gt    The documented answer  with optional preloading and script-disabled fallback      lt  -- Optional  if we want the stylesheet to get preloaded  Note that this line causes stylesheet to get downloaded  but not applied to the page  Use strategically     while preloading will push this resource up the priority list  it may cause more important resources to be pushed down the priority list  This may not be the desired effect for non-critical CSS  depending on other resources your app needs  -- gt    lt link rel  preload  href  style css  as  style  gt     lt  -- Media type  print  doesn t match the current environment  so browser decides it s not that important and loads the stylesheet asynchronously  without delaying page rendering   On load  we change media type so that the stylesheet gets applied to screens  -- gt    lt link rel  stylesheet  href  style css  media  print  onload  this media  all   gt     lt  -- Fallback that only gets inserted when JavaScript is disabled  in which case we can t load CSS asynchronously  -- gt    lt noscript gt  lt link rel  stylesheet  href  style css  gt  lt  noscript gt    Preloading and async combined   If you need preloaded and async CSS  this solution simply combines two lines from the documented answer above  making it slightly cleaner  But this won t work in Firefox until they support the preload keyword  And again  as detailed in the documented answer above  preloading may not actually be beneficial    lt link href  style css  rel  preload  as  style  onload  this rel  stylesheet   gt   lt noscript gt  lt link rel  stylesheet  href  style css  gt  lt  noscript gt    Additional considerations   Note that  in general  if you re going to load CSS asynchronously  it s generally recommended that you inline critical CSS  since CSS is a render-blocking resource for a reason   Credit to filament group for their many async CSS solutions

User · Answer

you can try to get it in a lot of ways    1 Using media  bogus  and a  lt link gt  at the foot   lt head gt       lt  -- unimportant nonsense -- gt       lt link rel  stylesheet  href  style css  media  bogus  gt   lt  head gt   lt body gt       lt  -- other unimportant nonsense  such as content -- gt       lt link rel  stylesheet  href  style css  gt   lt  body gt    2 Inserting DOM in the old way   lt script type  text javascript  gt   function      var bsa   document createElement  script         bsa type    text javascript        bsa async   true       bsa src    https   s3 buysellads com ac bsa js      document getElementsByTagName  head   0   document getElementsByTagName  body   0   appendChild bsa          lt  script gt    3 if you can try plugins you could try      loadCSS   lt script gt       include loadCSS here      function loadCSS  href  before  media               load a file   loadCSS   path to mystylesheet css      lt  script gt

User · Answer

Async CSS Loading Approaches there are several ways to make a browser load CSS asynchronously  though none are quite as simple as you might expect   lt link rel  quot preload quot  href  quot mystyles css quot  as  quot style quot  onload  quot this rel  stylesheet  quot  gt

User · Answer

I have try to use   lt link rel  quot preload stylesheet quot  href  quot mystyles css quot  as  quot style quot  gt   It works fines  but It also raises cumulative layout shift because when we use rel  quot preload quot   it just download css   not apply immediate  Example when the DOM load a list contains ul  li tags  there is an bullets before li tags by default  then CSS applied that I remove these bullets to custom styles for listing  So that  the cumulative layout shift is happening here  Is there any solution for that

User · Answer

Use rel  quot preload quot  to make it download independently  then use onload  quot this rel  stylesheet  quot  to apply it to the stylesheet  as  quot style quot  is necessary to apply it to stylesheet else the onload won t work   lt link rel  quot preload quot  as  quot style quot  type  quot text css quot  href  quot mystyles css quot  onload  quot this rel  stylesheet  quot  gt

User · Answer

If you need to programmatically and asynchronously load a CSS link      https   www filamentgroup com lab load-css-simpler  function loadCSS href  position      const link   document createElement  link      link media    print     link rel    stylesheet     link href   href    link onload        gt    link media    all        position parentNode insertBefore link  position

User · Answer

If you have a strict content security policy that doesn t allow  vladimir-salguero s answer  you can use this  please make note of the script nonce     lt script nonce   your nonce   async gt    document  ready function            link media  none     each function a  t            var n     this  attr  data-async                i     this           void 0     n  amp  amp   1     n  amp  amp    true     n    n   amp  amp  i attr  media    all               lt  script gt    Just add the following to your stylesheet reference  media  none  data-async  true   Here s an example    lt link rel  stylesheet  href     path script js  media  none  data-async  true    gt    Example for jQuery    lt link rel  stylesheet  href  https   ajax googleapis com ajax libs jqueryui 1 12 1 themes smoothness jquery-ui css  type  text css  media  none  data-async  true  crossorigin  anonymous    gt  lt noscript gt  lt link rel  stylesheet  href  https   ajax googleapis com ajax libs jqueryui 1 12 1 themes smoothness jquery-ui css  type  text css    gt  lt  noscript gt

User · Answer

Please care to update the answer as all of the above fails to impress google pagespeed insights now    According to Google this is how you should implement async loading of Css    lt  noscript id  deferred-styles   gt           lt  link rel  stylesheet  type  text css  href  small css    gt       lt   noscript  gt    lt script gt    var loadDeferredStyles   function         var addStylesNode   document getElementById  deferred-styles        var replacement   document createElement  div        replacement innerHTML   addStylesNode textContent      document body appendChild replacement      addStylesNode parentElement removeChild addStylesNode          var raf   window requestAnimationFrame    window mozRequestAnimationFrame          window webkitRequestAnimationFrame    window msRequestAnimationFrame    if  raf  raf function     window setTimeout loadDeferredStyles  0         else window addEventListener  load   loadDeferredStyles    lt  script gt

User · Answer

The function below will create and add to the document all the stylesheets that you wish to load asynchronously   But  thanks to the Event Listener  it will only do so after all the window s other resources have loaded    See the following   function loadAsyncStyleSheets          var asyncStyleSheets           stylesheets async-stylesheet-1 css         stylesheets async-stylesheet-2 css              for  var i   0  i  lt  asyncStyleSheets length  i              var link   document createElement  link            link setAttribute  rel    stylesheet            link setAttribute  href   asyncStyleSheets i            document head appendChild link            window addEventListener  load   loadAsyncStyleSheets  false

[html] How to load CSS Asynchronously

Using `media="print"` and `onload`

Examples related to html

Examples related to css

Examples related to asynchronous

[html] How to load CSS Asynchronously

Using media="print" and onload

Examples related to html

Examples related to css

Examples related to asynchronous

Using `media="print"` and `onload`