Skip to content

Instantly share code, notes, and snippets.

@Ianfeather
Last active August 29, 2015 14:03
Show Gist options
  • Save Ianfeather/1730c1a81819efdb273c to your computer and use it in GitHub Desktop.
Save Ianfeather/1730c1a81819efdb273c to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment