แปลงฟรี

ซีเอสเอส เครื่องย่อส่วน

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

ลากและวางไฟล์ CSS ที่นี่

รองรับไฟล์ .css หรือวาง CSS ของคุณด้านบน

หรือ

เกี่ยวกับเครื่องมือนี้

การลดขนาด CSS จะลบช่องว่าง ความคิดเห็น และอักขระที่ไม่จำเป็นออกจากสไตล์ชีต เพื่อลดขนาดก่อนที่จะแสดงไปยังเบราว์เซอร์ กฎที่แท้จริงไม่มีการเปลี่ยนแปลง: สไตล์ชีทที่ย่อขนาดจะแสดงผลเพจเหมือนกับแหล่งที่มาที่ไม่มีการย่อขนาด การประหยัดมาจากการลบบรรทัดใหม่ อัฒภาคซ้ำซ้อน ความคิดเห็น โอกาสการจดชวเลขแบบสีฐานสิบหก และทางลัดหน่วยศูนย์ (แทนที่ 0px ด้วย 0)

บนเว็บไซต์สมัยใหม่ที่มีกฎสไตล์มากมาย การลดลงโดยทั่วไปคือ 20–40% เมื่อเทียบกับแหล่งที่มาที่ไม่มีการย่อขนาด เมื่อรวมกับการบีบอัด gzip ที่เซิร์ฟเวอร์ การประหยัดส่วนเพิ่มจะลดลง — gzip บีบอัดข้อความที่ซ้ำกันได้อย่างมีประสิทธิภาพ — แต่การรวมกันนี้ยังคงเอาชนะการบีบอัดเพียงอย่างเดียว โดยเฉพาะอย่างยิ่งเมื่อสไตล์ชีทถูกแคชและให้บริการแก่ผู้เยี่ยมชมจำนวนมากหลายครั้ง

