我们建立了一个 Shopify Plus 在实际主题文件中具有许多样式设置的客户端的站点。 虽然这对于轻松调整样式非常有利,但这意味着您没有静态级联样式表(的CSS) 文件,您可以轻松地 缩小 (减小尺寸)。 有时这被称为 CSS 压片 和 压缩 你的 CSS。
什么是 CSS 缩小?
当您写入样式表时,您只需为特定的 HTML 元素定义一次样式,然后在任意数量的网页上反复使用它。 例如,如果我想为我的字体在我的网站上的外观设置一些细节,我可以按如下方式组织我的 CSS:
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
p {
font-size: 18px;
}
在该样式表中,每个空格、换行符和制表符都占用空间。 如果我删除所有这些,如果 CSS 被缩小,我可以将该样式表的大小减少 40% 以上! 结果是这样的……
h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}
CSS 缩小 如果您想加快网站速度,这是必须的,并且有许多在线工具可以帮助您有效地压缩 CSS 文件。 只需搜索 压缩 CSS 工具 or 缩小 CSS 工具 线上。
想象一下一个大的 CSS 文件,通过缩小它的 CSS 可以节省多少空间……通常至少占预算的 20%,甚至可以超过预算的 40%。 在您的网站中引用较小的 CSS 页面可以节省每个页面的加载时间,可以提高您网站的排名,提高您的参与度,并最终提高您的转化指标。
当然,缺点是压缩的 CSS 文件中只有一行,因此很难排除故障或更新它们。
Shopify CSS 液体
在 Shopify 模版中,您可以应用可以轻松更新的设置。 我们喜欢在测试和优化网站时这样做,这样我们就可以直观地自定义主题,而不是深入研究代码。 因此,我们的样式表是使用 Liquid(Shopify 的脚本语言)构建的,并且我们添加了变量来更新样式表。 它可能看起来像这样:
{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
font-size: {{ fontsize_h1 }}
}
h2 {
font-size: {{ fontsize_h2 }}
}
h3 {
font-size: {{ fontsize_h3 }}
}
p {
font-size: {{ fontsize_p }}
}
虽然这很好用,但您不能简单地复制代码并使用在线工具来缩小它,因为他们的脚本不理解液体标签。 事实上,如果你尝试,你会完全破坏你的 CSS! 好消息是,因为它是用 Liquid 构建的……您实际上可以使用脚本来最小化输出!
Shopify 液体中的 CSS 缩小
Shopify 使您能够轻松编写变量脚本并修改输出。 在这种情况下,我们实际上可以将 CSS 包装到一个内容变量中,然后对其进行操作以删除所有制表符、换行符和空格! 我在
Shopify 社区 止 蒂姆 (tairli) 它工作得很好!{%- capture content %}
ALL Your CSS CODE HERE
{%- endcapture -%}
{%- assign before = content.size -%}
{%- assign content = content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content }}
因此,对于我上面的示例,我的 theme.css.liquid 页面将如下所示:
{%- capture content %}
{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
font-size: {{ fontsize_h1 }}
}
h2 {
font-size: {{ fontsize_h2 }}
}
h3 {
font-size: {{ fontsize_h3 }}
}
p {
font-size: {{ fontsize_p }}
}
{%- endcapture -%}
{%- assign before = content.size -%}
{%- assign content = content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content }}
当我运行代码时,输出 CSS 如下,完美缩小:
/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}