การย่อขนาด CSS ช่วยลดขนาดไฟล์โดยไม่เปลี่ยนวิธีที่เบราว์เซอร์ตีความไฟล์เลยแม้แต่น้อย สไตล์ที่แสดงผลออกมายังคงเหมือนเดิมทุกประการ สิ่งที่หายไปมีเพียงส่วนที่มีไว้เพื่อให้มนุษย์อ่านโค้ดได้ง่ายขึ้นเท่านั้น
สิ่งที่ถูกลบออกจริง ๆ
เครื่องมือย่อขนาดจะลบช่องว่างและการขึ้นบรรทัดใหม่ระหว่างกฎ (rule) ต่าง ๆ ลบคอมเมนต์รูปแบบ /* ... */ ลบเซมิโคลอนตัวสุดท้ายก่อนวงเล็บปีกกาปิดของแต่ละบล็อก และย่อเลขศูนย์ที่ไม่จำเป็นในค่าอย่าง 0.5em → .5em ไม่มีขั้นตอนใดในนี้แตะต้องเนื้อหาตัวอักษรจริง ๆ เลย มีแต่ช่องว่างและเครื่องหมายวรรคตอนรอบ ๆ เท่านั้น
ตัวอักษรไทยใน CSS และการประกาศ @charset
ค่าอย่าง content: "→" หรือคอมเมนต์ภาษาไทยจะผ่านการย่อขนาดโดยไม่มีตัวอักษรใดเปลี่ยนแปลงเลย เพราะเครื่องมือย่อขนาดจัดการเฉพาะช่องว่าง คอมเมนต์ และไวยากรณ์ ไม่ได้ยุ่งกับการเข้ารหัสไบต์ของตัวข้อความ สิ่งที่ควรระวังจริง ๆ คือเครื่องมือรุ่นเก่าหรือ build pipeline ที่รวมไฟล์ CSS หลายไฟล์เข้าด้วยกัน แล้วสันนิษฐานการเข้ารหัสที่ไม่ใช่ UTF-8 โดยไม่ตั้งใจ สำหรับไฟล์ CSS ที่มีตัวอักษรไทย ทางที่ปลอดภัยที่สุดคือบันทึกเป็น UTF-8 และประกาศ @charset "UTF-8"; ไว้เป็นบรรทัดแรกสุดของไฟล์ ก่อนสิ่งอื่นใดแม้แต่คอมเมนต์
ทำไมไฟล์ที่ย่อขนาดแล้วยังทำงานเหมือนเดิมทุกประการ
ตัวแยกวิเคราะห์ (parser) CSS ของเบราว์เซอร์เพิกเฉยต่อช่องว่างและการขึ้นบรรทัดใหม่ระหว่างโทเคนโดยสิ้นเชิง เพราะสิ่งเหล่านี้มีไว้เพื่อให้มนุษย์อ่านโค้ดได้ง่ายขึ้นเท่านั้น การลบมันออกจึงไม่เปลี่ยนสไตล์ที่คำนวณได้เลย เพียงแค่ทำให้ไฟล์กระชับขึ้น
ใช้ทำอะไรได้บ้าง
- ลดขนาดไฟล์ CSS ก่อนนำเว็บไซต์ขึ้น production
- เร่งความเร็วในการโหลดหน้าเว็บด้วยข้อมูลที่ส่งน้อยลง
- ทำให้โครงสร้างของสไตล์อ่านยากขึ้นเมื่อมีคนเปิดดูซอร์สโค้ดผ่าน ๆ
ความหมายจริงของขนาดไฟล์สำหรับผู้ใช้อินเทอร์เน็ตมือถือในไทย
ผู้ใช้อินเทอร์เน็ตในไทยจำนวนมากเข้าเว็บผ่านเครือข่ายมือถือเป็นหลัก และแม้ 4G จะครอบคลุมพื้นที่ส่วนใหญ่แล้ว แต่คุณภาพสัญญาณและแพ็กเกจอินเทอร์เน็ตแบบจำกัดปริมาณข้อมูลก็ยังเป็นปัจจัยจริงสำหรับผู้ใช้หลายกลุ่ม โดยเฉพาะนอกเขตเมืองใหญ่ สำหรับผู้ใช้กลุ่มนี้ ไฟล์ CSS ที่เล็กลงไม่กี่กิโลไบต์ไม่ใช่แค่ตัวเลขในรายงานประสิทธิภาพ แต่หมายถึงหน้าเว็บที่โหลดเร็วขึ้นและใช้ดาต้าน้อยลงจริง ๆ การย่อขนาด CSS เป็นการปรับแต่งที่ต้นทุนต่ำมาก จึงไม่มีเหตุผลที่ดีจะข้ามขั้นตอนนี้ไปสำหรับเว็บไซต์ที่มีผู้ใช้กลุ่มนี้เป็นจำนวนมาก