Електронна търговия и търговия на дребноМаркетинг за търсене

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

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.