Электронная камерцыя і рознічны гандальSearch Marketing

Самы просты спосаб мінімізаваць ваш Shopify 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 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}

Douglas Karr

Douglas Karr з'яўляецца CMO кампаніі OpenINSIGHTS і заснавальнік ст Martech Zone. Дуглас дапамог дзясяткам паспяховых стартапаў MarTech, аказаў дапамогу ў належнай абачлівасці больш чым на 5 мільярдаў долараў у набыцці і інвестыцыях Martech і працягвае дапамагаць кампаніям у рэалізацыі і аўтаматызацыі іх продажаў і маркетынгавых стратэгій. Дуглас - міжнародна прызнаны эксперт і дакладчык па лічбавай трансфармацыі і MarTech. Дуглас таксама з'яўляецца апублікаваным аўтарам даведніка па манекенах і кнігі па бізнес-кіраўніцтву.

Артыкулы па Тэме

Вярнуцца да пачатку кнопкі
блізка

Выяўлена блакіроўка рэкламы

Martech Zone можа даць вам гэты кантэнт бясплатна, таму што мы манетызуем наш сайт за кошт даходаў ад рэкламы, партнёрскіх спасылак і спонсарства. Мы былі б удзячныя, калі б вы выдалілі блакіроўшчык рэкламы пры праглядзе нашага сайта.