วิธีที่ง่ายที่สุดในการลดขนาด Shopify CSS ของคุณที่สร้างขึ้นโดยใช้ตัวแปรของเหลว

ย่อขนาดสคริปต์สำหรับไฟล์ CSS ของ Shopify Liquid

เราสร้าง a ShopifyPlus ไซต์สำหรับไคลเอนต์ที่มีการตั้งค่ามากมายสำหรับสไตล์ของพวกเขาในไฟล์ธีมจริง แม้ว่าจะเป็นประโยชน์อย่างมากสำหรับการปรับสไตล์อย่างง่ายดาย หมายความว่าคุณไม่มีสไตล์ชีตแบบเรียงซ้อนแบบคงที่ (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 Minification ในของเหลว

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}