Най-лесният начин да минимизирате вашия 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;
}

В рамките на тази таблица със стилове всеки интервал, връщане на ред и раздел заемат място. Ако премахна всички тях, мога да намаля размера на тази таблица със стилове с над 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 Liquid

В рамките на тема Shopify можете да приложите настройки, които можете лесно да актуализирате. Обичаме да правим това, докато тестваме и оптимизираме сайтове, така че да можем просто да персонализираме темата визуално, вместо да ровим в кода. Така че нашият Stylesheet е изграден с Liquid (скриптовият език на Shopify) и ние добавяме променливи, за да актуализираме Stylesheet. Може да изглежда така:

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