Ezohwebo kanye nokudayisaSesha Marketing

Indlela Elula Kakhulu Yokunciphisa I-Shopify CSS Yakho Eyakhiwe Ngokusebenzisa Okuguquguqukayo Kwe-Liquid

Sakha a I-Shopify Plus indawo yeklayenti enenombolo yezilungiselelo zezitayela zabo kufayela letimu yangempela. Nakuba lokho kunenzuzo ngempela ekulungiseni izitayela kalula, kusho ukuthi awunawo amashidi esitayela esimile (CSS) ifayela ongakwazi kalula mini (nciphisa ngosayizi). Kwesinye isikhathi lokhu kubizwa nge-CSS eminyanisiwe futhi ukucindezela i-CSS yakho.

Iyini i-CSS Miniification?

Uma ubhalela ishidi lesitayela, uchaza isitayela sento ethile ye-HTML kanye, bese uyisebenzisa ngokuphindaphindiwe kunoma iyiphi inombolo yamakhasi ewebhu. Isibonelo, uma bengifuna ukumisa imininingwane ethile yokuthi amafonti ami abukeka kanjani kusayithi lami, bengingahle ngihlele i-CSS yami ngale ndlela elandelayo:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ngaphakathi kwalelo shidi lesitayela, isikhala ngasinye, ukubuya komugqa, kanye nethebhu kuthatha isikhala. Uma ngisusa konke lokho, ngingehlisa usayizi walelo shidi lesitayela ngaphezu kuka-40% uma i-CSS incishisiwe! Umphumela uthi lokhu...

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

I-CSS minification kuyadingeka uma ufuna ukusheshisa isayithi lakho futhi kukhona inani lamathuluzi ku-inthanethi angakusiza ukuthi ucindezele ifayela lakho le-CSS ngendlela efanele. Vele useshe cindezela ithuluzi le-CSS or minify ithuluzi le-CSS inthanethi.

Cabanga ngefayela elikhulu le-CSS nokuthi singakanani isikhala esingalondolozwa ngokunciphisa i-CSS yalo… ngokuvamile okungenani ubuncane buka-20% futhi ingaba ngaphezulu kuka-40% wesabelomali sabo. Ukuba nekhasi elincane le-CSS elibhekiselwa kuyo yonke isayithi lakho kungalondoloza izikhathi zokulayisha ekhasini ngalinye, kungakhuphula izinga lesayithi lakho, kuthuthukise ukusebenzelana kwakho, futhi ekugcineni kuthuthukise amamethrikhi akho okuguqulwa.

Okubi, kunjalo, ukuthi kunomugqa owodwa efayeleni elicindezelwe le-CSS ngakho-ke anzima ngendlela emangalisayo ukuxazulula inkinga noma ukubuyekeza.

Shopify CSS Liquid

Ngaphakathi kwetimu yakwaShopify, ungasebenzisa izilungiselelo ongazibuyekeza kalula. Sithanda ukwenza lokhu njengoba sihlola futhi silungiselela amasayithi ukuze sikwazi ukwenza itimu ngendlela oyifisayo ngokubukeka kunokumba ikhodi. Ngakho, Ishidi Lesitayela sethu lakhiwe nge-Liquid (ulimi lokubhala lweShopify) futhi sengeza okuguquguqukayo ukuze sibuyekeze Ishidi Lesitayela. Kungase kubukeke kanje:

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

Nakuba lokhu kusebenza kahle, awukwazi ukumane ukopishe ikhodi futhi usebenzise ithuluzi eliku-inthanethi ukuze ulenze libe mncane ngoba umbhalo wabo awuwaqondi omaka oketshezi. Eqinisweni, uzoyibhubhisa ngokuphelele i-CSS yakho uma uzama! Izindaba ezinhle ukuthi ngenxa yokuthi yakhiwe nge-Liquid... ungakwazi ngempela UKUSEBENZISA umbhalo ukuze unciphise okukhiphayo!

Shopify CSS Minification In Liquid

I-Shopify ikuvumela ukuthi ubhale kalula okuguquguqukayo futhi uguqule okukhiphayo. Kulokhu, singakwazi ukugoqa i-CSS yethu kokuguquguqukayo kokuqukethwe bese sikukhohlisa ukuze sisuse wonke amathebhu, ukubuyiselwa komugqa, nezikhala! Ngithole le khodi ku-

Umphakathi wakwaShopify kusukela U-Tim (i-Tairli) futhi yasebenza ngokumangalisayo!

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

Ngakho-ke, isibonelo sami esingenhla, ikhasi lami le-theme.css.liquid lingabukeka kanje:

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

Uma ngisebenzisa ikhodi, i-CSS ephumayo imi kanje, yenziwe kahle:

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

Douglas Karr

Douglas Karr i-CMO ye VulaINSIGHTS kanye nomsunguli we Martech Zone. UDouglas usize inqwaba yeziqalo eziphumelelayo ze-MarTech, uye wasiza ekukhuthaleni okungaphezu kuka-$5 bil ekuthengeni nasekutshalweni kwe-Martech, futhi uyaqhubeka nokusiza izinkampani ekusebenziseni nasekuzenzeleni amasu azo okuthengisa nokumaketha. UDouglas uyingcweti yokuguqula idijithali eyaziwa emhlabeni wonke kanye nesikhulumi se-MarTech. UDouglas futhi ungumbhali oshicilelwe wencwadi kaDummie kanye nencwadi yobuholi bebhizinisi.

Izihloko ezihlobene Nalesi

Buyela emuva kunkinobho phezulu
Close

I-Adblock itholiwe

Martech Zone iyakwazi ukukunikeza lokhu okuqukethwe ngaphandle kwenkokhiso ngoba senza imali ngesayithi yethu ngemali engenayo yezikhangiso, izixhumanisi ezingaphansi, noxhaso. Singajabula uma ungasusa i-ad blocker yakho njengoba ubuka isayithi lethu.