Zamalonda ndi ZogulitsaFufuzani Malonda

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

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}

Douglas Karr

Douglas Karr ndi CMO OpenINSIGHTS ndi woyambitsa wa Martech Zone. Douglas wathandizira oyambitsa ambiri opambana a MarTech, wathandizira kulimbikira kopitilira $ 5 bil pakugula ndi kuyika kwa Martech, ndipo akupitiliza kuthandiza makampani kukhazikitsa ndikusintha njira zawo zogulitsa ndi zotsatsa. Douglas ndi katswiri wodziwika padziko lonse lapansi wosinthira digito komanso katswiri komanso wokamba nkhani wa MarTech. Douglas ndi mlembi wofalitsidwa wa kalozera wa Dummie komanso buku la utsogoleri wabizinesi.

Nkhani

Bwererani pamwamba
Close

Adblock yapezeka

Martech Zone imatha kukupatsirani izi popanda mtengo chifukwa timapanga ndalama patsamba lathu kudzera muzotsatsa, maulalo ogwirizana, komanso kuthandizira. Tingayamikire ngati mungachotse choletsa ad mukamawona tsamba lathu.