Njira Yosavuta Kwambiri Yochepetsera Shopify CSS Yanu Yomwe Inamangidwa Pogwiritsa Ntchito Zosintha Zamadzi.

Minify Script ya Shopify Liquid CSS Files

Tinapanga a Shopify Komanso tsamba la kasitomala lomwe lili ndi zosintha zingapo zamasitayilo awo mufayilo yeniyeni yamutu. Ngakhale ndizopindulitsa kwambiri kusintha masitayelo mosavuta, zikutanthauza kuti mulibe mapepala okhazikika (CSS) fayilo yomwe mungathe mosavuta mini (chepetsani kukula). Nthawi zina izi zimatchedwa CSS Kuponderezana ndi kuponderezana CSS yanu.

Kodi CSS Minification ndi chiyani?

Pamene mukulembera ku pepala, mumatanthauzira kalembedwe ka chinthu china cha HTML kamodzi, ndikuchigwiritsa ntchito mobwerezabwereza pamasamba angapo. Mwachitsanzo, ndikadafuna kukhazikitsa mwatsatanetsatane momwe mafonti anga amawonekera patsamba langa, nditha kukonza CSS yanga motere:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Mkati mwa sitayilo imeneyo, danga lililonse, mzere wobwerera, ndi tabu zimatenga malo. Ngati ndichotsa zonsezo, nditha kuchepetsa kukula kwa sitayiloyo ndi 40% ngati CSS itachepetsedwa! Zotsatira zake ndi izi…

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

Kusintha kwa CSS ndikofunikira ngati mukufuna kufulumizitsa tsamba lanu ndipo pali zida zingapo pa intaneti zomwe zingakuthandizeni kufinya fayilo yanu ya CSS bwino. Ingofufuzani compress CSS chida or miniify chida cha CSS Intaneti.

Ingoganizirani fayilo yayikulu ya CSS ndi kuchuluka kwa malo omwe angapulumutsidwe pochepetsa CSS yake… nthawi zambiri imakhala yochepera 20% ndipo imatha kupitilira 40% ya bajeti yawo. Kukhala ndi tsamba laling'ono la CSS lomwe limatchulidwa patsamba lanu lonse kumatha kupulumutsa nthawi zochulukira patsamba lililonse, kumatha kukulitsa masanjidwe atsamba lanu, kuwongolera zomwe mukuchita, ndikuwongolera ma metrics otembenuka.

Choyipa chake ndichakuti pali mzere umodzi mufayilo ya CSS yothinikizidwa kotero kuti ndizovuta kwambiri kuthetsa kapena kusintha.

Shopify CSS Liquid

Mumutu wa Shopify, mutha kugwiritsa ntchito makonda omwe mungathe kusintha mosavuta. Timakonda kuchita izi pamene tikuyesa ndikukonza masamba kuti tingosintha mutuwo mowonekera m'malo mokumba mu code. Chifukwa chake, Stylesheet yathu idapangidwa ndi Liquid (chilankhulo cholembera cha Shopify) ndipo timawonjezera zosintha kuti tisinthe masitayilo. Zitha kuwoneka motere:

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

Ngakhale izi zimagwira ntchito bwino, simungangotengera kachidindo ndikugwiritsa ntchito chida chapaintaneti kuti muchepetse chifukwa zolemba zawo sizimvetsetsa ma tag amadzimadzi. M'malo mwake, muwononga CSS yanu ngati mutayesa! Nkhani yabwino ndiyakuti chifukwa idamangidwa ndi Liquid… mutha KUGWIRITSA NTCHITO zolemba kuti muchepetse zotulukapo!

Shopify CSS Minification Mu Liquid

Shopify imakuthandizani kuti muzitha kulemba zosinthika mosavuta ndikusintha zomwe zatuluka. Pankhaniyi, titha kukulunga CSS yathu muzosintha kenako ndikuwongolera kuti tichotse ma tabo onse, kubweza mizere, ndi mipata! Ndinapeza code iyi mu Shopify Community kuchokera Tim (chithunzi) ndipo idachita bwino kwambiri!

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

Chifukwa chake, chitsanzo changa pamwambapa, tsamba langa la theme.css.liquid lingawoneke motere:

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

Ndikayendetsa kachidindo, zotuluka za CSS zili motere, zochepetsedwa bwino:

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