在 Shopify 的 Liquid 中延迟非关键 CSS

Question

我正在尝试通过推迟 CSS 和 JS 来提高我的网络性能速度。我是 Shopify/Liquid 的新手，尽管我认为这是一个 PHP 问题，但我不知道。

我的代码是这样的（在 head 标签内）：

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

变成这样了吗？

 <!-- 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>

或者我可以像您通常在 html 中那样做吗？像这样：

<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>

你能帮忙或告诉我这是否正确吗？

Answer 1

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

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

<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>

Answer 2

如果您想在 shopify 上添加 css 预加载，请尝试这样

<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>

在 Shopify 的 Liquid 中延迟非关键 CSS

Defer non-critical CSS in Liquid for Shopify

html

css

php

liquid

shopify