Најлесен начин да го минимизирате вашиот Shopify CSS што е изграден со помош на течни променливи

Minify скрипта за Shopify течни CSS-датотеки

Изградивме а Shopify Плус страница за клиент кој има голем број поставки за нивните стилови во вистинската датотека со тема. Иако тоа е навистина поволно за лесно прилагодување на стиловите, тоа значи дека немате статични каскадни листови со стилови (CSS) датотека што можете лесно да ја минифицирај (намалете ја големината). Понекогаш ова се нарекува CSS компресија компресирање вашиот CSS.

Што е CSS Minification?

Кога пишувате во лист со стилови, еднаш го дефинирате стилот за одреден 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, можете да примените поставки што можете лесно да ги ажурирате. Сакаме да го правиме ова додека ги тестираме и оптимизираме страниците за да можеме само визуелно да ја приспособиме темата наместо да копаме во кодот. Значи, нашиот 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 Minification во течност

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}