Найпростіший спосіб мінімізувати ваш Shopify CSS, створений за допомогою рідких змінних

Сценарій мінімізації для файлів Shopify Liquid CSS

Ми побудували а ShopifyPlus сайту для клієнта, який має ряд налаштувань для своїх стилів у фактичному файлі теми. Хоча це дійсно вигідно для легкого налаштування стилів, це означає, що у вас немає статичних каскадних таблиць стилів (CSS) файл, який ви можете легко minify (зменшити в розмірі). Іноді це називають 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 ви можете застосувати налаштування, які можна легко оновити. Нам подобається робити це, коли ми тестуємо й оптимізуємо сайти, щоб ми могли просто налаштувати тему візуально, а не копатися в коді. Отже, наша таблиця стилів створена за допомогою 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}