เครื่องมือบีบอัด CSS ฟรี: บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ออนไลน์
บีบอัดโค้ด CSS ได้ทันทีและลดขนาดไฟล์ได้ถึง 40% เครื่องมือบีบอัด CSS ออนไลน์ฟรีที่ลบช่องว่าง คอมเมนต์ และปรับโครงสร้างไวยากรณ์เพื่อเพิ่มประสิทธิภาพการทำงานของเว็บไซต์
เครื่องมือบีบอัด CSS
บีบอัดโค้ด CSS ได้ทันทีเพื่อลดขนาดไฟล์สูงสุด 40% และเพิ่มความเร็วการโหลดเว็บไซต์
เกี่ยวกับการบีบอัด CSS
การบีบอัด CSS จะลบอักขระที่ไม่จำเป็นออกจากไฟล์ CSS โดยไม่เปลี่ยนแปลงฟังก์ชัน ลดขนาดไฟล์และปรับปรุงประสิทธิภาพเว็บไซต์
- ลบคำอธิบาย ช่องว่าง และบรรทัดว่าง
- ขจัดเครื่องหมายอัฒภาคที่ไม่จำเป็นและหน่วยศูนย์
- เพิ่มประสิทธิภาพค่าสี และการประกาศ
- เพิ่มความเร็วการโหลดหน้าและอันดับ SEO
เอกสารประกอบการใช้งาน
CSS Minifier คืออะไร?
CSS minifier เป็นเครื่องมือที่ลดขนาดไฟล์ CSS (Cascading Style Sheets) โดยตัดอักขระที่เบราว์เซอร์ไม่จำเป็นต้องใช้ทิ้ง เครื่องมือนี้จะลบความคิดเห็น ช่องว่างส่วนเกิน และการขึ้นบรรทัดใหม่ รวมถึงย่อรูปแบบที่พบบ่อยบางส่วน โดยไม่เปลี่ยนแปลงลักษณะที่หน้าเว็บแสดงผล ผลลัพธ์คือไฟล์ที่มีขนาดเล็กลง ซึ่งเบราว์เซอร์สามารถดาวน์โหลดและแยกวิเคราะห์ได้เร็วขึ้น
CSS Minification ทำงานอย่างไร
นักพัฒนาเว็บเขียน CSS โดยใส่ความคิดเห็น การเยื้อง และบรรทัดว่าง เพราะสิ่งเหล่านี้ช่วยให้อ่านและแก้ไขโค้ดได้ง่ายขึ้น เบราว์เซอร์จะไม่สนใจการจัดรูปแบบทั้งหมดนั้น Minifier จะลบสิ่งเหล่านี้ รวมถึงไบต์อื่น ๆ อีกเล็กน้อยที่ไม่มีผลต่อการแสดงผล แล้วเหลือเป็นไฟล์ขนาดกะทัดรัดที่มีไว้สำหรับใช้งานจริงแทนการแก้ไข
เครื่องมือนี้ใช้การเปลี่ยนแปลงดังต่อไปนี้:
- ลบความคิดเห็น บล็อก
/* ... */ทุกบล็อกจะถูกลบ - รวมช่องว่าง ชุดของช่องว่าง แท็บ และการขึ้นบรรทัดใหม่ระหว่างกฎจะถูกลดเหลือไม่มีเลย หรือเหลือช่องว่างเพียงหนึ่งช่องในกรณีที่ช่องว่างมีความหมาย (เช่น ระหว่าง
.parentและ.childในตัวเลือกสืบทอด) - ลบช่องว่างรอบเครื่องหมายวรรคตอน ช่องว่างที่อยู่ติดกับ
{,},:,;และ,จะถูกลบ - ลบอัฒภาคส่วนเกิน อัฒภาคที่ซ้ำกันจะถูกรวมเป็นหนึ่งตัว และอัฒภาคสุดท้ายก่อน
}ปิดจะถูกลบ - ย่อค่าสีแบบเลขฐานสิบหก สีหกหลักอย่าง
#ffffffจะกลายเป็น#fffเมื่อเลขแต่ละคู่ตรงกัน (สำหรับสีแดง สีเขียว และสีน้ำเงิน) สีแปดหลักที่มีค่าอัลฟา เช่น#ffaa00ccก็จะถูกย่อในลักษณะเดียวกันเมื่อเลขทั้งสี่คู่ตรงกัน - ตัดหน่วยออกจากค่าที่มีความยาวเป็นศูนย์
0px,0emและ0remจะกลายเป็น0ส่วนค่าร้อยละจะคงไว้เหมือนเดิม เพราะ0%ไม่สามารถใช้แทน0ธรรมดาได้เสมอไป (เช่น ในflex-basisหรือขั้นตอนของ@keyframes) - ลบเลขศูนย์นำหน้าจากทศนิยม
0.5จะกลายเป็น.5
เพื่อป้องกันไม่ให้ไฟล์เสียหาย เครื่องมือจะไม่เปลี่ยนแปลงเนื้อหา 3 ประเภท ได้แก่ ข้อความภายในเครื่องหมายอัญประกาศ ค่าภายใน url() ที่ไม่มีเครื่องหมายอัญประกาศ และเนื้อหาของฟังก์ชันคณิตศาสตร์ เช่น calc(), clamp(), min() และ max() ช่องว่างภายใน calc(100% - 20px) มีความสำคัญต่อเบราว์เซอร์ ดังนั้นเครื่องมือจะคงไว้ตามเดิมทุกประการ
เครื่องมือนี้จะไม่รวมตัวเลือกที่ซ้ำกัน ลบบล็อกกฎที่ว่างเปล่า หรือแปลงสี rgb() เป็นเลขฐานสิบหก การปรับให้เหมาะสมเหล่านี้เป็นสิ่งที่เครื่องมืออื่นทำได้ แต่ minifier นี้มุ่งเน้นเฉพาะการเปลี่ยนแปลงที่ระบุไว้ข้างต้น
สูตรคำนวณเปอร์เซ็นต์การลดขนาด
เครื่องมือรายงานว่าไฟล์มีขนาดเล็กลงกี่เปอร์เซ็นต์:
1reduction % = ((original length − minified length) / original length) × 100
2ความยาวทั้งสองค่าจะนับเป็นจำนวนอักขระ และผลลัพธ์จะปัดเศษเป็นทศนิยมสองตำแหน่ง
ตัวอย่างพร้อมวิธีทำ
CSS ต้นฉบับ (193 อักขระ):
1/* Navigation Styles */
2.nav-menu {
3 display: flex;
4 justify-content: space-between;
5 padding: 20px 0px;
6 background-color: #ffffff;
7}
8
9.nav-item {
10 margin-right: 15px;
11 color: #000000;
12}
13ผลลัพธ์ CSS ที่ย่อแล้ว (129 อักขระ):
1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2เมื่อนำสูตรมาใช้: (193 − 129) / 193 × 100 = 33.16% ความคิดเห็นถูกลบออก การเยื้องและการขึ้นบรรทัดใหม่ถูกลบออก 0px กลายเป็น 0 และ #ffffff/#000000 กลายเป็น #fff/#000
เปอร์เซ็นต์ที่แน่นอนขึ้นอยู่กับข้อมูลนำเข้า CSS ที่เขียนไว้อย่างกระชับและมีความคิดเห็นน้อยจะลดขนาดลงไม่มาก ส่วน CSS ที่มีความคิดเห็นจำนวนมากและเยื้องลึกอาจลดขนาดลงได้มากกว่า โดยทั่วไปสไตล์ชีตที่ย่อด้วยเครื่องมือนี้จะมีขนาดลดลงประมาณ 20% ถึง 40%
วิธีใช้เครื่องมือนี้
- วางโค้ด CSS ลงในช่องป้อนข้อมูลทางซ้าย
- เวอร์ชันที่ย่อแล้วจะแสดงทางขวาโดยอัตโนมัติ โดยไม่ต้องกดปุ่ม
- ตรวจสอบเปอร์เซ็นต์การลดขนาดที่แสดงอยู่เหนือผลลัพธ์
- เลือก "Copy to Clipboard" เพื่อคัดลอก CSS ที่ย่อแล้ว จากนั้นวางลงในไฟล์โครงการ
- เลือก "Clear" เพื่อล้างข้อมูลทั้งสองช่องและเริ่มใหม่
ข้อมูลที่พิมพ์ลงในเครื่องมือจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ การย่อขนาดจะทำงานในเบราว์เซอร์
ควรย่อ CSS เมื่อใด
ทีมพัฒนามักย่อ CSS เป็นขั้นตอนหนึ่งของกระบวนการบิลด์ โดยใช้เครื่องมืออย่าง Webpack หรือสคริปต์ npm เพื่อให้การเปลี่ยนแปลงเกิดขึ้นโดยอัตโนมัติก่อนการนำไปใช้งานแต่ละครั้ง ไฟล์ต้นฉบับที่อ่านง่ายและมีความคิดเห็นจะยังคงอยู่ในการควบคุมเวอร์ชัน ส่วนบิลด์สำหรับใช้งานจริงเท่านั้นที่จะถูกย่อ สถานที่ที่มักใช้ CSS ที่ย่อแล้ว ได้แก่:
- เว็บไซต์ขนาดใหญ่ เช่น ร้านค้าออนไลน์ ซึ่งสไตล์ชีตที่มีขนาดเล็กลงหมายถึงหน้าเว็บที่โหลดเร็วขึ้น
- แอปพลิเคชันแบบหน้าเดียว ที่สร้างด้วยเฟรมเวิร์กอย่าง React หรือ Vue ซึ่ง CSS จะถูกรวมเป็นชุดเดียวกับ JavaScript
- หน้าเว็บสำหรับอุปกรณ์เคลื่อนที่ ซึ่งผู้ใช้มีแนวโน้มเชื่อมต่อผ่านเครือข่ายที่ช้ากว่า
- อีเมล HTML ซึ่งมักมีข้อจำกัดด้านขนาดอย่างเข้มงวด
การย่อ CSS กับความเร็วของหน้าเว็บ
ไฟล์ CSS ที่มีขนาดเล็กลงจะดาวน์โหลดและแยกวิเคราะห์ได้เร็วขึ้น ซึ่งอาจทำให้เวลาที่หน้าเว็บเริ่มแสดงผลสั้นลง Google ระบุว่าความเร็วของหน้าเว็บเป็นหนึ่งในสัญญาณที่ใช้จัดอันดับการค้นหา ดังนั้นหน้าเว็บที่เร็วขึ้นอาจเป็นปัจจัยเล็ก ๆ หนึ่งในหลายปัจจัยที่ส่งผลต่อประสิทธิภาพของเว็บไซต์ในผลการค้นหา การย่อขนาดเพียงอย่างเดียวไม่ได้รับประกันว่าอันดับจะเปลี่ยนแปลง แต่เป็นการปรับให้เหมาะสมอย่างหนึ่งในหลายวิธี ซึ่งรวมถึงการบีบอัดรูปภาพและเวลาตอบสนองของเซิร์ฟเวอร์
CSS Minifier เทียบกับ CSS Beautifier
เครื่องมือย่อโค้ดบีบอัดโค้ดสำหรับใช้งานจริง ส่วนเครื่องมือจัดรูปแบบโค้ดทำในทางตรงกันข้าม โดยนำ CSS ที่ถูกบีบอัดมาจัดรูปแบบใหม่ด้วยการเยื้องและการขึ้นบรรทัดใหม่ เพื่อให้คนกลับมาอ่านได้อีกครั้ง เครื่องมือจัดรูปแบบโค้ดไม่สามารถกู้คืนหมายเหตุหรือชื่อตัวแปรเดิมที่ถูกลบระหว่างการย่อโค้ดได้ เพราะข้อมูลเหล่านั้นหายไปแล้วเมื่อลบออก
คำถามที่พบบ่อย
CSS มีขนาดเล็กลงเท่าใดหลังการย่อขนาด ด้วยเครื่องมือนี้ โดยทั่วไปจะลดลง 20% ถึง 40% ขึ้นอยู่กับจำนวนความคิดเห็น บรรทัดว่าง และการเยื้องในไฟล์ต้นฉบับ ไฟล์ที่มีการจัดรูปแบบตั้งแต่แรกเพียงเล็กน้อยจะลดขนาดลงไม่มาก
การย่อ CSS เปลี่ยนลักษณะที่หน้าเว็บแสดงผลหรือไม่
ไม่เปลี่ยน การย่อขนาดจะลบเฉพาะอักขระที่เบราว์เซอร์ไม่สนใจ เช่น ความคิดเห็นและช่องว่างส่วนเกิน และเขียนค่าที่เทียบเท่ากันบางค่าใหม่ (เช่น #ffffff เป็น #fff) หน้าเว็บที่แสดงผลจึงยังคงเหมือนเดิม
ควรย่อ CSS ระหว่างการพัฒนาหรือไม่ ไม่ควร ควรเก็บเวอร์ชันที่อ่านง่ายและมีความคิดเห็นไว้ขณะเขียนและแก้ไขข้อผิดพลาดของโค้ด ให้ย่อเฉพาะสำเนาที่จะส่งไปยังเซิร์ฟเวอร์สำหรับใช้งานจริง โดยปกติเป็นขั้นตอนอัตโนมัติในกระบวนการบิลด์
CSS ที่ย่อแล้วสามารถเปลี่ยนกลับเป็นไฟล์ต้นฉบับได้หรือไม่ Beautifier สามารถจัดรูปแบบ CSS ที่ย่อแล้วใหม่ด้วยการเยื้องได้ แต่ไม่สามารถกู้คืนความคิดเห็นที่ถูกลบ หรือคืนชื่อที่สื่อความหมายซึ่งไม่เคยมีอยู่ในเวอร์ชันที่ย่อแล้วได้ ควรเก็บไฟล์ต้นฉบับไว้
เครื่องมือนี้แปลงสี rgb() เป็นเลขฐานสิบหก หรือรวมตัวเลือกที่ซ้ำกันหรือไม่
ไม่ เครื่องมือนี้ย่อค่าสีแบบเลขฐานสิบหกและลบอักขระที่ไม่จำเป็น แต่จะไม่เขียนค่า rgb()/hsl() ใหม่หรือรวมตัวเลือกที่ซ้ำกัน Minifier อื่นบางตัวอาจทำขั้นตอนเพิ่มเติมเหล่านี้
การย่อขนาดเหมือนกับการบีบอัดด้วย gzip หรือไม่ ไม่ การย่อขนาดจะลบอักขระที่ไม่จำเป็นออกจากซอร์สโค้ดโดยตรง ส่วนการบีบอัดด้วย Gzip (หรือ Brotli) จะดำเนินการโดยเว็บเซิร์ฟเวอร์ขณะส่งไฟล์ โดยใช้อัลกอริทึมแยกต่างหาก การใช้ทั้งสองวิธีร่วมกันทำให้ไฟล์ที่ส่งผ่านเครือข่ายมีขนาดเล็กที่สุด