Cara Panggampangna Pikeun Ngaminimalkeun CSS Shopify Anjeun Anu Diwangun Nganggo Variabel Cair

Minify Script pikeun Shopify Liquid CSS Files

Urang ngawangun kaluar a Shopify Ditambah situs pikeun klien nu boga sababaraha setelan pikeun gaya maranéhanana dina file téma sabenerna. Sanaos éta leres-leres nguntungkeun pikeun gampang nyaluyukeun gaya, éta hartosna anjeun henteu gaduh lambaran gaya cascading statik (CSS) file anu anjeun tiasa gampang mini (ngurangan ukuranana). Kadang-kadang ieu disebut CSS komprési jeung neken CSS Anjeun.

Naon CSS Minification?

Nalika anjeun nyerat kana stylesheet, anjeun netepkeun gaya pikeun unsur HTML tinangtu sakali, teras dianggo deui sareng sababaraha halaman wéb. Salaku conto, upami kuring hoyong nyetél sababaraha spésifik pikeun kumaha fon kuring katingali dina situs kuring, kuring tiasa ngatur CSS kuring sapertos kieu:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Dina éta stylesheet, unggal spasi, garis balik, sarta tab nyokot spasi. Mun kuring miceun sakabéh éta, abdi tiasa ngurangan ukuran stylesheet éta ku leuwih 40% lamun CSS ieu minified! Hasilna ieu…

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

CSS minification nyaeta kudu lamun hayang nyepetkeun situs anjeun sarta aya sababaraha parabot online nu bisa mantuan Anjeun niiskeun file CSS Anjeun éfisién. Ngan neangan komprési alat CSS or minify alat CSS online.

Bayangkeun file CSS anu ageung sareng sabaraha rohangan anu tiasa disimpen ku ngaminimalkeun CSS-na… biasana sahenteuna 20% sareng tiasa langkung ti 40% tina anggaranna. Ngabogaan halaman CSS anu langkung alit anu dirujuk dina situs anjeun tiasa ngahémat waktos beban dina unggal halaman, tiasa ningkatkeun ranking situs anjeun, ningkatkeun papacangan anjeun, sareng pamustunganana ningkatkeun métrik konvérsi anjeun.

Kakuranganna, tangtosna, nyaéta aya hiji garis dina file CSS anu dikomprés ku kituna aranjeunna hésé pisan pikeun ngungkulan atanapi ngapdet.

Shopify CSS Cairan

Dina téma Shopify, anjeun tiasa nerapkeun setélan anu anjeun tiasa ngapdet kalayan gampang. Kami resep ngalakukeun ieu nalika urang nguji sareng ngaoptimalkeun situs supados urang ngan ukur tiasa ngaropea téma sacara visual tinimbang ngali kodeu. Janten, Stylesheet kami diwangun ku Liquid (basa skrip Shopify) sareng kami nambihan variabel pikeun ngapdet Stylesheet. Éta tiasa katingali sapertos kieu:

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

Sanaos ieu jalanna saé, anjeun henteu tiasa ngan saukur nyalin kodeu sareng nganggo alat online pikeun ngaminimalkeunana sabab naskahna henteu ngartos tag cair. Nyatana, anjeun bakal ngancurkeun CSS anjeun upami anjeun nyobian! Warta anu saé nyaéta kusabab éta diwangun ku Liquid… anjeun leres-leres tiasa GUNA skrip pikeun ngaleutikan kaluaran!

Shopify CSS Minification Dina Cairan

Shopify ngamungkinkeun anjeun gampang skrip variabel sareng ngarobih kaluaran. Dina hal ieu, urang sabenerna bisa mungkus CSS urang kana variabel eusi lajeng ngamanipulasi eta pikeun miceun kabeh tab, garis mulih, sarta spasi! Kuring kapanggih kode ieu dina Komunitas Shopify ti Tim (Tairli) sarta digawé brilliantly!

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

Janten, kanggo conto kuring di luhur, halaman theme.css.liquid kuring bakal siga kieu:

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

Nalika kuring ngajalankeun kodeu, kaluaran CSS nyaéta kieu, sampurna minified:

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