Awayê herî hêsan Ji bo Kêmkirina Shopify CSS-ya xwe ya ku bi karanîna guhêrbarên zirav ve hatî çêkirin

Ji bo Pelên CSS Liquid Shopify Skrîpta Minify

Me ava kir a ShopifyPlus malper ji bo xerîdarek ku di pelê mijara rastîn de ji bo şêwazên wan çend mîheng hene. Digel ku ew bi rastî ji bo verastkirina şêwazên bi hêsanî sûdmend e, ev tê vê wateyê ku hûn ne xwediyê şêwazên kaskad ên statîk in (CSS) pelê ku hûn bi hêsanî dikarin mini (bi mezinbûnê kêm bikin). Carinan ev wekî CSS tê binav kirin compression û fişar kirin CSS-ya xwe.

CSS Minification çi ye?

Dema ku hûn li ser şêwazek dinivîsin, hûn şêwaza hêmanek taybetî ya HTML-ê carekê destnîşan dikin, û dûv re wê li ser her hejmarek rûpelên malperê li ser û dûbare bikar tînin. Mînakî, heke min bixwesta hin taybetmendiyan saz bikim ka fontên min li ser malpera min çawa xuya dikin, dibe ku ez CSS-ya xwe bi vî rengî organîze bikim:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Di nav wê şêwazê de, her cîh, rêz vegere, û tablo cîh digire. Ger ez wan hemîyan rakim, ez dikarim mezinahiya wê şêwazê ji% 40 kêm bikim heke CSS kêm bibe! Encam ev e…

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

Kêmkirina CSS Ger hûn dixwazin malpera xwe bilezînin pêdivî ye û hejmarek amûrên serhêl hene ku dikarin ji we re bibin alîkar ku hûn pelê CSS-ya xwe bi rengek bikêr tevlihev bikin. Tenê lêgerîn Amûra CSS-ê berhev bike or amûra CSS kêm bikin bike.

Pelek mezin a CSS-ê bihesibînin û bi kêmkirina CSS-a wê çiqas cîh dikare were xilas kirin… ew bi gelemperî herî kêm% 20 e û dikare ji% 40-ê budceya wan zêdetir be. Hebûna rûpelek piçûktir a CSS-ê ku li seranserê malpera we hatî şandin dikare demên barkirinê li ser her rûpelê hilîne, dikare rêza malpera we zêde bike, tevlêbûna we çêtir bike, û di dawiyê de metrîkên veguheztina we baştir bike.

Nerazîbûn, bê guman, ev e ku di pelek CSS-ê ya pêçandî de yek rêzek heye ji ber vê yekê çareserkirina wan an nûvekirina wan pir dijwar e.

Shopify CSS Liquid

Di nav mijarek Shopify de, hûn dikarin mîhengên ku hûn dikarin bi hêsanî nûve bikin bicîh bikin. Em hez dikin ku viya bikin dema ku em malperan ceribandin û xweşbîn bikin da ku em tenê ji kolandina kodê ve mijarê bi dîtbarî xweş bikin. Ji ber vê yekê, Stylesheet me bi Liquid (zimanê nivîsandinê ya Shopify) hatî çêkirin û em guhêrbaran lê zêde dikin ku Stylesheet nûve bikin. Dibe ku bi vî rengî xuya bike:

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

Dema ku ev baş dixebite, hûn nekarin bi tenê kodê kopî bikin û amûrek serhêl bikar bînin da ku wê kêm bikin ji ber ku skrîpta wan ji etîketên şikil fam nake. Bi rastî, heke hûn hewl bidin hûn ê CSS-ya xwe bi tevahî hilweşînin! Nûçeya girîng ev e ku ji ber ku ew bi Liquid-ê hatî çêkirin… hûn dikarin bi rastî nivîsandinê bikar bînin da ku derketinê kêm bikin!

Shopify CSS Minification In Liquid

Shopify dihêle hûn bi hêsanî guhêrbaran binivîsin û derketinê biguherînin. Di vê rewşê de, em dikarin bi rastî CSS-ya xwe di nav guhêrbarek naverokê de bipêçin û dûv re wê manîpule bikin da ku hemî tablo, vegerandina rêzan, û cîhan rakin! Min ev kod di nav de dît Civaka Shopify ji Tim (tairli) û ew bi şehrezayî xebitî!

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

Ji ber vê yekê, ji bo mînaka min a li jor, rûpela min ya theme.css.liquid dê bi vî rengî xuya bike:

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

Dema ku ez kodê dimeşînim, CSS-ya derketinê wekî jêrîn e, bi tevahî kêmkirî ye:

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