CSS Minifier (ย่อโค้ด CSS)
วาง stylesheet เพื่อตัดช่องว่างและคอมเมนต์ ย่อค่าอย่าง #ff0000 → red และรวมกฎที่ซ้ำกันด้วยการปรับโครงสร้างของ CSSO
ทำงานในเบราว์เซอร์ไม่ต้องสมัครไม่มีการอัปโหลด
วิธีใช้ CSS Minifier
- วาง CSS หรือเปิดไฟล์
.css - เปิด จัดโครงสร้างใหม่ ไว้เพื่อรวมกฎและการประกาศ หรือปิดเพื่อย่อเฉพาะช่องว่างอย่างปลอดภัย
- เปิด เก็บคอมเมนต์ลิขสิทธิ์ ไว้เพื่อคงข้อความ
/*! … */ - เปรียบเทียบขนาดต้นฉบับ ขนาดหลังย่อ และขนาดหลัง gzip
- คัดลอกผลลัพธ์หรือดาวน์โหลด
output.min.css
การย่อ CSS ทำงานอย่างไร
เครื่องมือนี้ใช้ CSSO (CSS Optimizer) ซึ่งพาร์ส stylesheet ของคุณเป็น syntax tree แล้วพิมพ์กลับในรูปแบบที่สั้นที่สุดแต่ให้ผลเหมือนเดิม นอกจากลบช่องว่างและคอมเมนต์แล้ว ยังเขียนค่าใหม่อย่างปลอดภัย:
#ffffff→#fff,#ff0000→red0px→0,0.90→.9margin: 8px 16px 8px 16px→margin:8px 16px- ลบกฎที่ว่างเปล่าและการประกาศที่ซ้ำกัน
“จัดโครงสร้างใหม่” ทำอะไร?
การจัดโครงสร้างใหม่จะดูทั้ง stylesheet: กฎที่มีการประกาศเหมือนกันจะถูกรวมเป็นรายการ selector เดียว (.a,.b{color:red}) และ selector ที่ซ้ำกันจะถูกรวมเข้าด้วยกัน มักช่วยลดขนาดได้อีก 5–15% กับ stylesheet จริง CSSO จะรวมเฉพาะเมื่อลำดับ cascade ยังคงเหมือนเดิม แต่หากคุณพึ่งพาการ override ที่ไม่ปกติ ก็ปิดตัวเลือกนี้เพื่อย่อเฉพาะด้านไวยากรณ์ได้
ทำไมต้องย่อ CSS?
CSS บล็อกการเรนเดอร์: เบราว์เซอร์วาดหน้าไม่ได้จนกว่า stylesheet ใน <head> จะดาวน์โหลดและพาร์สเสร็จ CSS ที่เล็กลงหมายถึง First Contentful Paint ที่เร็วขึ้นและ Core Web Vitals ที่ดีขึ้น ซึ่งช่วยทั้งผู้ใช้และอันดับการค้นหา ใช้การย่อร่วมกับ gzip หรือ Brotli บนเซิร์ฟเวอร์เพื่อผลลัพธ์ที่ดีที่สุด
คำถามที่พบบ่อย
การย่อ CSS ปลอดภัยหรือไม่?
รองรับ CSS สมัยใหม่ เช่น custom property, nesting และ @layer หรือไม่?
--var), @media, @supports, @layer, @container และไวยากรณ์ grid จะถูกคงไว้