Суюк өзгөрмөлөр аркылуу курулган Shopify CSSиңизди кичирейтүүнүн эң оңой жолу

Shopify Liquid CSS файлдары үчүн скриптти кичирейтиңиз

Биз курганбыз ShopifyPlus чыныгы тема файлында алардын стилдери үчүн бир катар орнотуулары бар кардар үчүн сайт. Бул стилдерди оңой тууралоо үчүн чындап эле пайдалуу болсо да, бул сизде статикалык каскаддык стилдер барактары жок экенин билдирет (CSS) сиз оңой ала турган файл мини (көлөмүн кичирейтүү). Кээде бул CSS деп аталат кысуу жана кысуу сиздин CSS.

CSS кичирейтүү деген эмне?

Сиз стилдер жадыбалына жазып жатканда, белгилүү бир HTML элементинин стилин бир жолу аныктайсыз, андан кийин аны каалаган веб-баракчаларда кайра-кайра колдоносуз. Мисалы, эгер мен өзүмдүн шрифттеримдин сайтымда кандайча көрүнөөрү боюнча кээ бир спецификацияларды орноткум келсе, анда мен CSSти төмөнкүдөй уюштурушум мүмкүн:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Бул стилдер жадыбалынын ичинде ар бир боштук, сызыктарды кайтаруу жана өтмөк орун ээлейт. Эгерде мен булардын баарын алып салсам, CSS кичирейтилсе, стилдер жадыбалынын өлчөмүн 40% га азайта алам! Натыйжада бул…

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 минификациясын суюктукта

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}