Cara termudah untuk mengecilkan CSS Shopify Anda yang Dibangun Menggunakan Variabel Cair

Skrip Perkecil untuk File CSS Cair Shopify

Kami membangun ShopifyPlus situs untuk klien yang memiliki sejumlah pengaturan untuk gaya mereka dalam file tema yang sebenarnya. Meskipun itu sangat menguntungkan untuk menyesuaikan gaya dengan mudah, itu berarti Anda tidak memiliki lembar gaya bertingkat statis (CSS) file yang Anda dapat dengan mudah mengecilkan (mengecilkan ukuran). Terkadang ini disebut sebagai CSS kompresi serta mengompresi CSS Anda.

Apa itu Minifikasi CSS?

Saat Anda menulis ke lembar gaya, Anda menentukan gaya untuk elemen HTML tertentu satu kali, lalu menggunakannya berulang kali di sejumlah halaman web. Misalnya, jika saya ingin menyiapkan beberapa hal spesifik tentang tampilan font di situs saya, saya mungkin mengatur CSS saya sebagai berikut:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Dalam stylesheet itu, setiap spasi, baris kembali, dan tab mengambil ruang. Jika saya menghapus semua itu, saya dapat mengurangi ukuran stylesheet itu lebih dari 40% jika CSS diperkecil! Hasilnya begini…

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

minifikasi CSS adalah suatu keharusan jika Anda ingin mempercepat situs Anda dan ada sejumlah alat online yang dapat membantu Anda mengompres file CSS Anda secara efisien. Cari saja kompres alat CSS or mengecilkan alat CSS on line.

Bayangkan sebuah file CSS besar dan berapa banyak ruang yang dapat dihemat dengan memperkecil CSS-nya… biasanya minimal 20% dan dapat melebihi 40% dari anggaran mereka. Memiliki halaman CSS yang lebih kecil yang dirujuk di seluruh situs Anda dapat menghemat waktu muat di setiap halaman, dapat meningkatkan peringkat situs Anda, meningkatkan keterlibatan Anda, dan pada akhirnya meningkatkan metrik konversi Anda.

Kelemahannya, tentu saja, adalah bahwa ada satu baris dalam file CSS terkompresi sehingga sangat sulit untuk memecahkan masalah atau memperbarui.

Shopify Cairan CSS

Dalam tema Shopify, Anda dapat menerapkan pengaturan yang dapat Anda perbarui dengan mudah. Kami suka melakukan ini saat kami menguji dan mengoptimalkan situs sehingga kami dapat menyesuaikan tema secara visual daripada menggali ke dalam kode. Jadi, Stylesheet kami dibuat dengan Liquid (bahasa skrip Shopify) dan kami menambahkan variabel untuk memperbarui Stylesheet. Ini mungkin terlihat 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 }}
}

Meskipun ini berfungsi dengan baik, Anda tidak bisa begitu saja menyalin kode dan menggunakan alat online untuk mengecilkannya karena skrip mereka tidak memahami tag cair. Bahkan, Anda benar-benar akan menghancurkan CSS Anda jika Anda mencobanya! Berita baiknya adalah karena dibuat dengan Liquid… Anda sebenarnya dapat MENGGUNAKAN skrip untuk memperkecil output!

Minifikasi CSS Shopify Dalam Cairan

Shopify memungkinkan Anda untuk dengan mudah membuat skrip variabel dan memodifikasi output. Dalam hal ini, kita sebenarnya dapat membungkus CSS kita ke dalam variabel konten dan kemudian memanipulasinya untuk menghapus semua tab, pengembalian baris, dan spasi! Saya menemukan kode ini di Komunitas Shopify dari Tim (tairli) dan itu bekerja 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 terlihat 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  }}

Ketika saya menjalankan kode, CSS keluaran adalah sebagai berikut, diperkecil dengan sempurna:

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