Asynchronous or async loading refers to downloading and applying a page resource in the background, independently of other resources and without otherwise impacting the initial loading process.
Terms & Techniques
The terms lazy loading, on-demand, deferred, and asynchronous are all related to the various methods for minimizing initial-load page weight and eliminating render blocking resources. Although often used semi-interchangeably, there are some key differences.
Lazy Loaded = Loaded preemptively in anticipation of a need.
For example, as the page is scrolled or when a particular content element is revealed. Lazy loading images is the most common use, but it can also be effective for other resources like CAPTCHA plugins used toward the bottom of the page.
On-Demand = Loaded only when needed.
Similar to lazy loading, but typically in response to a more specific, purposeful action like loading a video when the play button is clicked or loading CAPTCHA resources when a user starts interacting with a form.
Deferred = Loaded or applied later in the initial loading process.
As with deferring Google Analytics, the defer attribute can be added to external<script> references to both load in the background and execute after initial rendering of the page, right before the DOMContentLoaded event.
Asynchronous = Loaded or applied independently of other resources.
Asynchronous loading is a good choice for files that are part of general page loading, but shouldn’t interfere with higher priority resources in the loading process.
Reconfiguring CSS For Speed
Synchronous CSS
<link rel="stylesheet" href="styles.css">
Asynchronous CSS
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">
Breaking It Down
As with any other <link> reference the browser encounters, the file starts downloading, but because the media attribute doesn’t match the current conditions the file isn’t render blocking.
Once the file is loaded, the onload JavaScript snippet updates the media attribute to a matching value – or by removing it completely, as above with this.removeAttribute(‘media’); – so that the <link> and the non-critical CSS now applies to the page.
No-JavaScript Fallback
<noscript>
<link rel="stylesheet" href="non-critical.css">
</noscript>
Increase Loading Priority
<link rel="preload" as="style" href="non-critical.css" as="style">
Media Conditions
<link rel="stylesheet" href="critical-general.css"> <link rel="stylesheet" media="(min-width:60em)" href="critical-large.css">
Conclusion
Putting all of these elements together yields a simple and effective method for asynchronous CSS loading and faster page speed:
<!-- optionally increase loading priority -->
<link rel="preload" as="style" href="non-critical.css">
<!-- core asynchronous functionality -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="non-critical.css">
<!-- no-JS fallback -->
<noscript>
<link rel="stylesheet" href="non-critical.css">
</noscript>