https://web.dev/articles/preload-responsive-images
Preloading lets you tell the browser about critical resources that you want to load as soon as possible, before they're discovered in HTML. This is especially useful for resources that aren't readily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.
https://addyosmani.com/blog/fetch-priority/
Tip: Add fetchpriority="high" to your Largest Contentful Paint (LCP) image to get it to load sooner. Priority Hints sped up Etsy’s LCP by 4% with some sites seeing an improvement of up to 20-30% in their lab tests. In many cases, fetchpriority should lead to a nice boost for LCP.
Priority Hints let you adjust the priority of loading images, CSS, fonts, scripts, and iframes. You can do a lot more than just boost LCP images:
<!-- Increase the priority of this LCP hero image -->
<img src="hero-image.jpg" fetchpriority="high" alt="Hero">
<!-- Decrease the priority for this above-the-fold image -->
<img src="happy-cats.avif" fetchpriority="low" alt="Cat">
<!-- The third-party contents of this iframe load with a low priority -->
<iframe src="https://youtu.be/JfVOS4VSpmA" fetchpriority="low"></iframe>
<script>
// Trigger a fetch with low priority
let suggestedContent = await fetch("/content/suggested", {priority: "low"});
</script>
// Scripts that are not critical can also be loaded with low-priority
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously
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.