Mënyra më e lehtë për të minimizuar Shopify CSS-në tuaj që është ndërtuar duke përdorur variabla të lëngshëm

Minifiko skriptin për skedarët CSS të lëngshëm të Shopify

Ne ndërtuam një ShopifyPlus faqe për një klient që ka një numër cilësimesh për stilet e tyre në skedarin aktual të temës. Ndërsa kjo është me të vërtetë e dobishme për rregullimin e lehtë të stileve, kjo do të thotë që ju nuk keni një fletë stili statike me kaskadë (CSS) skedar që mund ta keni lehtësisht minimizoj (zvogëlohet në madhësi). Ndonjëherë kjo referohet si CSS ngjeshje ngjeshja CSS tuaj.

Çfarë është CSS Minification?

Kur jeni duke shkruar në një fletë stili, ju përcaktoni stilin për një element të veçantë HTML një herë, dhe më pas e përdorni atë pa pushim në çdo numër faqesh ueb. Për shembull, nëse do të doja të vendosja disa specifika për mënyrën se si dukeshin fontet e mia në faqen time, mund ta organizoja CSS-në time si më poshtë:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Brenda asaj flete stili, çdo hapësirë, kthim i rreshtit dhe skedë zënë hapësirë. Nëse i heq të gjitha ato, mund ta zvogëloj madhësinë e asaj fletë stili me mbi 40% nëse CSS minimizohet! Rezultati është ky…

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

Minifikim CSS është një domosdoshmëri nëse doni të shpejtoni faqen tuaj dhe ka një sërë mjetesh në internet që mund t'ju ndihmojnë të kompresoni skedarin tuaj CSS në mënyrë efikase. Thjesht kërkoni ngjesh mjet CSS or minimizoj mjetin CSS online.

Imagjinoni një skedar të madh CSS dhe sa hapësirë ​​mund të kursehet duke minimizuar CSS-në e tij… zakonisht është një minimum prej 20% dhe mund të jetë mbi 40% të buxhetit të tyre. Duke pasur një faqe më të vogël CSS të referuar në të gjithë faqen tuaj, mund të kurseni kohë ngarkimi në çdo faqe të vetme, mund të rrisë renditjen e faqes tuaj, të përmirësojë angazhimin tuaj dhe në fund të përmirësojë matjet tuaja të konvertimit.

E keqja, sigurisht, është se ka një rresht të vetëm në një skedar të ngjeshur CSS, kështu që ato janë tepër të vështira për t'u zgjidhur ose përditësuar.

Shopify CSS Liquid

Brenda një teme Shopify, mund të aplikoni cilësime që mund t'i përditësoni lehtësisht. Ne na pëlqen ta bëjmë këtë ndërsa testojmë dhe optimizojmë faqet në mënyrë që të mund ta personalizojmë temën vizualisht në vend që të gërmojmë në kod. Pra, Stylesheet-i ynë është ndërtuar me Liquid (gjuha e skriptimit të Shopify) dhe ne shtojmë variabla për të përditësuar Stylesheet. Mund të duket kështu:

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

Ndërsa kjo funksionon mirë, nuk mund të kopjoni thjesht kodin dhe të përdorni një mjet në internet për ta minimizuar atë, sepse skripti i tyre nuk i kupton etiketat e lëngshme. Në fakt, ju do të shkatërroni plotësisht CSS-në tuaj nëse provoni! Lajmi i mrekullueshëm është se për shkak se është ndërtuar me Liquid… ju mund të përdorni skriptimin për të minimizuar prodhimin!

Shopify CSS Minification In Liquid

Shopify ju mundëson të skriptoni me lehtësi variablat dhe të modifikoni daljen. Në këtë rast, ne mund ta mbështjellim CSS-në tonë në një ndryshore të përmbajtjes dhe më pas ta manipulojmë atë për të hequr të gjitha skedat, kthimet e rreshtave dhe hapësirat! E gjeta këtë kod në Komuniteti Shopify nga Tim (tairli) dhe funksionoi shkëlqyeshëm!

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

Pra, për shembullin tim të mësipërm, faqja ime theme.css.liquid do të duket kështu:

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

Kur ekzekutoj kodin, CSS-ja dalëse është si më poshtë, e minimizuar në mënyrë të përkryer:

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