bendc · May 26, 2016 10:52
diff --git a/async-css.html b/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>
	<!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>