ตัวย่อนี้ประมวลผล CSS ในการผ่านครั้งเดียว ลบความคิดเห็นที่อยู่นอกค่า url() ยุบช่องว่าง ลบอัฒภาคที่ซ้ำซ้อนก่อนปิดเครื่องหมายปีกกา ใช้ชวเลขหน่วยศูนย์ และแปลงสีฐานสิบหกหกหลักเป็นรูปแบบสามหลักหากเป็นไปได้ (#ffffff → #fff) ผลลัพธ์ยังคงเป็น CSS ที่ถูกต้องซึ่งเบราว์เซอร์ใดๆ แยกวิเคราะห์ได้อย่างถูกต้อง

ทำไมต้องลดขนาด CSS

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

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

วิธีใช้งาน

วาง CSS รับเวอร์ชันย่อขนาด

  1. วาง CSS ของคุณ: วางไฟล์ .css หรือวางซอร์ส CSS ลงในพื้นที่อินพุต ตัวย่อยอมรับ CSS ที่ถูกต้อง — ไวยากรณ์สมัยใหม่ รวมถึงตัวแปร CSS, calc(), ตาราง และ flexbox
  2. เลือกตัวเลือก: ค่าเริ่มต้นจะลบความคิดเห็น ยุบช่องว่าง และใช้ทางลัดทั่วไป คุณสามารถปิดใช้การแปลงเฉพาะได้หากต้องการเก็บความคิดเห็นหรือการจัดรูปแบบเฉพาะไว้
  3. ลดขนาด: ตัวย่อจะเดิน CSS โดยใช้การเปลี่ยนแปลงที่เปิดใช้งานแต่ละรายการ เอาต์พุตมีฟังก์ชัน CSS เหมือนกันโดยมีขนาดลดลง
  4. ใช้เอาต์พุต: คัดลอกหรือดาวน์โหลด แทนที่ CSS ต้นทางในเอาต์พุตบิวด์ของคุณด้วยเวอร์ชันย่อขนาด หรือเรียกใช้การลดขนาดเป็นขั้นตอนการบิลด์ในเครื่องมือของคุณ

กรณีการใช้งานทั่วไป

รายละเอียดทางเทคนิค

การลดขนาด CSS ส่วนใหญ่เป็นการลบช่องว่างแบบอนุรักษ์นิยม ช่องว่างภายในตัวเลือก การประกาศ และค่าจะยังคงอยู่เมื่อมีนัยสำคัญ ช่องว่างด้านนอกพังทลายลง ความคิดเห็นจะถูกลบออก เว้นแต่จะขึ้นต้นด้วย /*! (ความคิดเห็นเกี่ยวกับการเก็บรักษาใบอนุญาต)

ทางลัดทั่วไป: 0px, 0em และค่าหน่วยศูนย์ที่คล้ายกันจะกลายเป็น 0 สีฐานสิบหกหกหลักที่มีตัวเลขคู่กัน (#ffffff, #336699) กลายเป็นตัวเลขสามหลัก (#fff, #369) อัฒภาคสุดท้ายก่อน } จะถูกลบออก ชื่อสีจะไม่ถูกแปลงเป็นเลขฐานสิบหกโดยอัตโนมัติ เนื่องจากบางครั้งเลขฐานสิบหกอาจยาวกว่า (สีแดงจะสั้นกว่า #f00 ส่วน #ff0000 จะยาวกว่าสีแดง)

เอาต์พุตควรผ่านเครื่องมือตรวจสอบ CSS ที่ยอมรับอินพุต การสนับสนุนเบราว์เซอร์ไม่เปลี่ยนแปลง — การย่อขนาดไม่ได้แก้ไขกฎด้วยตนเอง มีเพียงการแสดงข้อความเท่านั้น

แนวทางปฏิบัติที่ดีที่สุด

คำถามที่พบบ่อย

การลดขนาด CSS จะลบอะไร?
ช่องว่าง (ช่องว่าง แท็บ บรรทัดใหม่) ความคิดเห็น (/* ... */) อัฒภาคที่ไม่จำเป็น ศูนย์ซ้ำซ้อน (0.5 → .5) การเพิ่มประสิทธิภาพชวเลข (#ffffff → #fff) และหน่วยซ้ำซ้อน (0px → 0)
CSS แบบย่อขนาดปลอดภัยที่จะใช้ในการผลิตหรือไม่
ใช่. การลดขนาดจะรักษากฎ CSS ตัวเลือก และค่าคุณสมบัติทั้งหมด ผลลัพธ์มีฟังก์ชันการทำงานเหมือนกัน — เบราว์เซอร์ตีความในลักษณะเดียวกันทุกประการ เป็นแนวทางปฏิบัติมาตรฐานสำหรับเว็บไซต์ที่ใช้งานจริงทั้งหมด
ฉันควรคาดหวังการลดขนาดเท่าใด
โดยทั่วไปแล้ว 20-50% สำหรับ CSS ที่เขียนดี โค้ดที่มีการแสดงความคิดเห็นอย่างหนักพร้อมการจัดรูปแบบแบบละเอียดทำให้เห็นการลดลงที่มากขึ้น CSS ที่มีขนาดกะทัดรัดอยู่แล้วอาจย่อขนาดลงได้เพียง 10-15% เท่านั้น
ฉันควรย่อขนาด CSS หากฉันใช้ gzip หรือไม่
ใช่ทั้งคู่ Gzip บีบอัดรูปแบบที่ซ้ำกัน ในขณะที่การลดขนาดจะลบอักขระที่ไม่จำเป็นออก เมื่อรวมกันแล้วจะทำให้เกิดการบีบอัดได้ดีกว่าอย่างใดอย่างหนึ่ง โดยทั่วไปแล้ว CSS แบบย่อขนาด + gzipped จะเล็กกว่าต้นฉบับประมาณ 85-95%
ฉันควรย่อเล็กสุดเสมอหรือไม่?
สำหรับการผลิตใช่ สำหรับไฟล์ต้นฉบับการพัฒนา ไม่ — CSS ที่อ่านได้เป็นสิ่งจำเป็นสำหรับการบำรุงรักษา เรียกใช้การลดขนาด ณ เวลาสร้าง ไม่ใช่ในเวลาแก้ไข
CSS ของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่
ไม่ ตัวย่อทำงานในเบราว์เซอร์ของคุณ
สิ่งนี้เปรียบเทียบกับ cssnano หรือ csso ได้อย่างไร
cssnano และ csso เป็นปลั๊กอิน PostCSS สำหรับบิลด์ที่ใช้งานจริง พวกเขาเสนอการเปลี่ยนแปลงเชิงรุกมากขึ้น เช่น การรวมกฎที่ซ้ำซ้อนเข้าด้วยกัน เครื่องมือนี้ครอบคลุมถึงการลดขนาดพื้นฐานสำหรับการใช้งานเฉพาะกิจโดยไม่ต้องตั้งค่าบิลด์
การลดขนาดทำให้แผนที่ต้นทางเสียหายหรือไม่
การลดขนาดไม่ได้สร้างแผนที่ต้นทาง เครื่องมือนี้สร้างเฉพาะเอาต์พุตที่ย่อเล็กสุดเท่านั้น หากต้องการแก้ไขข้อบกพร่อง CSS แบบย่อในการผลิต ให้สร้างการแมปแหล่งที่มาโดยเป็นส่วนหนึ่งของงานสร้างของคุณ