HTML has an attribute called
preload that allows you to give the browser a hint about how, and more importantly, when to load assets when a page loads.
preload attribute can be used on several HTML elements. For example, you can add it to the
<link> element to make browsers initiate an early fetch for your CSS stylesheet.
Don’t use the
preload attribute on your
<link> like this (as some websites recommend):
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">
Because the code above only preloads your stylesheet, it doesn’t apply it.
Instead, to both preload and apply your stylesheet (as soon as it has preloaded), you can use an inline JS
onload eventhandler on your
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
onload eventhandler will then change the link element’s
rel="preload" attribute to
rel="stylesheet" as soon as it’s done loading.
With the configuration above, browsers that support
preload will start downloading the CSS stylesheet earlier than if you didn’t use the attribute.
preload attribute isn’t supported in Firefox yet (oddly), but it works in all other modern browsers. You can still use the
preload attribute, but it just won’t prefetch your CSS in Firefox (it will load normally).