Роҳи осонтарини кам кардани Shopify CSS-и шумо, ки бо истифода аз тағирёбандаҳои моеъ сохта шудааст

Скриптро барои файлҳои Shopify Liquid CSS кам кунед

Мо сохтем а ShopifyPlus сайт барои муштарӣ, ки дорои як қатор танзимот барои сабкҳои онҳо дар файли мавзӯъ воқеии. Гарчанде ки ин барои ба осонӣ танзим кардани услубҳо воқеан муфид аст, ин маънои онро дорад, ки шумо ҷадвалҳои статикии статикӣ надоред (CSS) файле, ки шумо метавонед ба осонӣ хурд (ҳаҷмро кам кардан). Баъзан ин ҳамчун CSS номида мешавад Фишурда ва фишурдан CSS-и шумо.

CSS Minification чист?

Вақте ки шумо ба ҷадвали услуб менависед, шумо услуби як унсури HTMLро як маротиба муайян мекунед ва сипас онро дар ҳама гуна шумораи веб саҳифаҳо такрор ба такрор истифода мебаред. Масалан, агар ман мехостам, ки дар бораи чӣ гуна шрифтҳои ман дар сайти ман баъзе мушаххасот муқаррар кунам, ман метавонам CSS-и худро ба таври зерин ташкил кунам:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Дар дохили он ҷадвали услубҳо, ҳар як фосила, баргардонидани сатр ва ҷадвал ҷойро ишғол мекунад. Агар ман ҳамаи онҳоро нест кунам, ман метавонам андозаи он ҷадвали услубро то 40% кам кунам, агар CSS хурд карда шавад! Натиҷа ин аст…

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

Минификатсияи CSS ҳатмист, агар шумо хоҳед, ки сайти худро суръат бахшед ва як қатор асбобҳои онлайн мавҷуданд, ки метавонанд ба шумо дар фишурдани файли CSS-и шумо ба таври муассир кӯмак расонанд. Танҳо ҷустуҷӯ кунед асбоби CSS-ро фишурда кунед or асбоби CSS-ро хурд кунед онлайн.

Тасаввур кунед, ки як файли бузурги CSS ва чӣ қадар ҷойро тавассути кам кардани CSS-и он сарфа кардан мумкин аст… он одатан ҳадди аққал 20% ва метавонад аз 40% буҷаи онҳоро ташкил диҳад. Доштани як саҳифаи хурдтари CSS, ки дар тамоми сайти шумо истинод шудааст, метавонад вақти боркунии ҳар як саҳифаро сарфа кунад, рейтинги сайти шуморо афзоиш диҳад, ҷалби шуморо беҳтар кунад ва дар ниҳоят ченакҳои табдилдиҳии шуморо беҳтар созад.

Камбуди, албатта, дар он аст, ки дар файли фишурдашудаи CSS як хати ягона мавҷуд аст, бинобар ин бартараф кардани мушкилот ё навсозии онҳо бениҳоят душвор аст.

Shopify CSS моеъ

Дар доираи мавзӯи Shopify, шумо метавонед танзимотеро татбиқ кунед, ки шумо метавонед ба осонӣ навсозӣ кунед. Мо инро мехоҳем, ки сайтҳоро озмоиш ва оптимизатсия кунем, то мо метавонем мавзӯъро ба таври визуалӣ танзим кунем, на кофтани код. Ҳамин тавр, ҷадвали услуби мо бо Liquid (забони скрипти Shopify) сохта шудааст ва мо барои навсозии Ҷадвали услуб тағирёбандаҳоро илова мекунем. Он метавонад чунин бошад:

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

Гарчанде ки ин хуб кор мекунад, шумо наметавонед кодро нусхабардорӣ кунед ва асбоби онлайнро барои кам кардани он истифода баред, зеро скрипти онҳо барчаспҳои моеъро намефаҳмад. Дар асл, агар шумо кӯшиш кунед, шумо CSS-и худро комилан нест мекунед! Хабари олӣ ин аст, ки азбаски он бо Liquid сохта шудааст… шумо воқеан метавонед скриптро барои кам кардани натиҷа истифода баред!

Shopify CSS Minification дар моеъ

Shopify ба шумо имкон медиҳад, ки тағирёбандаҳоро ба осонӣ скрипт кунед ва натиҷаро тағир диҳед. Дар ин ҳолат, мо метавонем воқеан CSS-и худро ба тағирёбандаи мундариҷа печонем ва сипас онро барои нест кардани ҳама ҷадвалҳо, баргардонидани сатрҳо ва фосилаҳо идора кунем! Ман ин кодро дар Ҷамъияти Shopify аз Тим (таирли) ва он олиҷаноб кор кард!

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

Ҳамин тавр, барои мисоли ман, саҳифаи theme.css.liquid ман чунин хоҳад буд:

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

Вақте ки ман кодро иҷро мекунам, баромади CSS чунин аст, ба таври комил хурд карда мешавад:

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