Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Easiest and most natural way to load CSS asynchronously without blocking HTML rendering! Tested on https://limitlesslane.com/ https://casadelux.ru/ and other projects by DUzun.ME
<html>
<head>
<!-- The <script> switches rel="prefetch" to rel="stylesheet" at proper time, et voila, magic happens :-) -->
<link rel="prefetch" type="text/css" href="https://cdn.limitlesslane.com/css/mini/async_lib.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.limitlesslane.com/css/mini/lib.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.limitlesslane.com/css/mini/app.css" />
<link rel="prefetch" type="text/css" href="https://cdn.limitlesslane.com/css/mini/async_app.css" />
<script>
;(function(w,d){
(w.requestAnimationFrame||w.mozRequestAnimationFrame||w.webkitRequestAnimationFrame||w.msRequestAnimationFrame||w.oRequestAnimationFrame||
function(f){var e='load',n,h=w[n='addEventListener']||w[n='attachEvent']&&(e='on'+e);h?w[n](e,f):setTimeout(f,17)})
(function(){
for(var h=d.getElementsByTagName('link'),i=h&&h.length,l,c;0<i--;)
(l=h[i]).rel=='prefetch'&&l.type=='text/css'&&(c=d.createElement('link'),c.rel='stylesheet',c.type=l.type,c.href=l.href,l.parentNode.insertBefore(c,l))
})
}(window,document));
</script>
</head>
<body>
Load CSS in a non-blocking fashion
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment