การบีบอัด CSS: ทำไมและอย่างไรในการบีบอัดสไตล์ชีตของคุณ

ไฟล์ CSS เป็นปัจจัยสำคัญในขนาดหน้าและทรัพยากรที่บล็อกการเรนเดอร์ ทุกกิโลไบต์ของ CSS ต้องถูกดาวน์โหลด แยกวิเคราะห์ และนำไปใช้ก่อนที่เบราว์เซอร์จะวาดหน้าได้ การบีบอัด CSS เป็นหนึ่งในการปรับแต่งที่ง่ายและมีประสิทธิภาพที่สุดที่คุณสามารถทำได้ แต่น่าเสียดายที่เว็บไซต์จำนวนมากยังคงให้บริการสไตล์ชีตที่ไม่ได้บีบอัดในการใช้งานจริง

การบีบอัด CSS คืออะไร?

การบีบอัด CSS คือกระบวนการลบอักขระที่ไม่จำเป็นออกจากไฟล์โดยไม่เปลี่ยนแปลงฟังก์ชันการทำงานของ CSS ซึ่งรวมถึงการลบช่องว่าง การลบคอมเมนต์ การกำจัดเครื่องหมายอัฒภาคที่ไม่จำเป็น การย่อค่าสี และการรวมประกาศที่ซ้ำซ้อน ผลลัพธ์คือไฟล์ที่เล็กลงซึ่งเบราว์เซอร์สามารถดาวน์โหลดและแยกวิเคราะห์ได้เร็วขึ้น

ตัวอย่างเช่น กฎ CSS ที่มีรูปแบบดี (พร้อมคอมเมนต์และช่องว่างมากมาย) อาจใช้ 200 ไบต์ หลังจากการบีบอัด กฎเดียวกันสามารถลดเหลือ 80 ไบต์ ลดลง 60% ทั่วทั้งสไตล์ชีต การประหยัดเหล่านี้สะสมอย่างมีนัยสำคัญ

ทำไมการบีบอัด CSS จึงสำคัญ

เวลาโหลดหน้าที่เร็วขึ้น

ไฟล์ CSS ที่เล็กลงดาวน์โหลดเร็วขึ้น โดยเฉพาะบนการเชื่อมต่อมือถือที่ช้า การลดขนาด CSS ลง 100KB สามารถประหยัดเวลาหลายร้อยมิลลิวินาทีบนการเชื่อมต่อ 3G ซึ่งปรับปรุงประสบการณ์ผู้ใช้โดยตรงและลดอัตราการออกจากหน้า

เพิ่มประสิทธิภาพการแยกวิเคราะห์

เบราว์เซอร์ต้องแยกวิเคราะห์ไฟล์ CSS ทั้งหมดก่อนที่จะสามารถเรนเดอร์สิ่งใดได้ CSS ที่ถูกบีบอัดมีอักขระน้อยลงที่ต้องถูก tokenize และแยกวิเคราะห์ ซึ่งลดเวลาที่เบราว์เซอร์ใช้ในขั้นตอนการสร้าง CSSOM การปรับปรุงนี้ชัดเจนโดยเฉพาะบนอุปกรณ์ที่มีประสิทธิภาพต่ำ

ปรับปรุง Core Web Vitals

Core Web Vitals ของ Google วัดประสบการณ์ผู้ใช้ และ CSS ส่งผลโดยตรงต่อหลายเมตริก ไฟล์ CSS ที่บล็อกการเรนเดอร์ขนาดใหญ่ทำให้ First Contentful Paint และ Largest Contentful Paint ล่าช้า การบีบอัดช่วยปรับปรุงคะแนนเหล่านี้ ซึ่งจะปรับปรุงอันดับการค้นหา

ลดต้นทุนแบนด์วิดท์

สำหรับเว็บไซต์ที่มีทราฟฟิกสูง ทุกไบต์มีความสำคัญ การให้บริการ CSS ที่บีบอัดลดการบริโภคแบนด์วิดท์ ซึ่งหมายถึงต้นทุน CDN และค่าธรรมเนียมโฮสติ้งที่ต่ำลง การประหยัดสะสมทั่วทั้งการดูหน้าหลายล้านครั้ง

สิ่งที่ถูกลบออกระหว่างการบีบอัด

• ช่องว่าง: ช่องว่าง แท็บ การขึ้นบรรทัดใหม่ และการเยื้องที่ใช้เพื่อการอ่านเท่านั้นถูกลบออกทั้งหมด
• คอมเมนต์: คอมเมนต์ CSS ทั้งหมด จากคอมเมนต์บรรทัดเดียวถึงบล็อกเอกสารหลายบรรทัด ถูกลบออก
• เครื่องหมายอัฒภาคที่ไม่จำเป็น: เครื่องหมายอัฒภาคสุดท้ายก่อนวงเล็บปีกกาปิดเป็นตัวเลือกและถูกลบออก
• หน่วยของค่าศูนย์: ค่าเช่น 0px, 0em และ 0% ถูกย่อเป็น 0
• การย่อสี: สีฐานสิบหกเช่น #ffffff กลายเป็น #fff, #aabbcc กลายเป็น #abc
• การรวมคุณสมบัติ: เมื่อเป็นไปได้ คุณสมบัติย่อแทนที่ประกาศเดี่ยวหลายรายการ
• กฎที่ซ้ำ: ตัวบีบอัดขั้นสูงบางตัวลบตัวเลือกและประกาศที่ซ้ำกัน

