De maklikste manier om jo Shopify CSS te verkleinen dat is boud mei floeibere fariabelen

Skript minify foar Shopify Liquid CSS-bestannen

Wy bouden út a ShopifyPlus side foar in kliïnt dy't in oantal ynstellings hat foar har stilen yn it eigentlike temabestân. Hoewol dat echt foardielich is foar maklik oanpassen fan stilen, betsjut it dat jo gjin statyske cascadearjende stylblêden hawwe (CSS) bestân dat jo maklik kinne mini (ferlytsje yn grutte). Soms wurdt dit oantsjut as CSS kompresje en komprimearjen dyn CSS.

Wat is CSS-minifikaasje?

As jo ​​​​nei in stylblêd skriuwe, definiearje jo de styl foar in bepaald HTML-elemint ien kear, en brûke it dan oer en wer op elk oantal websiden. As ik bygelyks wat spesifikaasjes ynstelle woe foar hoe't myn lettertypen op myn side seagen, kin ik myn CSS as folgjend organisearje:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Binnen dat stylblêd nimt elke romte, line werom, en ljepper romte yn. As ik dy allegear fuorthelje, kin ik de grutte fan dat stylblêd mei mear dan 40% ferminderje as de CSS minifisearre is! It resultaat is dit…

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

It minimalisearre bedriuw fan CSS is in must as jo jo side wolle fersnelle en d'r binne in oantal ark online dy't jo kinne helpe jo CSS-bestân effisjint te komprimearjen. Sykje gewoan nei compress CSS ark or minify CSS ark online.

Stel jo in grut CSS-bestân foar en hoefolle romte kin wurde besparre troch syn CSS te minifiearjen ... it is typysk in minimum fan 20% en kin mear as 40% fan har budzjet wêze. It hawwen fan in lytsere CSS-side dy't troch jo side ferwiisd wurdt, kin laadtiden op elke side besparje, kin de ranglist fan jo side ferheegje, jo belutsenens ferbetterje, en úteinlik jo konverzjemetriken ferbetterje.

It neidiel is fansels dat d'r ien rigel is yn in komprimearre CSS-bestân, sadat se ongelooflijk lestich binne om problemen op te lossen of te aktualisearjen.

Shopify CSS Liquid

Binnen in Shopify-tema kinne jo ynstellingen tapasse dy't jo maklik kinne bywurkje. Wy wolle dit graach dwaan as wy siden testen en optimalisearje, sadat wy it tema gewoan visueel kinne oanpasse ynstee fan yn 'e koade te graven. Dat, ús stylblêd is boud mei Liquid (Shopify's skripttaal) en wy foegje fariabelen ta om it stylblêd te aktualisearjen. It kin der sa útsjen:

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

Hoewol dit goed wurket, kinne jo de koade net gewoan kopiearje en in online ark brûke om it te minimalisearjen, om't har skript de floeibere tags net begrypt. Yn feite sille jo jo CSS folslein ferneatigje as jo besykje! It geweldige nijs is dat, om't it is boud mei Liquid ... jo skripting eins kinne GEBRUKKE om de útfier te minimalisearjen!

Shopify CSS-minifikaasje yn floeiber

Shopify stelt jo yn steat om maklik fariabelen te skripten en de útfier te feroarjen. Yn dit gefal kinne wy ​​​​ús CSS feitlik yn in ynhâldsfariabele ynpakke en it dan manipulearje om alle ljeppers, line returns en spaasjes te ferwiderjen! Ik fûn dizze koade yn 'e Shopify Mienskip fan Tim (tairli) en it wurke briljant!

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

Dat, foar myn foarbyld hjirboppe, soe myn pagina theme.css.liquid der sa útsjen:

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

As ik de koade útfiere, is de útfier CSS as folget, perfekt minifisearre:

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