El. Prekyba ir mažmeninė prekybaPaieškos rinkodara

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

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}

Douglas Karr

Douglas Karr yra BRO OpenINSIGHTS ir įkūrėjas Martech Zone. Douglas padėjo daugybei sėkmingų MarTech pradedančiųjų įmonių, padėjo atlikti daugiau nei 5 mlrd. Douglas yra tarptautiniu mastu pripažintas skaitmeninės transformacijos ir MarTech ekspertas bei pranešėjas. Douglasas taip pat yra paskelbtas Dummie vadovo ir verslo lyderystės knygos autorius.

Susiję straipsniai

Atgal į viršų mygtukas
arti

Aptiktas skelbimų blokas

Martech Zone gali pateikti jums šį turinį nemokamai, nes gauname pajamų iš savo svetainės per pajamas iš skelbimų, filialų nuorodas ir rėmimą. Būtume dėkingi, jei peržiūrėdami mūsų svetainę pašalintumėte skelbimų blokavimo priemonę.