Skip to content

Instantly share code, notes, and snippets.

@jssee

jssee/async-css.html

Forked from bendc/async-css.html
Created August 7, 2018 15:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jssee/8e69057cb12cf033c1e13369fb5af0e6 to your computer and use it in GitHub Desktop.
Save jssee/8e69057cb12cf033c1e13369fb5af0e6 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