Skip to content

Instantly share code, notes, and snippets.

@bendc

bendc/async-css.html

Created May 26, 2016 10:52
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bendc/e0457ab1a744e84a44888bf52fb3a77d to your computer and use it in GitHub Desktop.
Save bendc/e0457ab1a744e84a44888bf52fb3a77d to your computer and use it in GitHub Desktop.
Download ZIP
CSS delivery optimization
Raw
async-css.html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>Defer non-essential stylesheets</title>
<style>
/* Critical above-the-fold styles */
* { margin: 0; padding: 0 }
:root { background: red }
header { color: blue }
</style>
<main> … </main>
<script>
// Secondary stylesheets
const stylesheets = ["main", "footer"];
requestAnimationFrame(() =>
document.head.insertAdjacentHTML("beforeend",
stylesheets.reduce((a, b) => `${a}<link rel=stylesheet href=${b}.css>`, "")));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment