เครื่องมือทั้งหมด

บีบอัด CSS

ย่อขนาด CSS โดยลบช่องว่าง การขึ้นบรรทัด และคอมเมนต์ ให้ stylesheet เล็กลงและหน้าเว็บเร็วขึ้น ดูขนาดก่อนและหลัง เครื่องมือ minify CSS ฟรี

ลดขนาด stylesheet ของคุณ

CSS บล็อกการแสดงผล: เบราว์เซอร์จะไม่วาดหน้าจนกว่าจะดาวน์โหลดและแยกวิเคราะห์ stylesheet ใน <head> เสร็จ ขนาด CSS จึงมีผลโดยตรงต่อความเร็วที่หน้าปรากฏ เครื่องมือบีบอัด CSS ลบคอมเมนต์ ช่องว่าง การขึ้นบรรทัด และอักขระอื่นที่เบราว์เซอร์ไม่ต้องการ และแสดงจำนวนอักขระก่อนและหลัง

สไตล์ยังทำงานเหมือนเดิมทุกประการ แค่ไฟล์เล็กลง เหมาะสำหรับ CSS ที่กำหนดเองในธีม WordPress, Shopify หรือ AltumCode สำหรับโปรเจกต์เล็กที่ไม่มีเครื่องมือ build และสำหรับ critical CSS แบบ inline

เก็บต้นฉบับที่อ่านง่ายไว้แก้ไขในอนาคต และนำสำเนาที่บีบอัดขึ้นใช้งาน

วิธีใช้เครื่องมือบีบอัด CSS

  1. วาง CSS
  2. ส่งเพื่อบีบอัด
  3. เปรียบเทียบจำนวนอักขระก่อนและหลัง
  4. คัดลอก CSS ที่บีบอัดแล้วไปใส่ในเว็บไซต์หรือไฟล์

ตัวอย่าง

สไตล์ปุ่ม

ข้อมูลเข้า:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

ผลลัพธ์:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

คอมเมนต์และช่องว่างหายไป #ffffff ย่อเป็น #fff, 0px กลายเป็น 0 ค่า margin ที่ซ้ำถูกรวม และ 0.80 กลายเป็น .8

การใช้งานที่พบบ่อย

  • บีบอัด CSS ที่กำหนดเองซึ่งเพิ่มผ่านแผงตั้งค่าธีมหรือ CMS
  • ลดขนาด stylesheet สำหรับเว็บไซต์เล็กและแลนดิ้งเพจ
  • เตรียม critical CSS แบบ inline เพื่อให้แสดงผลครั้งแรกเร็วขึ้น
  • บีบอัด CSS ในแม่แบบอีเมล HTML
  • ลดขนาด stylesheet ของเว็บไซต์ที่ไม่มีขั้นตอน build เช่น เว็บสแตติกเล็กๆ หรือแลนดิ้งเพจ
  • เตรียม critical CSS เพื่อใส่แบบ inline ใน <head> ของหน้า
  • ลดขนาด CSS ที่กำหนดเองซึ่งวางใน CMS หรือเครื่องมือสร้างเว็บไซต์

เคล็ดลับและสิ่งที่ควรรู้

  • ลบกฎที่ไม่ได้ใช้ก่อน การลบ CSS ประหยัดได้มากกว่าการบีบอัด
  • เก็บคอมเมนต์ที่จำเป็น (อย่างประกาศลิขสิทธิ์) ไว้ในไฟล์ต้นฉบับและตรวจว่ายังคงอยู่หรือไม่
  • ทดสอบหน้าหลังนำขึ้นใช้งาน โดยเฉพาะถ้า CSS มีเทคนิคแปลกๆ
  • บีบอัด HTML และสคริปต์ด้วยเครื่องมือบีบอัด HTMLและเครื่องมือบีบอัด JS ตรวจค่าสีด้วยเครื่องมือแปลงสี

กรณีพิเศษและข้อจำกัด

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

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

เครื่องมือบีบอัด CSS ทำอะไร?

ลบอักขระที่ไม่จำเป็นออกจาก CSS เช่น ช่องว่างและคอมเมนต์ โดยไม่เปลี่ยนการทำงานของสไตล์

CSS ที่บีบอัดแล้วเร็วขึ้นไหม?

ใช่ ไฟล์ที่เล็กลงดาวน์โหลดและแยกวิเคราะห์เร็วขึ้น ช่วยให้หน้าแสดงผลเร็วขึ้น

ยกเลิกการบีบอัด CSS ได้ไหม?

จัดรูปแบบใหม่ได้ด้วยเครื่องมือจัดรูปแบบ แต่คอมเมนต์ที่ถูกลบกู้คืนไม่ได้ เก็บไฟล์ต้นฉบับไว้

ควรบีบอัด CSS ไหมถ้าใช้ gzip หรือ Brotli?

ควร การบีบอัดฝั่งเซิร์ฟเวอร์และการ minify ทำงานร่วมกันเพื่อให้ขนาดที่ส่งเล็กที่สุด

การบีบอัดเปลี่ยนหน้าตาเว็บไซต์ไหม?

ไม่ควร ลบเฉพาะอักขระที่เบราว์เซอร์ไม่สนใจ และย่อค่าเป็นรูปแบบที่เทียบเท่า เช่น #fff

เครื่องมือที่เกี่ยวข้อง

แบ่งปัน

เครื่องมือที่คล้ายกัน

บีบอัด HTML

ย่อขนาด HTML โดยลบช่องว่าง การขึ้นบรรทัด และคอมเมนต์ เพื่อลดขนาดหน้าเว็บและโหลดเร็วขึ้น ดูจำนวนอักขระก่อนและหลัง เครื่องมือ minify HTML ฟรี

บีบอัด JavaScript

ย่อขนาด JavaScript โดยลบช่องว่าง คอมเมนต์ และการขึ้นบรรทัด เพื่อลดขนาดไฟล์และทำให้เว็บไซต์เร็วขึ้น ดูจำนวนอักขระก่อนและหลัง ฟรี

เครื่องมือฟรียอดนิยม