Il modo più semplice per ridurre al minimo il tuo Shopify CSS creato utilizzando variabili liquide

Minimizza lo script per i file CSS di Shopify Liquid

Abbiamo costruito un Shopify Plus sito per un client che dispone di una serie di impostazioni per i propri stili nel file del tema effettivo. Sebbene sia davvero vantaggioso per regolare facilmente gli stili, significa che non hai fogli di stile a cascata statici (CSS) file che puoi facilmente minify (di dimensioni ridotte). A volte questo è indicato come CSS compressione e compressione il tuo CSS.

Cos'è la minimizzazione CSS?

Quando scrivi su un foglio di stile, definisci lo stile per un particolare elemento HTML una volta, quindi lo usi più e più volte su un numero qualsiasi di pagine web. Ad esempio, se volessi impostare alcune specifiche per l'aspetto dei miei caratteri sul mio sito, potrei organizzare il mio CSS come segue:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

All'interno di quel foglio di stile, ogni spazio, ritorno di riga e tabulazione occupano spazio. Se li rimuovo tutti, posso ridurre le dimensioni di quel foglio di stile di oltre il 40% se il CSS viene minimizzato! Il risultato è questo...

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

Minimizzazione CSS è un must se vuoi velocizzare il tuo sito e ci sono una serie di strumenti online che possono aiutarti a comprimere il tuo file CSS in modo efficiente. Basta cercare comprimi lo strumento CSS or minimizza lo strumento CSS on-line.

Immagina un file CSS di grandi dimensioni e quanto spazio può essere risparmiato riducendo al minimo il suo CSS... in genere è un minimo del 20% e può arrivare fino al 40% del loro budget. Avere una pagina CSS più piccola referenziata in tutto il tuo sito può far risparmiare tempi di caricamento su ogni singola pagina, può aumentare il ranking del tuo sito, migliorare il tuo coinvolgimento e, in definitiva, migliorare le tue metriche di conversione.

Lo svantaggio, ovviamente, è che c'è una singola riga in un file CSS compresso, quindi sono incredibilmente difficili da risolvere o aggiornare.

Shopify CSS Liquido

All'interno di un tema Shopify, puoi applicare impostazioni che puoi aggiornare facilmente. Ci piace farlo mentre testiamo e ottimizziamo i siti in modo da poter semplicemente personalizzare il tema visivamente piuttosto che scavare nel codice. Quindi, il nostro foglio di stile è costruito con Liquid (il linguaggio di scripting di Shopify) e aggiungiamo variabili per aggiornare il foglio di stile. Potrebbe assomigliare a questo:

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

Sebbene funzioni bene, non puoi semplicemente copiare il codice e utilizzare uno strumento online per minimizzarlo perché il loro script non comprende i tag liquidi. In effetti, distruggerai completamente il tuo CSS se ci provi! La grande notizia è che, poiché è stato creato con Liquid... puoi effettivamente UTILIZZARE gli script per ridurre al minimo l'output!

Shopify Minimizzazione CSS in liquido

Shopify ti consente di creare facilmente script di variabili e modificare l'output. In questo caso, possiamo effettivamente racchiudere il nostro CSS in una variabile di contenuto e quindi manipolarlo per rimuovere tutte le schede, i ritorni di riga e gli spazi! Ho trovato questo codice nel file Comunità Shopify da Tim (tairli) e ha funzionato benissimo!

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

Quindi, per il mio esempio sopra, la mia pagina theme.css.liquid sarebbe simile a questa:

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

Quando eseguo il codice, il CSS di output è il seguente, perfettamente minimizzato:

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