Тиҷорати электронӣ ва чаканаМаркетинг

Роҳи осонтарини кам кардани Shopify 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}

Douglas Karr

Douglas Karr CMO аз OpenINSIGHTS ва асосгузори Martech Zone. Дуглас ба даҳҳо стартапҳои бомуваффақияти MarTech кӯмак кардааст, дар тафтиши зарурӣ ба маблағи беш аз 5 миллиард доллар дар харид ва сармоягузории Martech кӯмак кардааст ва ба ширкатҳо дар татбиқ ва автоматикунонии стратегияҳои фурӯш ва маркетинги онҳо кӯмак мерасонад. Дуглас трансформатсияи рақамии дар сатҳи байналмилалӣ эътирофшуда ва коршинос ва сухангӯи MarTech мебошад. Дуглас инчунин муаллифи нашршудаи дастури Dummie ва китоби роҳбарияти тиҷорат аст.

Мақолаҳо марбут

Бозгашт ба боло
наздик

Блоки рекламавӣ ошкор карда шуд

Martech Zone қодир аст, ки ин мундариҷаро ба шумо бепул пешниҳод кунад, зеро мо сайти худро тавассути даромади таблиғотӣ, истинодҳои шарикӣ ва сарпарастӣ монетизатсия мекунем. Мо миннатдор хоҳем буд, агар шумо ҳангоми дидани сайти мо блокатори таблиғоти худро хориҷ кунед.