液体変数を使用して構築されたShopifyCSSを最小化する最も簡単な方法

Shopify LiquidCSSファイルの縮小スクリプト

私たちは Shopify プラス 実際のテーマファイルにスタイルの設定がいくつかあるクライアントのサイト。 これはスタイルを簡単に調整するのに非常に有利ですが、静的なカスケードスタイルシートがないことを意味します(CSS)簡単にできるファイル 縮小する (サイズを縮小します)。 これはCSSと呼ばれることもあります 及び 圧縮 あなたのCSS。

CSSミニファイとは何ですか?

スタイルシートに書き込むときは、特定のHTML要素のスタイルを一度定義してから、それを任意の数のWebページで繰り返し使用します。 たとえば、自分のフォントが自分のサイトでどのように表示されるかについていくつかの詳細を設定したい場合は、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ファイルにXNUMX行あるため、トラブルシューティングや更新が非常に難しいことです。

Shopify CSS Liquid

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で構築されているため、実際にスクリプトを使用して出力を縮小できることです。

液体でのShopifyCSSミニファイ

Shopifyを使用すると、変数を簡単にスクリプト化し、出力を変更できます。 この場合、実際にCSSをコンテンツ変数にラップし、それを操作してすべてのタブ、行の戻り値、およびスペースを削除できます。 私はこのコードを Shopifyコミュニティ from ティム(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}