Last active
November 3, 2020 08:30
-
-
Save croxton/dde57d5c7f65932e2fbacee54326c448 to your computer and use it in GitHub Desktop.
Inline critical CSS with JS (Craft CMS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% set _inline_css_block = block('_inline_css') %} | |
{% if _inline_css_block is not empty %} | |
<script> | |
(function() { | |
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */ | |
!function(e){"use strict";var n=function(n,t,o){function i(e){return a.body?e():void setTimeout(function(){i(e)})}function r(){l.addEventListener&&l.removeEventListener("load",r),l.media=o||"all"}var d,a=e.document,l=a.createElement("link");if(t)d=t;else{var s=(a.body||a.getElementsByTagName("head")[0]).childNodes;d=s[s.length-1]}var f=a.styleSheets;l.rel="stylesheet",l.href=n,l.media="only x",i(function(){d.parentNode.insertBefore(l,t?d:d.nextSibling)});var u=function(e){for(var n=l.href,t=f.length;t--;)if(f[t].href===n)return e();setTimeout(function(){u(e)})};return l.addEventListener&&l.addEventListener("load",r),l.onloadcssdefined=u,u(r),l};"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this); | |
!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(a){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){function e(){t.media=a}var a=t.media||"all";t.addEventListener?t.addEventListener("load",e):t.attachEvent&&t.attachEvent("onload",e),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(e,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this); | |
/* Has CSS been cached? */ | |
function getCookie(name) { | |
match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); | |
if (match) { | |
return match[2]; | |
} | |
return ''; | |
} | |
var cacheVal = getCookie('critical-css'); | |
var css = ''; | |
if (cacheVal != '{{ staticAssetsVersion }}') { | |
/* set cookie */ | |
document.cookie = "critical-css={{ staticAssetsVersion }}"; | |
/* inline critical CSS in the page and load our main CSS file asynchronously */ | |
css += '{{ _inline_css_block | raw |e("js") }}'; | |
css += '<link rel="preload" href="/dist/css/global.css?v={{ staticAssetsVersion }}" as="style" onload="this.rel=\'stylesheet\'" />'; | |
} else { | |
/* link to main CSS file */ | |
css += '<link rel="stylesheet" href="/dist/css/global.css?v={{ staticAssetsVersion }}" />'; | |
} | |
document.write(css); | |
})(); | |
</script> | |
<noscript> | |
<link rel="stylesheet" href="/dist/css/global.css?v={{ staticAssetsVersion }}"> | |
</noscript> | |
{% else %} | |
<link rel="stylesheet" href="/dist/css/global.css?v={{ staticAssetsVersion }}"> | |
{% endif %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment