Ianfeather/gist:1730c1a81819efdb273c

## gistfile1.html
<head>

  // If the user has a cookie don't render the critical css to the page
  // Ensure it matches the md5 hash of our critical css so we can cache bust

  - if cookies[:inline_css_cached] == critical_css_ref

    // Instead get the styles from local storage

    <script>
      var styles = document.createElement('style'),
          firstScript = document.getElementsByTagName('script')[0];
      styles.innerHTML = window.localStorage.getItem('critical-ccs-' + {{ critical_css_ref} });
      firstScript.parentNode.insertBefore(styles, firstScript);
    </script>

  - else

    // If the user doesn't have the cookie, render the css to the head as normal
    <style id="js-critical-css" data-ref={{ critical_css_ref }}>
      // Render our critical css
    </style>

</head>

<body>

  <div class="footer">

    - if cookies[:inline_css_cached] != critical_css_ref

      <script>

        // Store the contents of our critical css in LS
        window.localStorage.setItem('critical-ccs-' + {{ critical_css_ref }}, document.getElementById('js-critical-css').innerHTML);

        // Set the cookie for the next visit
        document.cookie = "inline_css_cached:{{ critical_css_ref }};"

      </script>

  </div>

</body>
	<head>

	// If the user has a cookie don't render the critical css to the page
	// Ensure it matches the md5 hash of our critical css so we can cache bust

	- if cookies[:inline_css_cached] == critical_css_ref

	// Instead get the styles from local storage

	<script>
	var styles = document.createElement('style'),
	firstScript = document.getElementsByTagName('script')[0];
	styles.innerHTML = window.localStorage.getItem('critical-ccs-' + {{ critical_css_ref} });
	firstScript.parentNode.insertBefore(styles, firstScript);
	</script>

	- else

	// If the user doesn't have the cookie, render the css to the head as normal
	<style id="js-critical-css" data-ref={{ critical_css_ref }}>
	// Render our critical css
	</style>

	</head>

	<body>

	<div class="footer">

	- if cookies[:inline_css_cached] != critical_css_ref

	<script>

	// Store the contents of our critical css in LS
	window.localStorage.setItem('critical-ccs-' + {{ critical_css_ref }}, document.getElementById('js-critical-css').innerHTML);

	// Set the cookie for the next visit
	document.cookie = "inline_css_cached:{{ critical_css_ref }};"

	</script>

	</div>

	</body>