Skip to content

Instantly share code, notes, and snippets.

@duzun
Last active August 29, 2015 14:04
Show Gist options
  • Save duzun/75d9bd71cdee468e57ba to your computer and use it in GitHub Desktop.
Save duzun/75d9bd71cdee468e57ba to your computer and use it in GitHub Desktop.
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