时间戳

首页 > 解决方案 > 为 Shopify 延迟 Liquid 中的非关键 CSS

php - 为 Shopify 延迟 Liquid 中的非关键 CSS

问题描述

我试图通过推迟我的 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>

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

标签： phphtmlcssshopifyliquid

解决方案

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

推荐阅读