Lengviausias būdas sumažinti savo Shopify CSS, kuris sukurtas naudojant skystuosius kintamuosius

Sumažinkite „Shopify Liquid CSS“ failų scenarijų

Mes pastatėme a „Shopify Plus“ Svetainė klientui, turinčiam daugybę stilių nustatymų faktiniame temos faile. Nors tai tikrai naudinga norint lengvai koreguoti stilius, tai reiškia, kad neturite statinių pakopinių stilių lapų (CSS) failą, kurį galite lengvai nemenkinti (sumažinti dydį). Kartais tai vadinama CSS suspaudimas ir suspaudimas jūsų CSS.

Kas yra CSS sumažinimas?

Kai rašote į stiliaus lapą, vieną kartą apibrėžiate konkretaus HTML elemento stilių, tada vėl ir vėl jį naudojate bet kuriame tinklalapių skaičiuje. Pavyzdžiui, jei norėčiau nustatyti tam tikrus specifiškumus, kaip mano šriftai atrodė mano svetainėje, CSS galiu tvarkyti taip:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Šiame stiliaus lape kiekvienas tarpas, eilutės grąžinimas ir skirtukas užima vietos. Jei pašalinsiu visus, galiu sumažinti to stiliaus lapo dydį daugiau nei 40%, jei CSS bus sumažintas! Rezultatas toks…

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

CSS sumažinimas yra būtinas, jei norite pagreitinti savo svetainę, o internete yra daug įrankių, kurie gali padėti efektyviai suspausti CSS failą. Tiesiog ieškokite suspausti CSS įrankį or Sumažinti CSS įrankį prisijunges.

Įsivaizduokite didelį CSS failą ir kiek vietos galima sutaupyti sumažinus jo CSS… paprastai tai yra mažiausiai 20 % ir gali sudaryti daugiau nei 40 % jų biudžeto. Jei visoje svetainėje nurodomas mažesnis CSS puslapis, galima sutaupyti kiekvieno puslapio įkėlimo laiką, padidinti svetainės reitingą, padidinti įtraukimą ir galiausiai pagerinti konversijų metriką.

Neigiamas aspektas, žinoma, yra tai, kad suspaustame CSS faile yra viena eilutė, todėl juos labai sunku pašalinti ar atnaujinti.

„Shopify CSS Liquid“.

Shopify temoje galite pritaikyti nustatymus, kuriuos galite lengvai atnaujinti. Mums patinka tai daryti, kai tikriname ir optimizuojame svetaines, kad galėtume tiesiog vizualiai tinkinti temą, o ne gilintis į kodą. Taigi, mūsų stiliaus lapas sukurtas naudojant „Liquid“ (Shopify scenarijų kalba) ir pridedame kintamuosius, kad atnaujintume stilių lentelę. Tai gali atrodyti taip:

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

Nors tai veikia gerai, negalite tiesiog nukopijuoti kodo ir naudoti internetinį įrankį, kad jį sumažintumėte, nes jų scenarijus nesupranta skystųjų žymų. Tiesą sakant, jūs visiškai sunaikinsite savo CSS, jei bandysite! Puikios naujienos yra tai, kad kadangi jis sukurtas naudojant „Liquid“, iš tikrųjų galite NAUDOTI scenarijų, kad sumažintumėte išvestį!

Shopify CSS Minification In Liquid

„Shopify“ leidžia lengvai rašyti scenarijų kintamuosius ir modifikuoti išvestį. Tokiu atveju iš tikrųjų galime suvynioti savo CSS į turinio kintamąjį ir tada juo manipuliuoti, kad pašalintume visus skirtukus, eilučių grąžinimus ir tarpus! Radau šį kodą Shopify bendruomenė nuo Timas (tairli) ir tai puikiai veikė!

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

Taigi, mano pavyzdyje, mano puslapis theme.css.liquid atrodytų taip:

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

Kai paleidžiu kodą, išvesties CSS yra tokia, puikiai sumažinta:

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