Najlakši način da smanjite svoj Shopify CSS koji je izgrađen pomoću tekućih varijabli

Minify Script za Shopify Liquid CSS datoteke

Izgradili smo a ShopifyPlus stranica za klijenta koji ima niz postavki za svoje stilove u stvarnoj datoteci teme. Iako je to stvarno korisno za jednostavno prilagođavanje stilova, to znači da nemate statične kaskadne listove stilova (CSS) datoteku koju možete jednostavno umanjiti (smanjiti veličinu). Ponekad se to naziva CSS kompresija i komprimiranje vaš CSS.

Što je CSS minifikacija?

Kada pišete u tablicu stilova, jednom definirate stil za određeni HTML element, a zatim ga koristite iznova i iznova na bilo koji broj web stranica. Na primjer, ako želim postaviti neke pojedinosti o tome kako moji fontovi izgledaju na svojoj web-lokaciji, mogao bih organizirati svoj CSS na sljedeći način:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Unutar te tablice stilova svaki razmak, povratak retka i kartica zauzimaju prostor. Ako sve to uklonim, mogu smanjiti veličinu te tablice stilova za više od 40% ako je CSS minimiziran! Rezultat je ovo…

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

CSS minifikacija je obavezan ako želite ubrzati svoju web stranicu i postoji niz alata na mreži koji vam mogu pomoći da učinkovito komprimirate svoju CSS datoteku. Samo tražite komprimirati CSS alat or minimizirati CSS alat na liniji.

Zamislite veliku CSS datoteku i koliko prostora se može uštedjeti minimiziranjem CSS-a... obično je to minimalno 20% i može biti više od 40% njihovog budžeta. Preporuka manje CSS stranice na cijeloj web-lokaciji može uštedjeti vrijeme učitavanja svake pojedine stranice, može povećati rang vaše web-lokacije, poboljšati vaš angažman i u konačnici poboljšati mjerne podatke konverzije.

Nedostatak je, naravno, to što postoji jedan redak u komprimiranoj CSS datoteci pa ih je nevjerojatno teško riješiti ili ažurirati.

Shopify CSS tekućina

Unutar Shopify teme možete primijeniti postavke koje možete jednostavno ažurirati. Volimo to raditi dok testiramo i optimiziramo web-mjesta tako da možemo samo vizualno prilagoditi temu umjesto da kopamo po kodu. Dakle, naš Stylesheet je izgrađen s Liquid (Shopify-jev skriptni jezik) i dodajemo varijable za ažuriranje Stylesheeta. Može izgledati ovako:

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

Iako ovo dobro funkcionira, ne možete jednostavno kopirati kod i koristiti online alat da ga smanjite jer njihova skripta ne razumije tekuće oznake. Zapravo, potpuno ćete uništiti svoj CSS ako pokušate! Sjajna vijest je da, budući da je izgrađen s Liquidom... zapravo možete KORISTITI skriptiranje da smanjite izlaz!

Shopify CSS minifikacija u tekućini

Shopify vam omogućuje jednostavno skriptiranje varijabli i modificiranje izlaza. U ovom slučaju, možemo zapravo umotati naš CSS u varijablu sadržaja i zatim njome manipulirati kako bismo uklonili sve kartice, povratne linije i razmake! Našao sam ovaj kod u Shopify zajednica iz Tim (tairli) i radio 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  }}

Dakle, za moj gornji primjer, moja stranica theme.css.liquid bi izgledala ovako:

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

Kada pokrenem kod, izlazni CSS je kako slijedi, savršeno minimiziran:

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