Njia Rahisi Zaidi ya Kupunguza Shopify CSS Yako Iliyoundwa Kwa Kutumia Vigezo vya Kioevu

Hati ya Minify ya Faili za CSS za Shopify Liquid

Tulijenga nje a Shopify Pamoja tovuti kwa mteja ambayo ina idadi ya mipangilio ya mitindo yao katika faili halisi ya mandhari. Ingawa hiyo ni faida sana kwa mitindo ya kurekebisha kwa urahisi, inamaanisha kuwa huna laha za mtindo wa kuteleza tuli (CSS) faili ambayo unaweza kwa urahisi mini (kupunguza ukubwa). Wakati mwingine hii inajulikana kama CSS compression na kukandamiza CSS yako.

Uboreshaji wa CSS ni nini?

Unapoandikia laha ya mtindo, unafafanua mtindo wa kipengele fulani cha HTML mara moja, na kisha ukitumie tena na tena kwenye idadi yoyote ya kurasa za wavuti. Kwa mfano, ikiwa ningetaka kusanidi maelezo fulani ya jinsi fonti zangu zilivyoonekana kwenye tovuti yangu, ningeweza kupanga CSS yangu kama ifuatavyo:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ndani ya laha hiyo ya mtindo, kila nafasi, kurudi kwa mstari na kichupo huchukua nafasi. Nikiondoa zote hizo, naweza kupunguza saizi ya laha ya mtindo kwa zaidi ya 40% ikiwa CSS itapunguzwa! Matokeo yake ni haya…

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

Upunguzaji wa CSS ni lazima ikiwa ungependa kuharakisha tovuti yako na kuna zana kadhaa mtandaoni ambazo zinaweza kukusaidia kubana faili yako ya CSS kwa ufanisi. Tafuta tu compress chombo CSS or miniify chombo cha CSS online.

Hebu fikiria faili kubwa ya CSS na ni nafasi ngapi inayoweza kuhifadhiwa kwa kupunguza CSS yake... kwa kawaida ni kiwango cha chini cha 20% na inaweza kuwa zaidi ya 40% ya bajeti yao. Kuwa na ukurasa mdogo wa CSS unaorejelewa kote kwenye tovuti yako kunaweza kuokoa nyakati za upakiaji kwenye kila ukurasa mmoja, kunaweza kuongeza kiwango cha tovuti yako, kuboresha ushiriki wako, na hatimaye kuboresha metriki zako za ubadilishaji.

Upande wa chini, bila shaka, ni kwamba kuna mstari mmoja katika faili iliyobanwa ya CSS kwa hivyo ni ngumu sana kusuluhisha au kusasisha.

Shopify Kioevu cha CSS

Ndani ya mandhari ya Shopify, unaweza kutumia mipangilio ambayo unaweza kusasisha kwa urahisi. Tunapenda kufanya hivi tunapojaribu na kuboresha tovuti ili tuweze kubinafsisha mandhari kwa macho badala ya kuchimba msimbo. Kwa hivyo, Lahajedwali letu la Mtindo limejengwa kwa Liquid (lugha ya uandishi ya Shopify) na tunaongeza viambajengo ili kusasisha Laha ya Mitindo. Inaweza kuonekana kama hii:

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

Ingawa hii inafanya kazi vizuri, huwezi kunakili msimbo kwa urahisi na kutumia zana ya mtandaoni ili kuipunguza kwa sababu hati yao haielewi lebo za kioevu. Kwa kweli, utaharibu kabisa CSS yako ukijaribu! Habari njema ni kwamba kwa sababu imejengwa kwa Liquid... unaweza KUTUMIA uandishi ili kupunguza matokeo!

Shopify CSS Minification Katika Kioevu

Shopify hukuwezesha kuandika vibadilisho kwa urahisi na kurekebisha matokeo. Katika hali hii, tunaweza kuifunga CSS yetu katika kigezo cha maudhui na kisha kuibadilisha ili kuondoa vichupo vyote, urejeshaji wa laini na nafasi! Nilipata nambari hii kwenye Jumuiya ya Shopify kutoka Tim (tairli) na ilifanya kazi kwa ustadi!

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

Kwa hivyo, kwa mfano wangu hapo juu, ukurasa wangu wa theme.css.liquid ungeonekana kama hii:

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

Wakati ninaendesha nambari, CSS ya pato ni kama ifuatavyo, iliyopunguzwa kikamilifu:

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