To load CSS styles asynchronously, it's essential to designate it as a preload stylesheet. Simply using rel="preload" alone won't automatically transform it into a stylesheet upon page load; it will remain as a preload. To signify it as a stylesheet, you need to include another attribute like as, specifying the type of element, in this case, it should be style. Additionally, you must inform the browser when the loading process is completed by considering it as a stylesheet and defining attributes like onload along with its actual relation.
Therefore, the import should be structured as follows:
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">
NOTE: For more information on this topic, refer to web.dev.
Update 2024
Utilizing preload in Practice
In an update provided by @Hewlett, there has been significant progress in browser support for preload. As indicated on Caniuse, the feature is now widely supported across major browsers. This advancement solidifies <link rel="preload"> as a dependable choice for prefetching resources without immediate execution. Specifically for preloading stylesheets, the basic implementation would resemble the following:
<link rel="preload" as="style" href="http://www.example.com/style.css">
Implementing Preloaded Stylesheets
However, as emphasized by @MichaelFreidgeim and per MDN Web Docs, while preload prioritizes downloading and caching the resource, it does not directly apply the stylesheet. To ensure that a preloaded stylesheet functions as a stylesheet post-loading, a JavaScript-oriented solution is preferable. This approach allows for preloading the stylesheet to mitigate initial render-blocking effects, followed by application after full page load completion.
The enactment of this method is illustrated below:
<link rel="preload" as="style" href="http://www.example.com/style.css" id="preloadStyle">
<script>
window.addEventListener('load', function() {
var preloadLink = document.getElementById('preloadStyle');
preloadLink.rel = 'stylesheet';
});
</script>
With this configuration, the <link> tag initially preloads the stylesheet with rel="preload". Subsequently, the associated JavaScript snippet awaits the window.load event, triggered upon complete page loading, including all dependent resources. Upon this event, the script alters the rel attribute of the preloaded link to stylesheet, effectively applying the styles to the page. This strategy strikes a balance between efficient resource loading and optimal rendering performance.
Managing Specific DOM Positioning
In scenarios necessitating preloading of stylesheets positioned at specific locations within the DOM structure, leveraging JavaScript to dynamically insert the stylesheet post-preload phase offers a viable solution. This technique proves particularly beneficial when maintaining precise load order for styles is imperative. For example, to preload a stylesheet and insert it beneath an existing style tag, execute the following steps:
<!-- Initial style tag -->
<style id="firstStyle">
/* Embedded CSS rules */
</style>
<!-- Preload the intended CSS file -->
<link rel="preload" as="style" href="http://www.example.com/style.css" id="preloadStyle">
<script>
function loadAndInsertStyle(href, insertAfterId) {
var link = document.createElement('link');
link.href = href;
link.rel = 'stylesheet';
var ref = document.getElementById(insertAfterId);
ref.parentNode.insertBefore(link, ref.nextSibling);
}
window.addEventListener('load', function() {
loadAndInsertStyle('http://www.example.com/style.css', 'firstStyle');
});
</script>
This methodology ensures successful preload of the stylesheet and subsequent insertion at specified DOM positions, thereby enhancing control over stylesheet loading and application precision.
Prior Update (now discontinued)
Since Firefox did not support preload until recently (referencing this source), the workaround involved declaring it twice in one rel tag or utilizing two separate tags.
<link rel="preload" as="style" href="http://www.example.com/style.css">
<link rel="stylesheet" href="http://www.example.com/style.css">
Alternatively
<link rel="stylesheet" rel="preload" as="style" href="http://www.example.com/style.css">
(Note: The second option crossed out was tested by @JohnyFree on Google pagespeed and found to be unrecognized as a valid preload style despite proper format compliance according to W3.org.)