Cara Paling Mudah Untuk Meminimumkan CSS Shopify Anda Yang Dibina Menggunakan Pembolehubah Cecair

Minify Skrip untuk Fail CSS Cecair Shopify

Kami membina a ShopifyPlus tapak untuk pelanggan yang mempunyai beberapa tetapan untuk gaya mereka dalam fail tema sebenar. Walaupun itu sangat berfaedah untuk melaraskan gaya dengan mudah, ini bermakna anda tidak mempunyai helaian gaya berlatarkan statik (CSS) fail yang anda boleh dengan mudah meminimumkan (mengurangkan saiz). Kadang-kadang ini dirujuk sebagai CSS mampatan dan memampatkan CSS anda.

Apakah itu CSS Minification?

Apabila anda menulis pada helaian gaya, anda mentakrifkan gaya untuk elemen HTML tertentu sekali, dan kemudian menggunakannya berulang kali pada sebarang bilangan halaman web. Sebagai contoh, jika saya ingin menyediakan beberapa butiran tentang rupa fon saya di tapak saya, saya mungkin menyusun CSS saya seperti berikut:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Dalam lembaran gaya itu, setiap ruang, baris kembali dan tab mengambil ruang. Jika saya mengalih keluar semua itu, saya boleh mengurangkan saiz helaian gaya itu sebanyak lebih 40% jika CSS dikecilkan! Hasilnya begini…

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

Pemindahan CSS adalah satu kemestian jika anda ingin mempercepatkan tapak anda dan terdapat beberapa alatan dalam talian yang boleh membantu anda memampatkan fail CSS anda dengan cekap. Hanya mencari alat CSS memampatkan or kecilkan alat CSS dalam talian.

Bayangkan fail CSS yang besar dan berapa banyak ruang yang boleh dijimatkan dengan mengecilkan CSSnya... lazimnya sekurang-kurangnya 20% dan boleh melebihi 40% daripada belanjawan mereka. Mempunyai halaman CSS yang lebih kecil dirujuk di seluruh tapak anda boleh menjimatkan masa muat pada setiap halaman tunggal, boleh meningkatkan kedudukan tapak anda, meningkatkan penglibatan anda dan akhirnya meningkatkan metrik penukaran anda.

Kelemahannya, sudah tentu, terdapat satu baris dalam fail CSS yang dimampatkan supaya ia amat sukar untuk diselesaikan atau dikemas kini.

Cecair CSS Shopify

Dalam tema Shopify, anda boleh menggunakan tetapan yang anda boleh kemas kini dengan mudah. Kami suka melakukan ini semasa kami menguji dan mengoptimumkan tapak supaya kami hanya boleh menyesuaikan tema secara visual daripada menggali kod. Jadi, Stylesheet kami dibina dengan Liquid (bahasa skrip Shopify) dan kami menambah pembolehubah untuk mengemas kini Stylesheet. Ia mungkin kelihatan seperti ini:

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

Walaupun ini berfungsi dengan baik, anda tidak boleh hanya menyalin kod dan menggunakan alat dalam talian untuk mengecilkannya kerana skrip mereka tidak memahami teg cecair. Malah, anda akan memusnahkan CSS anda sepenuhnya jika anda mencuba! Berita baiknya ialah kerana ia dibina dengan Cecair… anda sebenarnya boleh MENGGUNAKAN skrip untuk mengecilkan output!

Shopify CSS Minification Dalam Cecair

Shopify membolehkan anda menskrip pembolehubah dan mengubah suai output dengan mudah. Dalam kes ini, kami sebenarnya boleh membungkus CSS kami ke dalam pembolehubah kandungan dan kemudian memanipulasinya untuk mengalih keluar semua tab, pengembalian baris dan ruang! Saya dapati kod ini dalam Komuniti Shopify dari Tim (tailli) dan ia berfungsi dengan cemerlang!

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

Jadi, untuk contoh saya di atas, halaman theme.css.liquid saya akan kelihatan seperti ini:

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

Apabila saya menjalankan kod, CSS output adalah seperti berikut, diminimumkan dengan sempurna:

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