How to load CSS Asynchronously

by

2020 Update

The simple answer (full browser support):

<link rel="stylesheet" href="style.css" media="print" onload="this.media="all"">

The documented answer (with optional preloading and script-disabled fallback):

 <!-- 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. -->
 <link rel="preload" href="style.css" as="style">

 <!-- 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. -->
 <link rel="stylesheet" href="style.css" media="print" onload="this.media="all"">

 <!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
 <noscript><link rel="stylesheet" href="style.css"></noscript>

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. And again, as detailed in the documented answer above, preloading may not actually be beneficial.

<link href="style.css" rel="preload" as="style" onload="this.rel="stylesheet"">
<noscript><link rel="stylesheet" href="style.css"></noscript>

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.

This approach may not work with content security policy enabled.

More Related Contents:

  1. How to align 3 divs (left/center/right) inside another div?
  2. Styling an input type=”file” button
  3. How to add images in select list?
  4. Why does z-index not work?
  5. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  6. :after and :before CSS pseudo elements hack for Internet Explorer 7
  7. Percent pie chart with css only
  8. Extend bootstrap row outside the container
  9. Why is my Grid element’s height not being calculated correctly?
  10. html/css hexagon with image inside
  11. Margin top in inline element
  12. CSS image resize issue
  13. HTML + CSS: Ordered List without the Period?
  14. How to remove “Invisible space” from HTML [duplicate]
  15. How can I center a div within another div? [duplicate]
  16. Slanted diagonal line in html or css?
  17. Is it possible to use CSS vars in CSS3 selectors?
  18. Chrome does not expand flex parent according to children’s content [duplicate]
  19. How can I vertically center text in a dynamically height div?
  20. remove blur effect on child element
  21. Why is there a default margin on the element? [closed]
  22. set css border to end in a 90 instead of a 45 degree angle
  23. CSS animate custom properties/variables
  24. Firefox 30 is not hiding select box arrows anymore
  25. extra space when centering elements using flexbox
  26. @Media print css
  27. How do I make a text input non-editable?
  28. CSS Border on PNG image with transparent parts
  29. Create wavy borders in CSS for top and bottom borders
  30. Prevent ligatures in Safari (Mavericks/iOS7) via CSS

Leave a Comment