jssee/async-css.html

## 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>