Najlakši način da minimizirate svoj Shopify CSS koji je napravljen korištenjem 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 zaista korisno za jednostavno prilagođavanje stilova, to znači da nemate statične kaskadne listove stilova (CSS) datoteku koju možete lako umanjiti (smanjiti veličinu). Ponekad se ovo naziva CSS Kompresija i komprimovanje vaš CSS.

Šta je CSS minifikacija?

Kada pišete u listu 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 detalje o tome kako moji fontovi izgledaju na mojoj web stranici, 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 liste stilova, svaki razmak, povratak linije i tab zauzimaju prostor. Ako sve to uklonim, mogu smanjiti veličinu tog lista stilova za preko 40% ako se CSS minimizira! Rezultat je ovo…

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

CSS minifikacija je neophodan ako želite da ubrzate svoju web lokaciju i postoji niz alata na mreži koji vam mogu pomoći da efikasno komprimirate svoj CSS fajl. Samo traži komprimirati CSS alat or minimizira CSS alat Online.

Zamislite veliku CSS datoteku i koliko prostora se može uštedjeti minimiziranjem CSS-a… to je obično najmanje 20% i može biti više od 40% njihovog budžeta. Imajući manju CSS stranicu koja se upućuje na vašu web lokaciju može uštedjeti vrijeme učitavanja svake pojedinačne stranice, može povećati rang vaše stranice, poboljšati vaš angažman i na kraju poboljšati metriku konverzije.

Loša strana je, naravno, to što postoji jedan red u komprimiranoj CSS datoteci, tako da ih je nevjerovatno teško riješiti ili ažurirati.

Shopify CSS Liquid

Unutar Shopify teme možete primijeniti postavke koje možete lako ažurirati. Volimo to raditi dok testiramo i optimiziramo stranice tako da možemo samo vizualno prilagoditi temu umjesto da kopamo po kodu. Dakle, naš Stylesheet je napravljen sa Liquid (Shopify-jev skript jezik) i mi dodajemo varijable da ažuriramo Stylesheet. 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 umanjite jer njihova skripta ne razumije tekuće oznake. U stvari, potpuno ćete uništiti svoj CSS ako pokušate! Odlična vijest je da zato što je napravljen sa Liquid-om... zapravo možete KORISTITI skriptiranje da smanjite izlaz!

Shopify CSS minifikacija u tekućini

Shopify vam omogućava da lako skriptirate varijable i modificirate izlaz. U ovom slučaju, možemo zapravo umotati naš CSS u varijablu sadržaja i zatim njome manipulirati da uklonimo sve tabove, povratne linije i razmake! Našao sam ovaj kod u Shopify Community od Tim (tairli) i funkcionisalo 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 theme.css.liquid stranica 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}