php - Defer non-critical CSS in Liquid for Shopify

Solution:

{{'animate.css' | asset_url }} is //cdn.shopify.com/s/files/path/to/your/animate.css

{{'animate.css' | asset_url | stylesheet_tag }} is

<link href="//cdn.shopify.com/s/files/path/to/your/animate.css" rel="stylesheet" type="text/css" media="all">

<link rel="preload" href="{{'animate.css' | asset_url}}" as="style" onload="this.onload=null;this.rel='stylesheet'">

<noscript><link rel="stylesheet" href="{{'animate.css' | asset_url }}"></noscript>

Solution:

If you want to add css of preload on shopify, please try like this

<link rel="preload" href="{{ 'animate.css' | asset_url  }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="{{ 'animate.css' | asset_url  }}"></noscript>