ซีเอสเอส เครื่องย่อส่วน
ย่อขนาดและบีบอัดสไตล์ชีต CSS ทันทีในเบราว์เซอร์ของคุณ ลบความคิดเห็น ยุบช่องว่าง และลดขนาดไฟล์ ฟรีและเป็นส่วนตัว
ลากและวางไฟล์ CSS ที่นี่
รองรับไฟล์ .css หรือวาง CSS ของคุณด้านบน
ย่อขนาดและบีบอัดสไตล์ชีต CSS ทันทีในเบราว์เซอร์ของคุณ ลบความคิดเห็น ยุบช่องว่าง และลดขนาดไฟล์ ฟรีและเป็นส่วนตัว
รองรับไฟล์ .css หรือวาง CSS ของคุณด้านบน
การลดขนาด CSS จะลบช่องว่าง ความคิดเห็น และอักขระที่ไม่จำเป็นออกจากสไตล์ชีต เพื่อลดขนาดก่อนที่จะแสดงไปยังเบราว์เซอร์ กฎที่แท้จริงไม่มีการเปลี่ยนแปลง: สไตล์ชีทที่ย่อขนาดจะแสดงผลเพจเหมือนกับแหล่งที่มาที่ไม่มีการย่อขนาด การประหยัดมาจากการลบบรรทัดใหม่ อัฒภาคซ้ำซ้อน ความคิดเห็น โอกาสการจดชวเลขแบบสีฐานสิบหก และทางลัดหน่วยศูนย์ (แทนที่ 0px ด้วย 0)
บนเว็บไซต์สมัยใหม่ที่มีกฎสไตล์มากมาย การลดลงโดยทั่วไปคือ 20–40% เมื่อเทียบกับแหล่งที่มาที่ไม่มีการย่อขนาด เมื่อรวมกับการบีบอัด gzip ที่เซิร์ฟเวอร์ การประหยัดส่วนเพิ่มจะลดลง — gzip บีบอัดข้อความที่ซ้ำกันได้อย่างมีประสิทธิภาพ — แต่การรวมกันนี้ยังคงเอาชนะการบีบอัดเพียงอย่างเดียว โดยเฉพาะอย่างยิ่งเมื่อสไตล์ชีทถูกแคชและให้บริการแก่ผู้เยี่ยมชมจำนวนมากหลายครั้ง
ตัวย่อนี้ประมวลผล CSS ในการผ่านครั้งเดียว ลบความคิดเห็นที่อยู่นอกค่า url() ยุบช่องว่าง ลบอัฒภาคที่ซ้ำซ้อนก่อนปิดเครื่องหมายปีกกา ใช้ชวเลขหน่วยศูนย์ และแปลงสีฐานสิบหกหกหลักเป็นรูปแบบสามหลักหากเป็นไปได้ (#ffffff → #fff) ผลลัพธ์ยังคงเป็น CSS ที่ถูกต้องซึ่งเบราว์เซอร์ใดๆ แยกวิเคราะห์ได้อย่างถูกต้อง
ไฟล์ CSS ขนาดเล็กจะโหลดเร็วขึ้นและเวลาในการบล็อกการเรนเดอร์ลดลง ซึ่งทั้งสองอย่างนี้ปรับปรุงคะแนน First Contentful Paint และ Largest Contentful Paint สำหรับไซต์ที่ Core Web Vitals ส่งผลต่อการจัดอันดับการค้นหา ทุกกิโลไบต์ของ CSS ที่บล็อกการแสดงผลที่โกนก็คุ้มค่ากับความพยายาม
ต้นทุนแบนด์วิธก็มีความสำคัญเช่นกัน ไซต์ที่ให้บริการการดูหน้าเว็บนับล้านครั้งจะประหยัดจำนวนการเข้าชมที่วัดได้เมื่อสไตล์ชีตมีขนาดเล็กลง 30% ใบเรียกเก็บเงิน CDN การใช้ข้อมูลมือถือ และการใช้พลังงาน ล้วนได้รับประโยชน์เล็กน้อย การลดขนาดนั้นฟรี — ขั้นตอนการสร้างเพียงครั้งเดียวโดยไม่มีค่าบำรุงรักษา
วาง CSS รับเวอร์ชันย่อขนาด
การลดขนาด CSS ส่วนใหญ่เป็นการลบช่องว่างแบบอนุรักษ์นิยม ช่องว่างภายในตัวเลือก การประกาศ และค่าจะยังคงอยู่เมื่อมีนัยสำคัญ ช่องว่างด้านนอกพังทลายลง ความคิดเห็นจะถูกลบออก เว้นแต่จะขึ้นต้นด้วย /*! (ความคิดเห็นเกี่ยวกับการเก็บรักษาใบอนุญาต)
ทางลัดทั่วไป: 0px, 0em และค่าหน่วยศูนย์ที่คล้ายกันจะกลายเป็น 0 สีฐานสิบหกหกหลักที่มีตัวเลขคู่กัน (#ffffff, #336699) กลายเป็นตัวเลขสามหลัก (#fff, #369) อัฒภาคสุดท้ายก่อน } จะถูกลบออก ชื่อสีจะไม่ถูกแปลงเป็นเลขฐานสิบหกโดยอัตโนมัติ เนื่องจากบางครั้งเลขฐานสิบหกอาจยาวกว่า (สีแดงจะสั้นกว่า #f00 ส่วน #ff0000 จะยาวกว่าสีแดง)
เอาต์พุตควรผ่านเครื่องมือตรวจสอบ CSS ที่ยอมรับอินพุต การสนับสนุนเบราว์เซอร์ไม่เปลี่ยนแปลง — การย่อขนาดไม่ได้แก้ไขกฎด้วยตนเอง มีเพียงการแสดงข้อความเท่านั้น