Shopify Question posted in
The Shopify help center can be found here.

Defer non-critical CSS in Liquid for Shopify

I’m trying to improve my web performance speed by deferring my CSS and JS. I’m new to Shopify/ Liquid even though I think this a PHP question but I don’t know.

My code was like this (inside the head tag):

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

Does it become like this?

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

Or can I just do it like you would normally in html? Like this:

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

Can you please help or tell me if this is correct?

Tags:

2

Answers


  1. 0

    {{'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>
    Login or Signup to reply.
  2. 0

    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>

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search