Cách dễ nhất để giảm thiểu CSS Shopify của bạn được xây dựng bằng cách sử dụng các biến lỏng

Minify Script cho Shopify Liquid CSS Files

Chúng tôi đã xây dựng một ShopifyPlus trang web cho khách hàng có một số cài đặt cho kiểu của họ trong tệp chủ đề thực tế. Mặc dù điều đó thực sự thuận lợi để dễ dàng điều chỉnh kiểu, nhưng điều đó có nghĩa là bạn không có biểu định kiểu xếp tầng tĩnh (CSS) tệp mà bạn có thể dễ dàng giảm bớt (giảm kích thước). Đôi khi điều này được gọi là CSS nénnén CSS của bạn.

CSS Minification là gì?

Khi bạn ghi vào biểu định kiểu, bạn xác định kiểu cho một phần tử HTML cụ thể một lần, sau đó sử dụng nó nhiều lần trên bất kỳ số lượng trang web nào. Ví dụ: nếu tôi muốn thiết lập một số chi tiết cụ thể về cách phông chữ của tôi trông như thế nào trên trang web của mình, tôi có thể tổ chức CSS của mình như sau:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Trong biểu định kiểu đó, mỗi dấu cách, dòng trả về và tab sẽ chiếm dung lượng. Nếu tôi xóa tất cả những thứ đó, tôi có thể giảm kích thước của biểu định kiểu đó hơn 40% nếu CSS được thu nhỏ! Kết quả là…

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

Rút gọn CSS là điều bắt buộc nếu bạn muốn tăng tốc trang web của mình và có một số công cụ trực tuyến có thể giúp bạn nén tệp CSS của mình một cách hiệu quả. Chỉ cần tìm kiếm nén công cụ CSS or công cụ CSS minify .

Hãy tưởng tượng một tệp CSS lớn và có thể tiết kiệm bao nhiêu dung lượng bằng cách giảm thiểu CSS của nó… nó thường tối thiểu là 20% và có thể lên tới 40% ngân sách của chúng. Có một trang CSS nhỏ hơn được giới thiệu trên khắp trang web của bạn có thể tiết kiệm thời gian tải trên mỗi trang, có thể tăng xếp hạng trang web của bạn, cải thiện mức độ tương tác của bạn và cuối cùng là cải thiện số liệu chuyển đổi của bạn.

Tất nhiên, nhược điểm là có một dòng duy nhất trong tệp CSS nén nên chúng cực kỳ khó khắc phục sự cố hoặc cập nhật.

Shopify CSS Liquid

Trong chủ đề Shopify, bạn có thể áp dụng các cài đặt mà bạn có thể dễ dàng cập nhật. Chúng tôi muốn làm điều này khi chúng tôi kiểm tra và tối ưu hóa các trang web để chúng tôi chỉ có thể tùy chỉnh chủ đề một cách trực quan thay vì đào sâu vào mã. Vì vậy, Biểu định kiểu của chúng tôi được xây dựng bằng Liquid (ngôn ngữ kịch bản của Shopify) và chúng tôi thêm các biến để cập nhật Biểu định kiểu. Nó có thể trông như thế này:

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

Mặc dù điều này hoạt động tốt, nhưng bạn không thể chỉ đơn giản sao chép mã và sử dụng một công cụ trực tuyến để rút gọn mã vì tập lệnh của họ không hiểu các thẻ lỏng. Trên thực tế, bạn sẽ hoàn toàn phá hủy CSS của mình nếu bạn cố gắng! Tin tốt là bởi vì nó được xây dựng bằng Liquid… bạn thực sự có thể SỬ DỤNG script để giảm thiểu đầu ra!

Khai thác tối đa CSS trong chất lỏng

Shopify cho phép bạn dễ dàng tập lệnh các biến và sửa đổi đầu ra. Trong trường hợp này, chúng ta thực sự có thể bọc CSS của mình thành một biến nội dung và sau đó thao tác với nó để xóa tất cả các tab, trả về dòng và khoảng trắng! Tôi tìm thấy mã này trong Cộng đồng Shopify từ Tim (tairli) và nó hoạt động xuất sắc!

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

Vì vậy, đối với ví dụ của tôi ở trên, trang theme.css.liquid của tôi sẽ trông như thế này:

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

Khi tôi chạy mã, CSS đầu ra như sau, được rút gọn một cách hoàn hảo:

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