Cel mai simplu mod de a reduce CSS-ul dvs. Shopify, care este construit folosind variabile lichide

Minify Script for Shopify Liquid CSS Files

Am construit un ShopifyPlus site pentru un client care are un număr de setări pentru stilurile lor în fișierul temei propriu-zis. Deși acest lucru este cu adevărat avantajos pentru ajustarea cu ușurință a stilurilor, înseamnă că nu aveți foi de stil în cascadă statice (CSS) fișier pe care îl puteți ușor mini (reduceți dimensiunea). Uneori, acest lucru este denumit CSS comprimare și comprimare CSS-ul tău.

Ce este minimizarea CSS?

Când scrieți într-o foaie de stil, definiți stilul pentru un anumit element HTML o dată, apoi îl utilizați din nou și din nou pe orice număr de pagini web. De exemplu, dacă aș dori să configurez unele detalii despre felul în care arătau fonturile mele pe site-ul meu, aș putea să-mi organizez CSS-ul după cum urmează:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

În acea foaie de stil, fiecare spațiu, întoarcere de linie și filă ocupă spațiu. Dacă le elimin pe toate, pot reduce dimensiunea acelei foi de stil cu peste 40% dacă CSS-ul este redus! Rezultatul este acesta…

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

Minificare CSS este o necesitate dacă doriți să vă accelerați site-ul și există o serie de instrumente online care vă pot ajuta să comprimați eficient fișierul CSS. Doar caută instrument de comprimare CSS or minify instrument CSS on-line.

Imaginați-vă un fișier CSS mare și cât spațiu poate fi economisit prin minimizarea CSS-ului său... de obicei este de minim 20% și poate fi mai mare de 40% din bugetul lor. Dacă aveți o pagină CSS mai mică referită pe site-ul dvs., puteți economisi timpi de încărcare pe fiecare pagină, vă poate crește clasarea site-ului, vă poate îmbunătăți implicarea și, în cele din urmă, vă poate îmbunătăți valorile de conversie.

Dezavantajul, desigur, este că există o singură linie într-un fișier CSS comprimat, astfel încât acestea sunt incredibil de dificil de depanat sau actualizat.

Shopify CSS Liquid

În cadrul unei teme Shopify, puteți aplica setări pe care le puteți actualiza cu ușurință. Ne place să facem acest lucru în timp ce testăm și optimizăm site-urile, astfel încât să putem personaliza doar tema vizual, mai degrabă decât să pătrundem în cod. Deci, foaia noastră de stil este construită cu Liquid (limbajul de scripting Shopify) și adăugăm variabile pentru a actualiza foaia de stil. Poate arăta astfel:

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

Deși acest lucru funcționează bine, nu puteți pur și simplu să copiați codul și să utilizați un instrument online pentru a-l minimiza, deoarece scriptul lor nu înțelege etichetele lichide. De fapt, îți vei distruge total CSS-ul dacă încerci! Vestea grozavă este că, deoarece este construit cu Liquid... puteți UTILIZA scripturi pentru a minimiza rezultatul!

Shopify CSS Minificare în lichid

Shopify vă permite să scrieți cu ușurință variabile și să modificați rezultatul. În acest caz, putem de fapt să împachetăm CSS-ul nostru într-o variabilă de conținut și apoi să o manipulăm pentru a elimina toate filele, rândurile returnate și spațiile! Am găsit acest cod în Comunitate Shopify din Tim (tairli) și a funcționat genial!

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

Deci, pentru exemplul meu de mai sus, pagina mea theme.css.liquid ar arăta astfel:

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

Când rulez codul, rezultatul CSS este după cum urmează, perfect minimizat:

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