Fason ki pi fasil pou diminye CSS Shopify ou a ki bati ak varyab likid

Minify Script pou Shopify Liquid CSS Files

Nou konstwi yon ShopifyPlus sit pou yon kliyan ki gen yon kantite anviwònman pou estil yo nan dosye tèm aktyèl la. Pandan ke sa a vrèman avantaje pou fasil ajiste estil, sa vle di ke ou pa gen yon fèy estatik kaskad style (CSS) dosye ke ou ka fasilman mini (diminye nan gwosè). Pafwa yo refere yo kòm CSS konpresyon ak konpresyon CSS ou.

Ki sa ki CSS Minification?

Lè w ap ekri nan yon fèy style, ou defini style pou yon eleman HTML patikilye yon fwa, epi Lè sa a, sèvi ak li sou yo ak sou nenpòt ki kantite paj entènèt. Pou egzanp, si mwen te vle mete kèk detay sou fason polis mwen yo te gade sou sit mwen an, mwen ta ka òganize CSS mwen an jan sa a:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Nan fèy style sa a, chak espas, liy retounen, ak tab pran espas. Si mwen retire tout sa yo, mwen ka diminye gwosè fèy style sa a pa plis pase 40% si CSS la minified! Rezilta a se sa...

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS minifikasyon se yon dwe si ou vle akselere sit ou a epi gen yon kantite zouti sou entènèt ki ka ede w konprese dosye CSS ou a avèk efikasite. Jis chèche pou konpresyon zouti CSS or minify zouti CSS sou entènèt.

Imajine yon gwo dosye CSS ak ki kantite espas ka sove lè w redui CSS li yo... li tipikman yon minimòm de 20% epi li ka plis pase 40% nan bidjè yo. Lè w gen yon paj CSS ki pi piti refere nan tout sit ou a ka ekonomize tan chaj sou chak paj, ka ogmante plase sit ou a, amelyore angajman ou, epi finalman amelyore mezi konvèsyon ou.

Inconvénient la, nan kou, se ke gen yon sèl liy nan yon dosye CSS konprese konsa yo ap ekstrèmman difisil pou rezoud pwoblèm oswa mete ajou.

Shopify CSS likid

Nan yon tèm Shopify, ou ka aplike paramèt ou ka fasilman mete ajou. Nou renmen fè sa pandan nou teste ak optimize sit pou nou ka jis Customize tèm nan vizyèlman olye ke fouye nan kòd la. Se konsa, Stylesheet nou an bati ak Liquid (langaj scripting Shopify la) epi nou ajoute varyab pou mete ajou Stylesheet la. Li ka sanble tankou sa a:

{%- 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 }}
}

Pandan ke sa a travay byen, ou pa ka senpleman kopye kòd la epi sèvi ak yon zouti sou entènèt pou minify li paske script yo pa konprann Tags likid yo. An reyalite, ou pral totalman detwi CSS ou si ou eseye! Gwo nouvèl la se paske li te bati ak likid... ou ka aktyèlman USE scripting pou minify pwodiksyon an!

Shopify CSS minifikasyon nan likid

Shopify pèmèt ou fasilman script varyab ak modifye pwodiksyon an. Nan ka sa a, nou ka aktyèlman vlope CSS nou an nan yon varyab kontni ak Lè sa a, manipile li yo retire tout onglè, retounen liy, ak espas! Mwen jwenn kòd sa a nan Shopify Kominote soti nan Tim (tairli) epi li te travay briyan!

{%- 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  }}

Se konsa, pou egzanp mwen an pi wo a, paj theme.css.liquid mwen an ta sanble sa a:

{%- 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  }}

Lè mwen kouri kòd la, CSS pwodiksyon an se jan sa a, parfe minified:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}