U modu più faciule per minificà u vostru CSS Shopify chì hè custruitu Utilizendu Variabili Liquidi

Minify Script per Shopify Liquid CSS Files

Avemu custruitu fora un ShopifyPlus situ per un cliente chì hà una quantità di paràmetri per i so stili in u schedariu di tema propiu. Mentre chì hè veramente vantaghju per aghjustà facilmente stili, significa chì ùn avete micca un fogliu di stile in cascata statica (CSS) file chì pudete facilmente mini (reduce in size). A volte questu hè chjamatu CSS cumpressione e cumpressione u vostru CSS.

Cosa hè a minificazione CSS?

Quandu scrivite à un fogliu di stile, definisce u stilu per un elementu HTML particulari una volta, è poi l'utilizate una volta è più nantu à qualsiasi pagine web. Per esempiu, s'ellu vulia stabilisce alcune specifiche per cume i mo fonti parevanu nantu à u mo situ, puderia urganizà u mo CSS cum'è seguente:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

In quellu fogliu di stile, ogni spaziu, ritornu di linea è tabulazione occupanu spaziu. Se sguassate tutti quelli, possu riduce a dimensione di quella foglia di stile per più di 40% se u CSS hè minificatu! U risultatu hè questu ...

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

minificazione CSS hè un must se vulete accelerà u vostru situ è ​​ci sò una quantità di strumenti in linea chì ponu aiutà à cumpressà u vostru schedariu CSS in modu efficace. Basta à circà cumpressà strumentu CSS or minify strumentu CSS online.

Immaginate un grande schedariu CSS è quantu spaziu pò esse salvatu minimizendu u so CSS ... hè tipicamente un minimu di 20% è pò esse più di u 40% di u so budgetu. Avè una pagina CSS più chjuca riferita in u vostru situ pò salvà i tempi di carica in ogni pagina, pò aumentà u ranking di u vostru situ, migliurà u vostru impegnu, è infine migliurà e vostre metriche di cunversione.

U svantaghju, di sicuru, hè chì ci hè una sola linea in un schedariu CSS cumpressu, cusì sò incredibbilmente difficili per risolve o aghjurnà.

Shopify CSS Liquid

Dentru un tema Shopify, pudete applicà paràmetri chì pudete aghjurnà facilmente. Ci piace à fà questu mentre testemu è ottimisimu i siti in modu chì pudemu solu persunalizà u tema visualmente invece di scavà in u codice. Allora, u nostru Stylesheet hè custruitu cù Liquid (lingua di scrittura di Shopify) è aghjunghjemu variàbili per aghjurnà u Stylesheet. Pò esse cusì:

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

Mentre chì questu funziona bè, ùn pudete micca solu copià u codice è utilizate un strumentu in linea per minificà perchè u so script ùn capisce micca i tag liquidi. In fatti, distrughjite totalmente u vostru CSS se pruvate! A grande nutizia hè chì perchè hè custruitu cù Liquid ... pudete in realtà USE scripting per minificà a pruduzzioni!

Shopify CSS Minification In Liquid

Shopify vi permette di scrive facilmente variabili è mudificà l'output. In questu casu, pudemu invechjà u nostru CSS in una variabile di cuntenutu è poi manipule per sguassà tutte e tabulazioni, ritorni di linea è spazii! Aghju trovu stu codice in u Cumunità Shopify da Tim (tairli) è hà travagliatu brillanti!

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

Allora, per u mo esempiu quì sopra, a mo pagina theme.css.liquid parerebbe cusì:

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

Quandu aghju eseguitu u codice, u CSS di output hè a siguenti, perfettamente minificata:

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