Boost your Shopify page loading speed 🚀with this simple approach.

shopify-render-blocking.js

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  }
  if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

/* On Shopify you can call it like this */

loadjscssfile('{{ 'owl.carousel.min.css' | asset_url }}', 'css');
loadjscssfile('{{ 'theme-style.scss.css' | asset_url }}', 'css');
loadjscssfile('{{ 'theme-sections.scss.css' | asset_url }}', 'css');
loadjscssfile('{{ 'theme-responsive.scss.css' | asset_url }}', 'css');
loadjscssfile('{{ 'theme-config.scss.css' | asset_url }}', 'css');