3 ms·
In the future, (i.e. only Chrome support this) you will be able to do this: <link rel="preload" href="/assets/stylesheet.css" as="style" onload="this.rel='
by wanda 10y ago
In the future, (i.e. only Chrome support this) you will be able to do this:
<link rel="preload" href="/assets/stylesheet.css" as="style" onload="this.rel='stylesheet';">
which will more or less be async CSS. You can see that it will download in the background and morph into a stylesheet when it's ready, while the document continues to be parsed below it.
Then it will just be a matter of including this for people with JS switched off:
<noscript>
<link rel="stylesheet" href="/assets/stylesheet.css">
</noscript>
And then for browsers which have JS enabled but don't support the resource hint 'preload', you could do something like this as a fallback:
window.addEventListener( 'load', function sweepUnloadedPreloads() {
window.removeEventListener( 'load', sweepUnloadedPreloads, false );
[].slice.call( document.querySelectorAll( '[rel=preload]' ) )
.forEach( function( item ) {
// simply doing this might work:
item.rel='stylesheet';
/** OR, if that doesn't work (I haven't tested it)**/
var new_link = document.createElement( 'link' );
new_link.rel = 'stylesheet';
new_link.href = item.href;
document.head.appendChild( new_link );
});
}, false );
The sketchy hypothetical fallback technique above, or any JavaScript CSS loader, could be augmented by using prefetch to attempt to get the tyres warm and start a low-priority download of the stylesheets in question.
<link rel="prefetch" href="/assets/stylesheet.css">
And obviously there's Service Worker, which is also slim on support, but promises to turn your website into a near-native experience by providing the mother of all caches for resources and offline pages/resources.
Preload spec: https://www.w3.org/TR/preload/ https://www.w3.org/TR/preload/
Preload support: http://caniuse.com/#feat=link-rel-preload http://caniuse.com/#feat=link-rel-preload
You could also just put the link element(s) specifying your stylesheet(s) in the body to 'async' it — Stripe does this on stripe.com. It's not valid HTML but very few browsers seem to give a damn.