为 Shopify 延迟 Liquid 中的非关键 CSS答案

【问题标题】：Defer non-critical CSS in Liquid for Shopify为 Shopify 延迟 Liquid 中的非关键 CSS
【发布时间】：2021-03-24 20:03:45
【问题描述】：

我正在尝试通过推迟我的 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>

请您帮忙或告诉我这是否正确？

【问题讨论】：

标签： php html css shopify liquid

【解决方案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>

【讨论】：

如何在 theme.liquid 中延迟或预加载？
@mohobs 更新了答案，与乔治的基本相同，但他的省略号

【解决方案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>

【讨论】：

不起作用，返回警告 - 的 href 值无效
@mohobs 我已经更新了答案。因为“ ”不见了