Najlažji način za pomanjšanje vašega Shopify CSS, ki je zgrajen z uporabo tekočih spremenljivk

Minify Script za Shopify Liquid CSS datoteke

Zgradili smo a ShopifyPlus spletno mesto za odjemalca, ki ima številne nastavitve za svoje sloge v dejanski datoteki teme. Čeprav je to res ugodno za enostavno prilagajanje slogov, to pomeni, da nimate statičnih kaskadnih slogovnih listov (CSS), ki jo lahko enostavno Pomanjšaj (zmanjšajte velikost). Včasih se to imenuje CSS stiskanje in stiskanjem vaš CSS.

Kaj je pomanjševanje CSS?

Ko pišete v slogovno tabelo, enkrat definirate slog za določen element HTML in ga nato znova in znova uporabite na poljubnem številu spletnih strani. Na primer, če bi želel nastaviti nekaj podrobnosti o tem, kako so moje pisave izgledale na svojem spletnem mestu, bi lahko svoj CSS organiziral na naslednji način:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

V tej slogovni tabeli vsak presledek, vrnitev vrstice in zavihek zavzamejo prostor. Če vse te odstranim, lahko zmanjšam velikost te slogovne tabele za več kot 40 %, če je CSS pomanjšan! Rezultat je ta…

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

Pomanjšanje CSS je obvezen, če želite pospešiti svoje spletno mesto in na spletu obstaja številna orodja, ki vam lahko pomagajo učinkovito stisniti datoteko CSS. Samo poiščite stisnite orodje CSS or pomanjšajte orodje CSS na spletu.

Predstavljajte si veliko datoteko CSS in koliko prostora lahko prihranite z zmanjšanjem njenega CSS… običajno je to najmanj 20 % in je lahko več kot 40 % njihovega proračuna. Če imate na vašem spletnem mestu napoteno manjšo stran CSS, lahko prihranite čas nalaganja vsake posamezne strani, lahko povečate uvrstitev vašega spletnega mesta, izboljšate vašo dejavnost in na koncu izboljšate meritve konverzij.

Slaba stran je seveda, da je v stisnjeni datoteki CSS ena vrstica, zato jih je izjemno težko odpraviti ali posodobiti.

Shopify CSS Liquid

V temi Shopify lahko uporabite nastavitve, ki jih lahko preprosto posodobite. To radi počnemo, ko preizkušamo in optimiziramo spletna mesta, tako da lahko samo vizualno prilagodimo temo in ne kopamo v kodo. Naš slogovni list je torej zgrajen s Liquid (skriptni jezik Shopify) in dodamo spremenljivke za posodobitev slogovne tabele. Lahko izgleda takole:

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

Čeprav to dobro deluje, ne morete preprosto kopirati kode in uporabiti spletnega orodja za pomanjšanje, ker njihov skript ne razume tekočih oznak. Pravzaprav boste popolnoma uničili svoj CSS, če poskusite! Odlična novica je, da ker je zgrajena s Liquid ... lahko dejansko UPORABLJATE skripte za pomanjšanje izhoda!

Minifikacija CSS Shopify v tekočini

Shopify vam omogoča preprosto pisanje spremenljivk in spreminjanje izhoda. V tem primeru lahko dejansko zavijemo naš CSS v spremenljivko vsebine in nato z njo manipuliramo, da odstranimo vse zavihke, vrnitve vrstic in presledke! To kodo sem našel v Skupnost Shopify iz Tim (tairli) in delovalo je briljantno!

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

Torej, za moj zgornji primer bi bila moja stran theme.css.liquid videti takole:

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

Ko zaženem kodo, je izhodni CSS, popolnoma pomanjšan:

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