Vienkāršākais veids, kā samazināt Shopify CSS, kas izveidots, izmantojot šķidros mainīgos

Samaziniet skriptu Shopify Liquid CSS failiem

Mēs uzbūvējām a ShopifyPlus vietne klientam, kura stilam ir vairāki iestatījumi faktiskajā motīva failā. Lai gan tas ir patiešām izdevīgi, lai viegli pielāgotu stilus, tas nozīmē, ka jums nav statiskas kaskādes stila lapas (CSS) failu, kuru varat viegli izveidot minify (samazināt izmēru). Dažreiz to sauc par CSS kompresija un saspiežot jūsu CSS.

Kas ir CSS samazināšana?

Rakstot stila lapu, jūs vienreiz definējat konkrēta HTML elementa stilu un pēc tam to atkal un atkal izmantojat jebkurā tīmekļa lapā. Piemēram, ja es vēlos iestatīt dažas specifikas tam, kā manā vietnē izskatījās mani fonti, es varētu sakārtot savu CSS šādi:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Šajā stila lapā katra atstarpe, rindas atgriešana un cilne aizņem vietu. Ja es noņemšu visus tos, es varu samazināt šīs stila lapas izmēru par vairāk nekā 40%, ja CSS ir samazināts! Rezultāts ir šāds…

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

CSS samazināšana ir obligāta, ja vēlaties paātrināt vietnes darbību, un tiešsaistē ir pieejami vairāki rīki, kas var palīdzēt efektīvi saspiest CSS failu. Vienkārši meklējiet saspiest CSS rīku or samazināt CSS rīku tiešsaistē.

Iedomājieties lielu CSS failu un to, cik daudz vietas var ietaupīt, samazinot tā CSS… parasti tas ir vismaz 20% un var būt vairāk nekā 40% no viņu budžeta. Ja visā vietnē tiek izmantota mazāka CSS lapa, varat ietaupīt katras lapas ielādes laiku, palielināt vietnes rangu, uzlabot jūsu iesaisti un galu galā uzlabot reklāmguvumu rādītājus.

Negatīvā puse, protams, ir tāda, ka saspiestā CSS failā ir viena rindiņa, tāpēc tos ir neticami grūti novērst vai atjaunināt.

Shopify CSS Liquid

Shopify motīvā varat lietot iestatījumus, kurus varat viegli atjaunināt. Mums patīk to darīt, pārbaudot un optimizējot vietnes, lai varētu tikai vizuāli pielāgot motīvu, nevis iedziļināties kodā. Tātad mūsu stila lapa ir veidota, izmantojot Liquid (Shopify skriptu valodu), un mēs pievienojam mainīgos, lai atjauninātu stilu lapu. Tas var izskatīties šādi:

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

Lai gan tas darbojas labi, jūs nevarat vienkārši kopēt kodu un izmantot tiešsaistes rīku, lai to samazinātu, jo viņu skripts nesaprot šķidros tagus. Patiesībā jūs pilnībā iznīcināsit savu CSS, ja mēģināsit! Lieliskā ziņa ir tā, ka, tā kā tas ir izveidots ar Liquid, jūs faktiski varat IZMANTOT skriptus, lai samazinātu izvadi!

Shopify CSS Minification In Liquid

Shopify ļauj viegli skriptēt mainīgos un modificēt izvadi. Šajā gadījumā mēs faktiski varam ietīt savu CSS satura mainīgajā un pēc tam manipulēt ar to, lai noņemtu visas cilnes, rindu atgriešanas un atstarpes! Es atradu šo kodu vietnē Shopify kopiena no Tims (tairli) un tas darbojās lieliski!

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

Tātad manā piemērā mana lapa theme.css.liquid izskatītos šādi:

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

Kad es palaižu kodu, izvades CSS ir šāds, lieliski samazināts:

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