Самый простой способ минимизировать Shopify CSS, созданный с использованием жидких переменных

Скрипт Minify для файлов Shopify Liquid CSS

Мы построили Shopify Plus сайт для клиента, который имеет ряд настроек для своих стилей в самом файле темы. Хотя это действительно удобно для легкой настройки стилей, это означает, что у вас нет статических каскадных таблиц стилей (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 жидкость

В теме 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}