deferring/preloading theme stylesheet

New Member
10 0 0

Hi, looking to defer/ preload my main style sheet, as per google recommendations for deferring 

Defer non-critical CSS - https://web.dev/defer-non-critical-css/

 

Being trying this.. so far.. no luck.. kills my site

<link title="theme" rel="preload" href="{{ 'theme.scss.css' | asset_url | stylesheet_tag }}" as="style">
<noscript><link rel="stylesheet" href="{{ 'theme.scss.css' | asset_url | stylesheet_tag }}"></noscript>

<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f);if(!Shopify.designMode)i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media=Shopify.designMode?d||"all":"only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
/*! onloadCSS. (onload callback for loadCSS) [c]2017 Filament Group, Inc. MIT License */
function onloadCSS(a,b){function c(){!d&&b&&(d=!0,b.call(a))}var d;a.addEventListener&&a.addEventListener("load",c),a.attachEvent&&a.attachEvent("onload",c),"isApplicationInstalled"in navigator&&"onloadcssdefined"in a&&a.onloadcssdefined(c)}
// Insert our stylesheet before our preload <link> tag
var preload = document.querySelector('link[href="{{ 'theme.scss.css' | asset_url | stylesheet_tag}}"]');
var stylesheet = loadCSS('{{ 'theme.scss.css' | asset_url | stylesheet_tag }}', preload);
// Create a property to easily detect if the stylesheet is done loading
onloadCSS(stylesheet, function() { stylesheet.loaded = true; });
</script>

 

The old way for bringing it in..
{{ 'theme.scss.css' | asset_url | stylesheet_tag }} 

0 Likes