Suyuq o'zgaruvchilar yordamida yaratilgan Shopify CSS-ni kamaytirishning eng oson usuli

Shopify Liquid CSS fayllari uchun skriptni kichiklashtirish

Biz qurdik Shopify plus haqiqiy mavzu faylida o'z uslublari uchun bir qator sozlamalarga ega bo'lgan mijoz uchun sayt. Bu uslublarni osongina sozlash uchun juda foydali bo'lsa-da, bu sizda statik kaskadli uslublar jadvallari yo'qligini anglatadi (CSS) faylni osongina olishingiz mumkin minit (hajmini kamaytirish). Ba'zan bu CSS deb ataladi Siqishni va siqish sizning CSS.

CSS-ni minimallashtirish nima?

Uslublar jadvaliga yozayotganda siz ma'lum bir HTML elementi uchun uslubni bir marta aniqlaysiz, so'ngra uni istalgan miqdordagi veb-sahifalarda qayta-qayta ishlatasiz. Misol uchun, agar men shriftimning saytimda qanday ko'rinishi haqida ba'zi ma'lumotlarni o'rnatmoqchi bo'lsam, CSS-ni quyidagicha tashkil qilishim mumkin:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ushbu uslublar jadvalida har bir bo'sh joy, satr qaytishi va yorliq joy egallaydi. Agar men bularning barchasini o'chirib tashlasam, CSS kichiklashtirilgan bo'lsa, ushbu uslublar jadvalining hajmini 40% dan ko'proq qisqartirishim mumkin! Natija shu…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS-ni minimallashtirish Agar siz saytingizni tezlashtirmoqchi bo'lsangiz va CSS faylingizni samarali tarzda siqishingizga yordam beradigan bir qator vositalar mavjud bo'lsa, bu shart. Faqat qidiring CSS vositasini siqish or CSS vositasini kichiklashtirish onlayn.

Katta CSS faylini tasavvur qiling va uning CSS-ni kichraytirish orqali qancha joy tejash mumkinligini tasavvur qiling… bu odatda kamida 20% va ularning byudjetining 40% dan ortig'ini tashkil qilishi mumkin. Saytingiz bo'ylab kichikroq CSS sahifasiga ega bo'lish har bir sahifani yuklash vaqtini tejashga, saytingiz reytingini oshirishga, ishtirokingizni yaxshilashga va oxir-oqibat konversiya ko'rsatkichlarini yaxshilashga yordam beradi.

Salbiy tomoni shundaki, siqilgan CSS faylida bitta qator mavjud, shuning uchun ularni tuzatish yoki yangilash juda qiyin.

Shopify CSS suyuqligi

Shopify mavzusida siz osongina yangilashingiz mumkin bo'lgan sozlamalarni qo'llashingiz mumkin. Biz saytlarni sinab ko'rish va optimallashtirish jarayonida buni qilishni yaxshi ko'ramiz, shunda biz kodni qazish o'rniga mavzuni vizual tarzda sozlashimiz mumkin. Shunday qilib, bizning uslublar jadvalimiz Liquid (Shopify skript tili) bilan yaratilgan va biz uslublar jadvalini yangilash uchun o'zgaruvchilarni qo'shamiz. Bu shunday ko'rinishi mumkin:

{%- 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 }}
}

Bu yaxshi ishlayotgan bo'lsa-da, kodni shunchaki nusxa ko'chira olmaysiz va uni kichraytirish uchun onlayn vositadan foydalana olmaysiz, chunki ularning skripti suyuqlik teglarini tushunmaydi. Aslida, agar urinib ko'rsangiz, CSS-ni butunlay yo'q qilasiz! Ajoyib yangilik shundaki, u Liquid bilan yaratilgani uchun… siz chiqishni kamaytirish uchun skriptlardan foydalanishingiz mumkin!

Shopify CSS-ni suyuqlikda kichiklashtirish

Shopify sizga o'zgaruvchilarni osongina skript qilish va chiqishni o'zgartirish imkonini beradi. Bunday holda, biz aslida CSS-ni tarkib o'zgaruvchisiga o'rashimiz va keyin uni barcha yorliqlar, satr qaytishlari va bo'shliqlarni olib tashlash uchun boshqarishimiz mumkin! Men ushbu kodni ichida topdim Shopify hamjamiyati dan Tim (tairli) va u ajoyib ishladi!

{%- 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  }}

Shunday qilib, yuqoridagi misolim uchun, mening theme.css.liquid sahifam quyidagicha ko'rinadi:

{%- 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  }}

Kodni ishga tushirganimda, CSS-ning chiqishi quyidagicha bo'lib, mukammal darajada kichraytirilgan:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}