วิธีการบีบอัด CSS

ใช้เครื่องมือออนไลน์

วิธีที่เร็วที่สุดในการบีบอัด CSS คือการใช้เครื่องมือออนไลน์ วางโค้ด CSS ของคุณ คลิกปุ่ม และรับเวอร์ชันที่บีบอัดทันที เหมาะสำหรับงานครั้งเดียว โปรเจกต์ขนาดเล็ก หรือเมื่อไม่มีระบบการสร้าง ลองใช้เครื่องมือบีบอัด CSS ฟรีของเรา บีบอัดสไตล์ชีตของคุณในไม่กี่วินาที

ใช้เครื่องมือสร้าง

สำหรับเวิร์กโฟลว์การใช้งานจริง ให้รวมการบีบอัด CSS เข้ากับกระบวนการสร้าง ตัวเลือกที่ใช้บ่อยรวมถึง:

• cssnano: ปลั๊กอิน PostCSS ที่ดำเนินการปรับแต่งขั้นสูง รวมถึงการรวมกฎ การลบโค้ดที่ไม่ได้ใช้ และการทำให้นิพจน์ calc ง่ายขึ้น เป็นตัวบีบอัด CSS ที่ได้รับความนิยมมากที่สุดในระบบนิเวศ JavaScript
• clean-css: ตัวปรับแต่ง CSS ที่เร็วและมีประสิทธิภาพที่จัดการสไตล์ชีตที่ซับซ้อนได้ มี Node.js API และอินเทอร์เฟซบรรทัดคำสั่ง
• lightningcss: ตัวแปลงและบีบอัด CSS ที่ใช้ Rust ซึ่งเร็วกว่าทางเลือกที่ใช้ JavaScript มาก มันยังจัดการ vendor prefix และการลดระดับไวยากรณ์

ใช้ Bundler

Bundler สมัยใหม่เช่น Vite, Webpack และ Rollup สามารถบีบอัด CSS โดยอัตโนมัติระหว่างการสร้างสำหรับการใช้งานจริง Vite รวมการบีบอัด CSS โดยค่าเริ่มต้นในการสร้างโปรดักชัน สำหรับ Webpack ใช้ CssMinimizerPlugin เครื่องมือเหล่านี้จัดการการบีบอัดอย่างโปร่งใสเป็นส่วนหนึ่งของไปป์ไลน์การสร้าง

การบีบอัดเทียบกับการบีบอัดของเซิร์ฟเวอร์

การบีบอัด CSS และการบีบอัดของเซิร์ฟเวอร์เป็นเทคนิคที่เสริมกัน ไม่ใช่ทดแทนกัน การบีบอัด CSS ลดขนาดไฟล์ต้นฉบับโดยการลบอักขระที่ไม่จำเป็น ในขณะที่การบีบอัด Gzip หรือ Brotli ลดขนาดการส่งเพิ่มเติมโดยการค้นหาและเข้ารหัสรูปแบบที่ซ้ำ

ไฟล์ CSS ทั่วไปอาจลดลง 30% ผ่านการบีบอัด CSS แล้วลดลงอีก 70% ผ่านการบีบอัด Gzip การใช้ทั้งสองอย่างร่วมกันส่งไฟล์ที่เล็กที่สุดไปยังเบราว์เซอร์ เปิดการบีบอัดฝั่งเซิร์ฟเวอร์ควบคู่ไปกับการบีบอัด CSS เสมอ

ข้อผิดพลาดทั่วไปและวิธีหลีกเลี่ยง

• ให้บริการ CSS ที่ไม่ได้บีบอัดในการใช้งานจริง
• บีบอัด CSS ด้วยตนเองแล้วลืมอัปเดตเวอร์ชันที่บีบอัดหลังการเปลี่ยนแปลง
• ไม่ใช้ source map ทำให้ปัญหาการใช้งานจริงยากต่อการดีบัก
• บีบอัด CSS เท่านั้นโดยไม่เปิดการบีบอัด Gzip หรือ Brotli บนเซิร์ฟเวอร์
• บีบอัด CSS ของบุคคลที่สามโดยไม่ทดสอบปัญหาความเข้ากันได้
• แก้ไขไฟล์ที่บีบอัดโดยตรงแทนที่จะรักษาไฟล์ต้นฉบับและสร้างใหม่

การวัดผล

เพื่อตรวจสอบว่าการบีบอัดทำงานอย่างถูกต้องและให้ผลตามที่คาด ใช้เครื่องมือนักพัฒนาของเบราว์เซอร์หรือบริการทดสอบประสิทธิภาพออนไลน์วัดก่อนและหลัง เมตริกสำคัญที่ต้องติดตามรวมถึงขนาดไฟล์ CSS ทั้งหมด เวลาดาวน์โหลด เวลาแยกวิเคราะห์ CSS และผลกระทบต่อคะแนน First Contentful Paint และ Largest Contentful Paint